React Native - Unable to resolve module from @react-navigation. None of these files exist: node_modules/nanoid/non-secure/index.cjs

Question

I have a React Native app that fails to build on both Android and iOS apps, (XCode, Android Studio, on a physical device). I have not changed anything inside package.json.

The error is being caused by a file (useReigsterNavigator.js) inside of the @react-navigation node_module:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useRegisterNavigator;

var _nonSecure = require("nanoid/non-secure"); 

This is the error message that comes up in the iOS simulator:

Unable to resolve module ../../../../nanoid/non-secure/index.cjs from /Users/username/Code/my-app/node_modules/@react-navigation/core/lib/commonjs/useRegisterNavigator.js: 

None of these files exist:
  * node_modules/nanoid/non-secure/index.cjs(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * node_modules/nanoid/non-secure/index.cjs/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
> 1 | "use strict";
  2 |
  3 | Object.defineProperty(exports, "__esModule", {
  4 |   value: true

Why am I getting this error? The nanoid folder and the react-navigation folders exists in node_modules.

screenshot of the nanoid folder inside node_modules

screenshot of the react-navigation folder inside node_modules

I've tried a few things that have not worked:

• Added a resolver to the metro.config.js file that looks for 'cjs' source extensions:

  resolver: {
      sourceExts: [...sourceExts, 'cjs'],
    },
  

• Have checked github issues of the following repos: nanoid, facebook metro, react-navigation to see there are no reported issues.

• Deleted Pods folder and Podfile.lock and then re-installed pods with the command pod install.

• Cleaned the pod cache with the command pod cache clean --all

• Reset the React-native packager cache npx react-native start --reset-cache

• Deleted CocoaPods, Pods, XCode DerivedData, and have performed pod deintegration and then restarted everything with pod set up and pod install: rm -rf ~/Library/Caches/CocoaPods; rm -rf Podsl; rm -rf ~/Library/Developer/Xcode/DerivedData/*; pod deintegrate; pod setup; pod install;

Answer 1

I was facing this issue while using @react-navigation with nx monorepo and fixed by adding cjs extension to resolver.sourceExts property of metro.config.js. This enables metro to read commonjs nanoid/non-secure/index.cjs file.

const { withNxMetro } = require('@nrwl/react-native');
const { getDefaultConfig } = require('metro-config');
const exclusionList = require('metro-config/src/defaults/exclusionList');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return withNxMetro(
    {
      transformer: {
        getTransformOptions: async () => ({
          transform: {
            experimentalImportSupport: false,
            inlineRequires: true,
          },
        }),
        babelTransformerPath: require.resolve('react-native-svg-transformer'),
      },
      resolver: {
        assetExts: assetExts.filter((ext) => ext !== 'svg'),
        sourceExts: [...sourceExts, 'svg', 'cjs'], // cjs added here
        resolverMainFields: ['sbmodern', 'browser', 'main'],
        blacklistRE: exclusionList([/\.\/dist\/.*/]),
      },
    },
    {
      // Change this to true to see debugging info.
      // Useful if you have issues resolving modules
      debug: false,
      // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx'
      extensions: [],
    }
  );
})();