然而，该软件包本身指定了一个无法解析的`main`模块字段。

9 浏览
0 Comments

然而，该软件包本身指定了一个无法解析的`main`模块字段。

我对react-native还不熟悉，但对ReactJs很了解。我已经因为这个错误烦恼了两天。\n错误信息如下：\n

错误：打包失败：错误：在尝试从文件`C:\XXXXX\Example\src\Router.jsx`解析模块`@react-navigation/native`时，成功找到了包`C:\XXXXX\Example\node_modules\@react-navigation\native\package.json`。然而，该包本身指定了一个无法解析的`main`模块字段（`C:\XXXXX\Example\node_modules\@react-navigation\native\src\index.tsx`）。事实上，这些文件都不存在：
错误：打包失败：错误：在尝试从文件`C:\XXXXX\Example\App.js`解析模块`react-native-safe-area-context`时，成功找到了包`C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json`。然而，该包本身指定了一个无法解析的`main`模块字段（`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`）。事实上，这些文件都不存在：

\n这是我的package.json文件：\n{\n \"name\": \"Example\",\n \"version\": \"0.0.1\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"react-native start\",\n \"test\": \"jest\"\n },\n \"dependencies\": {\n \"@react-native-community/masked-view\": \"^0.1.6\",\n \"@react-navigation/native\": \"^5.0.0\",\n \"@react-navigation/stack\": \"^5.0.0\",\n \"eslint\": \"^6.8.0\",\n \"jetifier\": \"^1.6.5\",\n \"native-base\": \"^2.13.8\",\n \"prop-types\": \"^15.7.2\",\n \"react\": \"16.8.6\",\n \"react-native\": \"0.60.0\",\n \"react-native-camera\": \"^3.16.0\",\n \"react-native-gesture-handler\": \"^1.5.6\",\n \"react-native-image-crop-picker\": \"^0.28.0\",\n \"react-native-reanimated\": \"^1.7.0\",\n \"react-native-safe-area-context\": \"^0.7.2\",\n \"react-native-safe-area-view\": \"^1.0.0\",\n \"react-native-screens\": \"^2.0.0-beta.2\",\n \"react-native-svg\": \"^11.0.1\",\n \"react-native-vector-icons\": \"^6.6.0\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.3.3\",\n \"@babel/runtime\": \"^7.3.1\",\n \"@react-native-community/eslint-config\": \"^0.0.3\",\n \"babel-jest\": \"^24.1.0\",\n \"jest\": \"^24.1.0\",\n \"metro-react-native-babel-preset\": \"^0.54.1\",\n \"react-test-renderer\": \"16.8.6\"\n },\n \"jest\": {\n \"preset\": \"react-native\"\n }\n}\n\n我将react-navigation版本降级到了react-navigation 4和react-navigation-stack，但错误变成了：\n

错误：打包失败：错误：在尝试从文件`C:\XXXXX\Example\node_modules\react-navigation-stack\lib\module\vendor\views\Stack\StackView.js`解析模块`react-native-safe-area-context`时，成功找到了包`C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json`。然而，该包本身指定了一个无法解析的`main`模块字段（`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`）。事实上，这些文件都不存在：

\n我已经删除了node_modules，清除了缓存并重新安装，但是没有用，仍然出现相同的错误。

0

3 答案

0 Comments

在阅读Jogi的回答后，我发现这个问题在Apollo开发人员的GitHub页面上得到了确认。在链接的changelog中（https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#apollo-client-354-2021-11-19），推荐将'cjs'添加到数组中以解决这个问题。

然而，仅仅按照Jogi的回答我无法解决这个问题，但在链接的changelog中推荐的方法是将'cjs'添加到数组中，这样我的应用程序就能正常启动了。

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

以上是我的解决方案。

0
0 Comments

然而，这个包本身指定了一个无法解析的`main`模块字段的问题的出现原因是因为react-native metro进程没有正确终止导致的。解决方法是在终端中终止react-native metro进程，然后重新启动它即可解决。

此外，如果上述方法仍然不起作用，可以尝试在模拟器中卸载应用程序，然后重新运行，这样也可以解决问题。

0
0 Comments

问题的原因是MetroJS打包工具默认不编译.ts和.tsx文件。需要告诉MetroJS打包工具编译.ts和.tsx文件。解决方法是通过编辑根项目文件夹中的metro.config.js文件来解决这个错误。在metro.config.js文件中添加以下代码：

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'] //添加ts和tsx扩展名
  },
};

在React Native项目中，metro.config.js文件位于根文件夹中。如果找不到该文件，需要创建一个新的metro.config.js文件，并将上述代码添加到该文件中。另外，如果使用最新版本的Firebase，还需要将'cjs'添加到sourceExts数组中。在React Native 0.70版本中，如果不加入'json'扩展名，可能会导致无法解析app.json文件。

要解决这个问题，需要编辑metro.config.js文件，在resolver的sourceExts中添加需要编译的文件扩展名，并确保metro.config.js文件位于根文件夹中。

0