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

问题描述

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

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

弹出后，我去how to add the wasm on the webpack上的mediainfo信息

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

那是痛苦开始的时候......在遵循他们的 migration tutorial 并对我的 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/,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,},

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

完整的 webpack 配置文件是 here

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

解决方法

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

务必将 /ItemsByLocation 之类的调用替换为 require.resolve("babel-preset-react-app/dependencies")。

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