但是，这个包本身指定了一个无法解析的“主”模块字段
Posted
技术标签:
【中文标题】但是，这个包本身指定了一个无法解析的“主”模块字段【英文标题】：However, this package itself specifies a `main` module field that could not be resolved 【发布时间】：2020-05-24 05:43:46 【问题描述】：我是 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，清除缓存并再次安装，但没有出现相同的错误
【问题讨论】：
上面给出的答案对我不起作用。我不得不clear the cache of my React Native Project 【参考方案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
,
;【讨论】：
在我的 react-native 项目中哪里可以找到metro.config.js 文件？
这在你的根文件中。
metro.config.js 文件位于根文件夹
node_modules/metro/src/integration_tests/metro.config.js
这也解决了我对cjs 文件扩展名的问题。谢谢，很有帮助。【参考方案2】：
以上答案对我不起作用。事实证明我的文件没有任何问题。
我只需要终止在终端上运行的 react-native metro 并重新启动它，它工作正常。
【讨论】：
我可以证明这个解决方案在 2021 年 9 月 28 日有效。 如果还是不行。在模拟器中卸载应用程序并再次运行它会工作。 这对我有用，而不是接受的答案。 重启地铁也对我有用。【参考方案3】：对我来说，我使用两个终端来运行我的应用程序。第一个终端：react-native start，第二个：react-native run android，它构建应用程序并在我的物理设备上启动它。当我安装一个新软件包并重建我的应用程序时，我遇到了同样的错误，但我不知道我必须重新启动 react-native 服务器。
所以我刚才所做的是回到第一个终端，将其杀死，然后重新运行react-native start，然后在第二个终端中重建我的应用程序，一切都按预期工作！！！
【讨论】：
【参考方案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'],
,
;
【讨论】：
【参考方案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'],
,
;【讨论】：
【参考方案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
,
;
【讨论】：
【参考方案7】：正如他们中的许多人已经提到的那样来自定义您的 metro.config.js 文件。如果不存在，请在项目的根目录中创建它，然后按照大家所说的添加代码。现在，即使在 metro.config.js 文件中添加了代码错误仍然存在，那么您必须停止您的 expo 服务器并使用命令重新启动
expo start -c
这对我有用。希望对你也有帮助。
【讨论】：
【参考方案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'],
,
;
【讨论】：
【参考方案9】：有时，您会收到此错误，因为您安装了一个 npm 包，该包的主脚本未与您的项目正确集成。这可能是因为您以不同的方式命名文件，将文件嵌套更深一层并导致脚本中断等。 检查包的 package.json 文件，错误消息告诉你“main”不正确，看看它是否正确指向根目录的 package.json 中的应用程序条目。 这样做为我修复了错误。
【讨论】：
请问这是什么意思？【参考方案10】：在我的情况下，错误是由于缓存造成的。我按照以下步骤操作：
导航到安卓文件夹
cd android
之后清理构建文件夹
./gradlew clean
并生成apk文件
./gradlew assembleRelease -x bundleReleaseJsAndAssets
使用它来生成 aab
./gradlew bundleRelease -x bundleReleaseJsAndAssets
我希望这些命令也能对其他人有所帮助。
【讨论】：
以上是关于但是，这个包本身指定了一个无法解析的“主”模块字段的主要内容，如果未能解决你的问题，请参考以下文章