React-native，monorepo:无法解析模块@babel/运行时/helpers/interopRequireDefault
React-native，monorepo:无法解析模块@babel/运行时/helpers/interopRequireDefault
提问于 2021-09-20 15:54:24
我在monorepo中设置了一个原生的react应用程序作为工作空间。我这样做是因为我想在我的移动和web应用程序之间共享我创建的一些react组件。
我的回购的基本结构是：
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模块从模块目录导入到我的移动应用程序中。
但是当我尝试导入我的一个react组件时，我得到了这个错误：
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.控制台中的错误消息指向react组件的第一行：
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是一个特意简单的react组件：
import React from 'react';
const DumbModule = () => {
return (
<div>I am useless.</div>
);
};
export default DumbModule;我将它添加到App.js中，如下所示：
import DumbModule from '@mymodules/dumb-module';我的react原生应用程序中的依赖项是：
"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，应用程序运行正常。如果我启用它，我会收到上面的消息，指向我的组件的第一行。
我已经看过了我能找到的每一个建议。不走运。
有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-28 01:09:08
我们可以通过将项目的node_modules目录的路径添加到metro.config.js中的nodeModulesPaths数组来解决此问题。看起来，当metro解析外部模块(哑模块)的依赖关系时，它不会自动知道要查看项目自己的node_modules，所以它找不到react。
当然，如果错误消息不是指不相关的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
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69257460
复制相关文章
相似问题
腾讯云开发者
