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

Question

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

我的 repo 的基本结构是：

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

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

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

有什么想法吗？

Answer 1

我们可以通过将项目 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
};

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

React-native, monorepo: Unable to resolve module @babel/runtime/helpers/interopRequireDefault

reactjs

react-native

monorepo

yarnpkg