但是，这个包本身指定了一个无法解析的“主”模块字段

Question

我是 react-native 的新手，但不是 ReactJs 我会从 2 天开始为这个错误而生气

error: bundling failed: Error: While trying to resolve module `@react-navigation/native` from file `C:\XXXXX\Example\src\Router.jsx`, the package `C:\XXXXX\Example\node_modules\@react-navigation\native\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\@react-navigation\native\src\index.tsx`. Indeed, none of these files exist:

error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\App.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:

这是我的 package.json

{
  "name": "Example",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.6",
    "@react-navigation/native": "^5.0.0",
    "@react-navigation/stack": "^5.0.0",
    "eslint": "^6.8.0",
    "jetifier": "^1.6.5",
    "native-base": "^2.13.8",
    "prop-types": "^15.7.2",
    "react": "16.8.6",
    "react-native": "0.60.0",
    "react-native-camera": "^3.16.0",
    "react-native-gesture-handler": "^1.5.6",
    "react-native-image-crop-picker": "^0.28.0",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.7.2",
    "react-native-safe-area-view": "^1.0.0",
    "react-native-screens": "^2.0.0-beta.2",
    "react-native-svg": "^11.0.1",
    "react-native-vector-icons": "^6.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.3.3",
    "@babel/runtime": "^7.3.1",
    "@react-native-community/eslint-config": "^0.0.3",
    "babel-jest": "^24.1.0",
    "jest": "^24.1.0",
    "metro-react-native-babel-preset": "^0.54.1",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

我将 react-navigation 版本降级为 react-navigation 4 和 react-navigation-stack 错误变成了

error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\node_modules\react-navigation-stack\lib\module\vendor\views\Stack\StackView.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:

我也删除了node_modules，清除缓存并再次安装，但没有出现相同的错误

Answer 1

经过长期研究，MetroJS bundler 默认不编译 typescript .ts 和 .tsx 扩展文件。 我们需要告诉 MetroJS bundler 编译 .ts 和 .tsx 文件 我通过在根项目文件夹中编辑 metro.config.js 文件解决了这个错误。

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx'], //add here
  },
};

Answer 2

以上答案对我不起作用。事实证明我的文件没有任何问题。

我只需要终止在终端上运行的 react-native metro 并重新启动它，它工作正常。

Answer 3

对我来说，我使用两个终端来运行我的应用程序。第一个终端：react-native start，第二个：react-native run android，它构建应用程序并在我的物理设备上启动它。当我安装一个新软件包并重建我的应用程序时，我遇到了同样的错误，但我不知道我必须重新启动 react-native 服务器。

所以我刚才所做的是回到第一个终端，将其杀死，然后重新运行react-native start，然后在第二个终端中重建我的应用程序，一切都按预期工作！！！

Answer 4

这是我的 metro.config.js 配置后的样子。我正在使用 react-navigato 5*

    module.exports = {
        transformer: {
          getTransformOptions: async () => ({
             transform: {
                experimentalImportSupport: false,
                inlineRequires: false,
             },
           }),
         },
          /** include this below (remove this comment too)*/
       resolver: {                              
         sourceExts: ['jsx', 'js', 'ts', 'tsx'],
       },
   };

Answer 5

我在 react-native-gesture-handler 包中遇到了同样的错误。更改 metro.config.js 文件对我有用。

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },

  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx'], 
  },
};

Answer 6

这对我有用。

 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  
  resolver: {
    sourceExts: ['jsx','js','ts','tsx'] //add here 
   },
};

Answer 7

正如他们中的许多人已经提到的那样来自定义您的 metro.config.js 文件。如果不存在，请在项目的根目录中创建它，然后按照大家所说的添加代码。现在，即使在 metro.config.js 文件中添加了代码错误仍然存​​在，那么您必须停止您的 expo 服务器并使用命令重新启动

expo start -c

这对我有用。希望对你也有帮助。

Answer 8

添加到 Jogi 的 accepted answer，此问题已由 Apollo 开发人员在 https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#apollo-client-354-2021-11-19 确认

我无法单独使用 Jogi 的回答解决问题，但在将 'cjs' 添加到数组后，按照链接更改日志中的建议，我的应用能够按预期启动。

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs'],
  },
};

Answer 9

有时，您会收到此错误，因为您安装了一个 npm 包，该包的主脚本未与您的项目正确集成。这可能是因为您以不同的方式命名文件，将文件嵌套更深一层并导致脚本中断等。 检查包的 package.json 文件，错误消息告诉你“main”不正确，看看它是否正确指向根目录的 package.json 中的应用程序条目。 这样做为我修复了错误。

Answer 10

在我的情况下，错误是由于缓存造成的。我按照以下步骤操作：

导航到安卓文件夹

cd android

之后清理构建文件夹

 ./gradlew clean

并生成apk文件

./gradlew assembleRelease -x bundleReleaseJsAndAssets

使用它来生成 aab

./gradlew bundleRelease -x bundleReleaseJsAndAssets

我希望这些命令也能对其他人有所帮助。