react-native - 但是,这个包本身指定了一个无法解析的“主”模块字段
问题描述
我是 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 ,清除缓存并再次安装,但没有出现相同的错误
解决方案
经过长时间的研究,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
},
};
推荐阅读
- cakephp - 如何在 Cakephp3 的 bootstrp.php 文件中读取会话变量
- android - 如何在 Android 中从一个片段转移到另一个片段
- php - 获取php中关联数组的最大值
- babeljs - 为什么 .eslintrc 可能看不到 .babelrc.js 的别名?
- csv - 根据我设置的标准读取 CVS 文件和标题值
- css - 第一个拨动开关未显示
- java - Android FFMpeg Rendom 文件输入命令创建视频幻灯片
- reactjs - mocha-webpack 编译时无法读取未定义的属性“babel”
- actions-on-google - 如何限制智能家居应用的区域?
- video - 如何在不重新启动视频的情况下在播放视频期间更改视频的 fps