Metro has encountered an error: while trying to resolve module "idb-keyval' from file

Question

Trying to connect to a database (back4app) in React Native following this doc: https://www.back4app.com/docs/react-native/parse-sdk/react-native-sdk I was given this error message:

While trying to resolve module idb-keyval from file /Users/chenhana/TestRegistration/node_modules/parse/lib/react-native/IndexedDBStorageController.js , the package /Users/chenhana/TestRegistration/node_modules/idb-keyval/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved ( /Users/chenhana/TestRegistration/node_modules/idb-keyval/dist/compat.cjs . Indeed, none of these files exist:

• /Users/chenhana/TestRegistration/node_modules/idb-keyval/dist/compat.cjs(.native|.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)
• /Users/chenhana/TestRegistration/node_modules/idb-keyval/dist/compat.cjs/index(.native|.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)

Tried resetting cache, deleting and reinstalling npm modules, and followed along with the doc (also installed the Parse Javascript SDK) so I'm not too sure why this error keeps coming up. Any help will be appreciated, thank you!

Answer 1

In your metro.conf.js file, put the following code:

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

It might solve the issue

Answer 2

Change your metro.config.js for this:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */
const defaultSourceExts =
  require('metro-config/src/defaults/defaults').sourceExts;
module.exports = {
  transformer: {
    getTransformOptions: () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    sourceExts: process.env.RN_SRC_EXT
      ? [...process.env.RN_SRC_EXT.split(',').concat(defaultSourceExts), 'cjs'] // <-- cjs added here
      : [...defaultSourceExts, 'cjs'], // <-- cjs added here
  },
};