2

我正在开发一个使用 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,
                    },
                },

我已经查看了此处报告的类似问题，但其中大多数似乎与动态导入的静态文件或在项目目录后引用“..”目录的导入有关

完整的 webpack 配置文件在这里

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

4

2 回答 2

1

我还尝试将弹出的 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").

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

于 2021-05-04T10:48:33.007 回答
0

我遇到了类似的挑战，我可以通过在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])
于 2022-02-04T10:29:39.070 回答