from本机-无法从@ React导航解析模块。这些文件都不存在:节点_模块/nanoid/非安全/index.cjs

Question

我有一个，它不能同时构建安卓和iOS应用程序(XCode，Android，物理设备)。在package.json内部，我没有改变任何东西。

该错误是由@react-node_module中的一个文件(Node_module)引起的：

"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中。

模块

模块

我尝试过一些不起作用的东西：

• 在metro.config.js文件中添加了一个解析器，查找“cjs”源扩展名： resolver：{ sourceExts：...sourceExts，'cjs'，}
• 已经检查了github问题的以下回复:奈米，facebook地铁，反应导航，看有没有报告的问题。
• 删除Pods文件夹和Podfile.lock，然后使用命令pod install重新安装豆荚。
• 使用命令pod cache clean --all清理荚缓存
• 重置React本机包缓存npx react-native start --reset-cache
• 已删除的CocoaPods、Pods、XCode DerivedData，并执行了pod的重新整合，然后重新启动了所有安装了pod和pod安装的内容：rm -rf ~/Library/Caches/CocoaPods; rm -rf Podsl; rm -rf ~/Library/Developer/Xcode/DerivedData/*; pod deintegrate; pod setup; pod install;

Answer 1

我在使用带有@react-navigation的nx monorepo并通过向metro.config.js的resolver.sourceExts属性添加cjs扩展来解决这个问题时遇到了这个问题。这使metro能够读取公共的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: [],
    }
  );
})();