50

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.

Improve this question

10 Answers 10

Reset to default
97

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",
  ],
};
Improve this answer
6
  • 4
    @Sohel So is the issue in fact with expo and not firebase?
    – JohnyClash
    Commented May 31, 2022 at 20:08
  • 9
    @JohnyClash 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
    – Sohel Islam Imran
    Commented Jun 1, 2022 at 8:20
  • Related metro issue: github.com/facebook/metro/issues/535
    – Sohel Islam Imran
    Commented Jun 1, 2022 at 8:31
  • 4
    FYI I had to reinstall node_modules afterwards before it finally worked
    – geg
    Commented Jun 6, 2022 at 23:31
  • 4
    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
    – user2364424
    Commented Jun 8, 2022 at 17:53
34

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]
Improve this answer
2
  • 1
    worked for me with react-native-cli and with yarn, but remember if on iOS doing npx pod-install ios
    – Marco Sajeva
    Commented Aug 8, 2022 at 17:02
  • i had to downgrade from v9.12 to this. thank you!
    – benwl
    Commented Oct 19, 2022 at 11:47
32

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'],
  },
};
Improve this answer
2
  • 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"]
    – scipilot
    Commented Aug 27, 2022 at 0:58
  • 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
    – serraosays
    Commented Sep 28, 2023 at 18:58
5

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

Improve this answer
2

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"]
    }
}
Improve this answer
1

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

expo install [email protected]

Improve this answer
0

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!

Improve this answer
0

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.

Improve this answer
-1

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

Improve this answer
2
  • The last thing I tried was downgrading the firebase version as @crunchtoast suggested. I have not yet experimented and found whether this answer works.
    – JohnyClash
    Commented May 10, 2022 at 17:56
  • 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
    – crunchytoast
    Commented May 11, 2022 at 4:19
-1

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"

},

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.