Ceate React App 中的 Webpack 5 无法解析未完全指定的路由

Question

我们正在开发一个 React 库，最近注意到，当我们想要使用新的（webpack 5）Create React 应用程序使用它时，它会抛出错误。 它抱怨这一点：

“重大更改：请求无法解析只是因为它已按照完全指定的方式解析（可能是因为起源是严格的 EcmaScript 模块，例如具有 javascript mimetype 的模块、“.mjs”文件或“.js”文件，其中package.json 包含 '"type": "module"')。"

我设法通过添加来解决这个问题

{
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
}

虽然这对于任何有权访问 webpack 配置的应用程序都适用，但我们希望使我们的库“即插即用”，无需任何弹出或额外设置。 我们应该有什么配置才能使消费者的 webpack 解析我们未完全指定的路由？ github上的代码

Answer 1

我解决了这个问题，没有弹出或修改节点模块中的文件。首先，添加 craco 来覆盖 webpack 配置：

yarn add -D @craco/craco

。接下来，在项目的根目录（

package.json

所在的位置）创建一个名为

craco.config.js

的文件，其中包含以下内容：

module.exports = {
    webpack: {
        configure: {
            module: {
                rules: [
                    {
                        test: /\.m?js$/,
                        resolve: {
                            fullySpecified: false,
                        },
                    },
                ],
            },
        },
    },
};

此配置禁用导致此错误的重大更改。然后更改

package.json

中的启动/构建/测试命令，将

react-scripts

替换为

craco

:

"scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",

现在按照平常的操作

yarn start

应该可以了。