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\react_native\mealstogo\MealsToGo2\node_modules\@firebase\app\dist\esm\index.esm2017.js, the package C:\Users\OG\Desktop\programming\react_native\mealstogo\MealsToGo2\node_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\react_native\mealstogo\MealsToGo2\node_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\react_native\mealstogo\MealsToGo2\node_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.

Mandiemandingo

Answer 1

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",
  ],
};

Chico

@Sohel So is the issue in fact with expo and not firebase? – Mandiemandingo

@Mandiemandingo Actually, firebase use .cjs file extension which isn't supported in expo or in react native by default. So we need to manually configure the metro.config to parse it. Please read the details here – Chico

Related metro issue: github.com/facebook/metro/issues/535 – Chico

FYI I had to reinstall node_modules afterwards before it finally worked – Audieaudience

This worked for me. Many thanks. React Native project, so I just pasted the 2nd code segment into a new file at root called metro.config.js – Minnesota

When I try this getDefaultConfig is undefined when metro boots. But if I follow the require down into the module and it all seems to be there and exported as one would expect. I have an ejected project. I used the hardcoded solution from EdEd for now, but I'd rather a more dynamic "add to the defaults" approach like this. – Tag

Answer 2

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 [email protected]

Khartoum

worked for me with react-native-cli and with yarn, but remember if on iOS doing npx pod-install ios – Tiger

i had to downgrade from v9.12 to this. thank you! – Levey

Answer 3

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'],
  },
};

Karrikarrie

This fixed the error for me and was the only method that works because getDefaultConfig is undefined when metro boots for some reason. But I noticed my defaults in node_modules/metro-config/src/defaults/defaults.js are ["js", "json", "ts", "tsx"] so I made it ["js", "json", "ts", "tsx", "cjs"] – Tag

This is similar to what I did but sourceExts: [...sourceExts, 'cjs'] is even cleaner because you just read the existing ones and add cjs for firestore – Matrass

Answer 4

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!!

Narcoma

Answer 5

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"]
    }
}

Edroi

Answer 6

I have just installed this command it will automatically downgrade your firebase version and resolve the issue

expo install [email protected]

Schou

Answer 7

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!

Bennybenoit

Answer 8

Note: This is not an efficient or recommended fix. Just quick and dirty.

If you keep running into the issue and need a short-term fix then you can navigate over to the idb folder inside your node_modules folder, access the package.json file and change any file type ending in cjs to js.

node_modules --> idb --> package.json --> change any 'cjs' to 'js'

Again, this isn't the best solution. It's just a duct tape fix.

Fairfield

Answer 9

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

Standee

The last thing I tried was downgrading the firebase version as @crunchtoast suggested. I have not yet experimented and found whether this answer works. – Mandiemandingo

I did try to add a cjs resolver in the metro.config file but it didn't fix it for me... there was still something up with metro recognizing the files... I think ultimately it's a firebase issue, since they just added idb as a dependency a couple days ago – Khartoum

Answer 10

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"

},

Lennon