Emotion 11 + React Native + Error While trying to resolve module `stylis`

[zenininja]

Current behavior:

I'm using following emotion 11 with React Native 0.63.2,
"@emotion/native": "11.0.0-next.15",
"@emotion/primitives-core": "11.0.0-next.15",
"@emotion/react": "11.0.0-next.15",

And when I build and run I'm getting following error in the runtime,

While trying to resolve module stylis from file /****/node_modules/@emotion/cache/dist/cache.browser.cjs.js, the package /****/node_modules/stylis/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/****/node_modules/stylis/dist/stylis.cjs. Indeed, none of these files exist:
/****/node_modules/stylis/dist/stylis.cjs(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.svg|.native.svg|.svg)

• //node_modules/stylis/dist/stylis.cjs/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.svg|.native.svg|.svg)
  at ResolutionRequest.resolveDependency (//node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:65:15)
  at DependencyGraph.resolveDependency (//node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
  at Object.resolve (//node_modules/metro/src/lib/transformHelpers.js:267:42)
  at //node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31
  at Array.map ()
  at resolveDependencies (//node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
  at //node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
  at Generator.next ()
  at asyncGeneratorStep (//node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
  at _next (/****/node_modules/metro/src/DeltaBundler/traverseDependencies.js:107:9)

To reproduce:

Use emotion 11 packages with latest react native sample.

Expected behavior:

It should not throw any error.

Environment information:

Reat Native: 0.63.2

"@emotion/native": "11.0.0-next.15",
"@emotion/primitives-core": "11.0.0-next.15",
"@emotion/react": "11.0.0-next.15"

[arvindell]

Hello, I encountered this issue recently too. The problem is with the stylis depedency as their main module has a cjs extension. The Metro config included in Create React App starter does not include cjs modules by default, so you have to add it as such:

metro.config.js

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    resolver: {
      sourceExts: [...sourceExts, 'cjs']
    }
  };
})();

[Andarist]

This really is a bug in Metro. I'll think about changing this in Stylis just as a workaround but please report this to the Metro team.

They should load files using the node's algorithm (albeit the enhanced one, but basic stuff should work according to this algorithm): https://nodejs.org/api/modules.html#modules_all_together . This describes the first step of LOAD_AS_FILE as:

If X is a file, load X as its file extension format.

What "as its file extension format" means? It means that it should load it using the registered extensions but if the extensions i not being found as registered then it always default to .js:
https://github.com/nodejs/node/blob/423490423264d1b7624d578a421a1bedecbc5d2e/lib/internal/modules/cjs/loader.js#L395-L407

[voidrender]

For anyone else trying to put this puzzle together, there are also open issues for this on stylis and metro.

facebook/metro#535
thysultan/stylis#233

[zenininja]

Thanks @ioveracker, @Andarist for the details.

[hueter]

Edited: Thank you @efoken

If you're using Expo try changing your app.json or app.config.(ts|js):

{
    "packagerOpts": {
      "sourceExts": ["cjs"]
}

[Andarist]

The newly published stylis@4.0.3 should remedy this issue. Please check it out.