找不到模块：错误：您尝试导入位于项目 src/ 目录之外的 babel-preset

Question

我正在开发一个使用 create-react-app 创建的应用程序

但是后来我需要使用 mediainfojs 库，这个库需要 wasm 文件，根据我的理解，我无法使用 create-react-app 添加它，我不得不弹出它。

弹出后，我去mediainfo信息了解如何在webpack上添加wasm

他们使用

CopyPlugin

，但是当我尝试这样做时，它抱怨我的 webpack (4) 和 CopyPlugin 的版本......所以，我决定迁移到 webpack 5

那就是痛苦开始的时候......遵循他们的迁移教程并对我的

webpack.config

进行大量修改后，我在运行时遇到以下错误

yarn build

：

找不到模块：错误：您尝试导入位于项目 src/ 目录之外的 /MyWorkspace/project/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator。不支持 src/ 之外的相对导入。

唯一调用这个的地方

babel-preset-react-app

在配置中

这里：

                {
                    test: /\.(js|mjs|jsx|ts|tsx)$/,
                    include: paths.appSrc,
                    loader: require.resolve("babel-loader"),
                    options: {
                        customize: require.resolve(
                            "babel-preset-react-app/webpack-overrides"
                        ),

这里：

                {
                    test: /\.(js|mjs)$/,
                    exclude: /@babel(?:\/|\\{1,2})runtime/,
                    loader: require.resolve("babel-loader"),
                    options: {
                        babelrc: false,
                        configFile: false,
                        compact: false,
                        presets: [
                            [
                                require.resolve("babel-preset-react-app/dependencies"),
                                { helpers: true },
                            ],
                        ],
                        cacheDirectory: true,
                        cacheCompression: isEnvProduction,

                        // If an error happens in a package, it's possible to be
                        // because it was compiled. Thus, we don't want the browser
                        // debugger to show the original code. Instead, the code
                        // being evaluated would be much more helpful.
                        sourceMaps: false,
                    },
                },

我研究了这里报告的类似问题，但其中大多数似乎与动态导入的静态文件或在项目目录之后引用“..”dir 的导入有关

完整的 webpack 配置文件位于 here

我可能错过了一些非常愚蠢的东西，如果有人能指出它，我会很高兴。

Answer 1

我遇到了类似的挑战，我可以通过在我的

webpack.config

文件顶部添加这些定义来解决这个问题

const babelRuntimeEntry = require.resolve('babel-preset-react-app');
const babelRuntimeEntryHelpers = require.resolve(
 '@babel/runtime/helpers/esm/assertThisInitialized',
  { paths: [babelRuntimeEntry] }
);
const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
  paths: [babelRuntimeEntry]
});

然后你在

ModuleScopePlugin

中有

resolve.plugins

更新为

new ModuleScopePlugin(paths.appSrc, [
      paths.appPackageJson,
      babelRuntimeEntry,
      babelRuntimeEntryHelpers,
      babelRuntimeRegenerator])

Answer 2

我还尝试将弹出的 CRA 项目升级到 Webpack 5。我能够使用 babel-preset-react-app-webpack-5 继续前进，却遇到了下一个与 CRA 相关的问题。

请务必将

require.resolve("babel-preset-react-app/dependencies")

等呼叫替换为

require.resolve("babel-preset-react-app-webpack-5/dependencies")

。

另外，请注意，该包似乎尚未准备好投入生产，但我自己的项目仍处于早期开发阶段。

Answer 3

在尝试将弹出的 CRA 应用程序升级到 webpack v5 后，我遇到了其他一些 babel 包的问题。我尝试了许多不同的方法，其中一些在开发中有效，但在生产中无效，反之亦然。我在故事书 github 中找到了这个评论，这是唯一对我来说在所有场景下都有效的东西。

这有点烦人，但只需将有问题的包从我的

devDependencies

中的

package.json

移动到

dependencies

，似乎就可以解决问题。我可以花更多时间尝试找出解决问题的原因，但我会将其留给有更多空闲时间的人。 :)

Answer 4

解决方案1： 您可以通过将每个错误路径放入

resolve.plugins

的

webpack.config.js

部分内的 ModuleScopePlugin 构造函数中来解决此问题，如下所示：

new ModuleScopePlugin(paths.appSrc, [
    '/MyWorkspace/project/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator'
]

注意：您必须输入错误消息中的确切路径（如果错误消息中没有，则不要尾随

.js

）。 这个解决方案的问题在于，您必须放置十几个这样的路径才能使您的构建成功......

解决方案2（更好？）： 转到您的

package.json

并在此处添加

"absoluteRuntime": false

：

"babel": {
    "presets": [
      [
        "react-app",
        {
          "absoluteRuntime": false
        }
      ]
    ]
  }

注意：双方括号不是错误。它不适用于单方括号。

警告：我不明白这个解决方案的后果；使用你自己的判断。看起来 false 是

@babel/preset-react

中的默认值（参见此处），所以我不确定为什么必须将

babel-preset-react-app

显式设置为 false（这是

@babel/preset-react

的外观，如果我没看错吧？）。