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

Problem:

While running my react app i am getting this error-

While trying to resolve module idb from file \node_modules\@firebase\app\dist\esm\index.esm2017.js, the package \node_modules\idb\package.jsonwas successfully found. However, this package itself specifies a mainmodule field that could not be resolved (\node_modules\idb\build\index.cjs.Indeed, none of these files exist:

Solution 1:

You can downgraded your firebase version to 9.6.11 to fix the issue temporarily...

npm uninstall firebase
npm install firebase@9.6.11

Solution 2:

To resolve this issue, create a metro.config.js file in the project root. In the file add the file extension cjs.


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

const defaultConfig = getDefaultConfig(__dirname);

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

module.exports = defaultConfig;

React Native cli

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

Solution 3:

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

Thank you for reading the article. If you face any further problem feel free to ask us.