React Native - 无法从@react-navigation解析模块。这些文件都不存在：node_modules/nanoid/non-secure/index.cjs

Question

我有一个React Native应用程序，在Android和iOS应用程序上构建失败，（在物理设备上的XCode、Android Studio）。我没有更改package.json中的任何内容。

错误是由@react-navigation node_module中的文件（useReigsterNavigator.js）引起的：

"use strict";

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

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

这是在iOS模拟器中出现的错误信息：

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

为什么会出现这个错误？ node_modules 中存在 nanoid 和 react-navigation 文件夹。

nanoid 文件夹在 node_modules 内的截图

react-navigation 文件夹在 node_modules 内的截图

我尝试了几个方法但都没有成功：

• 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;

- mtracht

---

我看到很多人报告使用React Native时出现类似的问题，然后重启电脑就解决了。试试重新启动吧！ - Glen Thomas

@GlenThomas 尝试了几种变化，但都没有成功（基本的重新启动计算机；完全关闭计算机；退出 VSCode、XCode、Android Studio）。 - mtracht

Answer 1

在使用@react-navigation和nx单体库时，我遇到了这个问题，并通过将cjs扩展名添加到metro.config.js中的resolver.sourceExts属性中来解决问题。这使得metro能够读取commonjs的nanoid/non-secure/index.cjs文件。

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: [],
    }
  );
})();

- Harry Singh