React-native，monorepo：无法解析模块@babel/runtime/helpers/interopRequireDefault

Question

我已经在 monorepo 中设置了一个反应本机应用程序作为工作区。我这样做是因为我想分享我在移动和网络应用程序之间创建的一些反应组件。

我的仓库的基本结构是：

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.

控制台中的错误消息指向我的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

是一个故意简单的反应组件：

import React from 'react';

const DumbModule = () => {
    return (
        <div>I am useless.</div>
    );
};

export default DumbModule;

我将其添加到 App.js 中，如下所示：

import DumbModule from '@mymodules/dumb-module';

我的反应本机应用程序中的依赖项是：

  "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 的导入，应用程序运行正常。如果启用它，我会收到指向组件第一行的上述消息。

我已经仔细阅读了我能找到的所有建议。没有运气。

有什么想法吗？

Answer 1

我们可以通过将项目的

node_modules

目录的路径添加到

nodeModulesPaths

中的

metro.config.js

数组来解决此问题。看起来，当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
};

Answer 2

使用react-native 0.73，我必须通过将

metro.confi.js

添加到

../..

来更新

config.watchFolders

代码：

const path = require('path');
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const config = {
  watchFolders: [path.resolve(__dirname, '../../')],
};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);