React-native bundling failure. ERROR MESSAGE: "While trying to resolve module 'idb'..... Indeed none of these files exist":

Question

ERROR MESSAGE IN QUESTION:

While trying to resolve module idb from file C:\Users\OG\Desktop\programming eact_native\mealstogo\MealsToGo2 ode_modules\@firebase\app\dist\esm\index.esm2017.js, the package C:\Users\OG\Desktop\programming eact_native\mealstogo\MealsToGo2 ode_modules\idb\package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (C:\Users\OG\Desktop\programming eact_native\mealstogo\MealsToGo2 ode_modules\idb\build\index.cjs. Indeed, none of these files exist:

Error message photo

The confusing part of this error is that the file index.esm2017 does in fact exist at the directory. '`C:\Users\OG\Desktop\programming eact_native\mealstogo\MealsToGo2 ode_modules\idb\build\index.cjs'

I have uninstalled and reinstalled firebase. I have installed and uninstalled 'idb'. I have cleared yarn cache, expo cache, deleted node_modules and reinstalled as well as cleared watchman cache all to no avail. I have also triple checked that the file directory is in fact where the error message says it isn't.

The error arose when expo installing lottie-react-native, however it seems unrelated, and the problem remained once removing lottie-react-native. I have used git to revert my code to before the behavior started and now the problem persists here as well.

It almost seems as the entire project is now trashed, how do I move forward.

user_17672428 · Answer

If you are using expo, to resolve this issue, create a metro.config.js file in the project root. In the file add the file extension cjs. details

const { getDefaultConfig } = require("@expo/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push("cjs");

module.exports = defaultConfig;

ScreenShot

React Native cli

const { getDefaultConfig } = require("metro-config");
const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues();
exports.resolver = {
  ...defaultResolver,
  sourceExts: [
    ...defaultResolver.sourceExts,
    "cjs",
  ],
};

user_3492892 · Answer

I get the same error... I think there's something funny about the new firebase version. I downgraded my firebase version to 9.6.11 to fix the issue temporarily...

npm uninstall firebase
npm install firebase@9.6.11

user_14634493 · Answer

I just added the following code to metro.config.js file. Im using Firebase v9.8.1

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  //added this
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs'],
  },
};

user_18513122 · Answer

I tried few things to resolve this issue in expo the solution worked for me to create metro.config.js file in root directory and add the following code;

const { getDefaultConfig } = require("@expo/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push("cjs");

module.exports = defaultConfig;

And now restart your expo app!!

user_19220803 · Answer

Found this that worked after restarting metro bundler: https://github.com/thysultan/stylis/issues/233

For Expo you have to change your app.json file:

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

user_10415531 · Answer

I have a react-native project(no expo) and got the same error, in my case I had firebase 9.7.0, but I changed to 9.6.11 like the buddy upper in this thread and it works. I build node modules with yarn install, and after npx pod-install. this is my package.json after and before(just firebase changed)

after:

"dependencies": {
"@react-navigation/native": "^6.0.10",
"@react-navigation/stack": "^6.2.1",
"axios": "^0.27.2",
"firebase": "9.7.0",
"react": "17.0.2",
"react-native": "0.68.1",
"react-native-gesture-handler": "^2.4.1",
"react-native-safe-area-context": "^4.2.5",
"react-native-screens": "^3.13.1"

},

before: (it works):

"dependencies": {
"@react-navigation/native": "^6.0.10",
"@react-navigation/stack": "^6.2.1",
"axios": "^0.27.2",
"firebase": "9.6.11",
"react": "17.0.2",
"react-native": "0.68.1",
"react-native-gesture-handler": "^2.4.1",
"react-native-safe-area-context": "^4.2.5",
"react-native-screens": "^3.13.1"

},

user_4051322 · Answer

After 1 hour research I found my solution. I got this error because wrong authDomain in firebase config.

Old:

authDomain: "https://something.firebaseio.com"

Fix:

authDomain: "something.firebaseio.com"

Hope this will help someone!

user_13648292 · Answer

Having the exact same issue even after adding firebase in a clean expo project. The issue is due to .cjs not supported in expo.

I fixed it by adding cjs into metro.config.js as described here: https://github.com/thysultan/stylis/issues/233#issuecomment-1000648356

React-native bundling failure. ERROR MESSAGE: "While trying to resolve module 'idb'..... Indeed none of these files exist":

8 Answers