reactjs - React-native,monorepo:无法解析模块@babel/runtime/helpers/interopRequireDefault
问题描述
我已经在 monorepo 中设置了一个 react-native 应用程序作为工作区。我这样做是因为我想分享一些我在移动和 Web 应用程序之间创建的反应组件。
我的回购的基本结构是:
root/
package.json (with nohoist: ["**/expoapp/**"])
modules/
...shared modules, some simple JS, some react
apps/
web/ (cra-based web app)
mobile/
package.json
metro.config.js (addes watchFolders and extraNodeModules)
App.js
我可以将简单的 JS 模块从模块目录导入到我的移动应用程序中。
但是当我尝试导入我的一个反应组件时,我收到了这个错误:
Unable to resolve module @babel/runtime/helpers/interopRequireDefault from /Users/jim/development/.../modules/dumb-module/index.js: @babel/runtime/helpers/interopRequireDefault could not be found within the project.
控制台中的错误消息指向我的反应组件的第一行:
iOS Bundling failed 3378ms
Unable to resolve module @babel/runtime/helpers/interopRequireDefault from /Users/jim/development/.../modules/dumb-module/index.js: @babel/runtime/helpers/interopRequireDefault could not be found within the project.
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
> 1 | import React from 'react';
2 |
3 | const DumbModule = () => {
4 | return (
DumbModule
是一个故意简单的反应组件:
import React from 'react';
const DumbModule = () => {
return (
<div>I am useless.</div>
);
};
export default DumbModule;
我将它添加到 App.js 中,如下所示:
import DumbModule from '@mymodules/dumb-module';
我的 react-native 应用程序中的依赖项是:
"devDependencies": {
"@babel/runtime": "^7.15.4",
"@react-navigation/native": "^6.0.2",
"@react-navigation/native-stack": "^6.2.0",
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.7.2",
"@babel/core": "^7.12.9",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.0",
"react-native-codegen": "^0.0.7",
"react-test-renderer": "17.0.2"
},
如果我禁用导入 App.js,则该应用程序运行良好。如果启用它,我会收到指向组件第一行的上述消息。
我已经通过了我能找到的每一个建议。没运气。
有任何想法吗?
解决方案
我们可以通过将项目node_modules
目录的路径添加nodeModulesPaths
到metro.config.js
. 看来,当 Metro 正在解决外部模块(哑模块)的依赖关系时,它不会自动知道要查看项目自己的node_modules
,所以它找不到反应。
当然,如果错误消息没有引用不相关的 babel 文件,那将会很有帮助。
这是我的更新metro.config.js
:
const path = require('path');
const extraNodeModules = {
'modules': path.resolve(path.join(__dirname, '../../modules'))
};
const watchFolders = [
path.resolve(path.join(__dirname, '../../modules'))
];
const nodeModulesPaths = [path.resolve(path.join(__dirname, './node_modules'))];
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: true,
inlineRequires: true,
},
}),
},
resolver: {
extraNodeModules,
nodeModulesPaths
},
watchFolders
};
推荐阅读
- javascript - 如何在 WebGL 中为点设置不同的颜色和大小?
- python - 向现有 Excel 文件添加行
- android - 更改底栏选项卡时再次加载数据
- sql - 如何在 Toad for Oracle 中记录计划作业执行中的自定义错误
- pandas - 如何将 *multiple* 函数应用于 pandas groupby apply?
- java - 存储实时数据库快照的位置
- android - Android 权限错误(ls: /storage/emulated/: Permission denied)
- makefile - 关于makefile中包含指令的问题
- pandas - 在不规则时间进行测量时,如何插入时间序列
- c - 使用 DFS 通过 AST 递归