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，应该会起作用。