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

【问题标题】：React-native, monorepo: Unable to resolve module @babel/runtime/helpers/interopRequireDefaultReact-native，monorepo：无法解析模块@babel/runtime/helpers/interopRequireDefault
【发布时间】：2021-11-14 08:10:54
【问题描述】：

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

我已经通过了我能找到的每一个建议。没有运气。

有什么想法吗？

【问题讨论】：

标签： reactjs react-native yarnpkg monorepo

【解决方案1】：

我们能够通过将项目的node_modules 目录的路径添加到metro.config.js 中的nodeModulesPaths 数组来解决此问题。看起来，当 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
};

【讨论】：