.cjs does not work with React Native and/or Expo

[efoken]

Since the latest version, which changed the file extension to .cjs, it does not work anymore with React Native. I'm getting the following error:

Failed building JavaScript bundle.
While trying to resolve module `stylis` from file `/Users/.../node_modules/@emotion/cache/dist/cache.browser.cjs.js`, the package `/Users/.../node_modules/stylis/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/.../node_modules/stylis/dist/stylis.cjs`. Indeed, none of these files exist:

  * /Users/.../node_modules/stylis/dist/stylis.cjs(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
  * /Users/.../node_modules/stylis/dist/stylis.cjs/index(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)

[Andarist]

It really seems like the Metro bundler/Expo problem. While we could "fix" this on our side this should definitely be fixed on theirs as .cjs will become more common in the ecosystem in the future.

[sanpoChew]

there's an issue open on the metro repo facebook/metro#535

builds work fine again for me after adding this to my metro config:

  resolver: {
    sourceExts: ['js', 'json', 'ts', 'tsx', 'cjs'],
  },

[hueter]

Unfortunately none of the work-arounds floating about are working for me on an Expo project, so this issue is blocking the upgrade to Emotion 11.

It makes sense to me that it's a Metro / Expo problem, but I haven't been able to find any indication that they intend to fix it on their end or that it's even on their radar since facebook/metro#535 hasn't gotten any responses 😞

[efoken]

@hueter for Expo you have to change your app.json file:

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

[hueter]

@efoken oh nice, that just worked. Thank you. I couldn't find docs for that anywhere but I'm glad it was that easy

[kasselTrankos]

Hi, all
im loading fluture tah uses index.cjs, and even doing
"packagerOpts": {
"sourceExts": ["cjs"]
}
doesnt works, any idea?
thanks

[smuralimohan]

Hi, all im loading fluture tah uses index.cjs, and even doing "packagerOpts": { "sourceExts": ["cjs"] } doesnt works, any idea? thanks

If you are using expo SDK >41 try this metro.config.js(create the file if it does not exist) in your root folder.

const { getDefaultConfig } = require('expo/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.sourceExts.push('cjs');
module.exports = defaultConfig;

[Asantie]

I tried adding a metro config as below

const { getDefaultConfig } = require('expo/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.sourceExts.push('cjs');
module.exports = defaultConfig;

well it works but its brings errors when I use moti.fly... reanimated error.

any fix on this issue??

[cybercris]

I tried adding a metro config as below

const { getDefaultConfig } = require('expo/metro-config'); const defaultConfig = getDefaultConfig(__dirname); defaultConfig.resolver.sourceExts.push('cjs'); module.exports = defaultConfig;

well it works but its brings errors when I use moti.fly... reanimated error.

any fix on this issue??

nandorojo/moti#141 (comment) @Asantie

[benjaminrittenhouse]

If you are using expo SDK >41 try this metro.config.js(create the file if it does not exist) in your root folder.

This fixed the issue for me. I looked everywhere and this finally got my iOS build working. Anyone with same issue, ensure you have file in root folder (metro.config.js) and use this code with extension that is not recognized ( in my case it was cjs). Thank you for this solution!

[doltee]

This fiexed the issue for me too.

I tried to fix this finally got my expo Android build working.
I created metro.config.js to root folder,
const { getDefaultConfig } = require('expo/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.sourceExts.push('cjs');
module.exports = defaultConfig;

I fixed the error.

Thank you.

Error message is
"
Android Bundling failed 1905ms
Unable to resolve module idb from C:\Users\kkk\Desktop\sparta_study\sparta-myhoneytip-jin\node_modules@firebase\app\dist\esm\index.esm2017.js: idb could not be found within the project or in these directories:
node_modules@firebase\app\node_modules
node_modules
..\node_modules
821 | }
822 | else {

823 | const idbHeartbeatObject = await readHeartbeatsFromIndexedDB(this.app);
| ^
824 | return idbHeartbeatObject || { heartbeats: [] };
825 | }
826 | }

[harshit0571]

mines still not working

can i get the documentation on 9.6.11 version so i can use different version

[rehanganapathy]

mine isn't working even after adding the metro.config.js file

[brailecg]

Hi, all im loading fluture tah uses index.cjs, and even doing "packagerOpts": { "sourceExts": ["cjs"] } doesnt works, any idea? thanks

If you are using expo SDK >41 try this metro.config.js(create the file if it does not exist) in your root folder.

const { getDefaultConfig } = require('expo/metro-config'); const defaultConfig = getDefaultConfig(__dirname); defaultConfig.resolver.sourceExts.push('cjs'); module.exports = defaultConfig;

This fixed if for me as well. Thank you!