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

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

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

我只需终止在终端上运行的react-native Metro 并重新启动它，它工作得很好。

Answer 2

经过长时间的研究 MetroJS bundler 默认不编译打字稿 .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 3

除了Jogi接受的答案之外，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 4

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

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

Answer 5

我必须清除守望者才能解决类似的问题

watchman watch-del-all