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

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 (<anonymous>) at resolveDependencies (//node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18) at //node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33 at Generator.next (<anonymous>) 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']
    }
  };
})();

[hueter]

Edited: Thank you @efoken

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

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