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.

控制台中的错误消息指向我的反应组件的第一行：

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
};