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

41zrol4v  于 2023-01-17  发布在  Webpack
关注(0)|答案(1)|浏览(154)

我们正在开发一个react库,最近注意到,当我们想要使用新的(webpack 5)Create React应用程序时,它会抛出一个错误。
"突破性变化:请求解析失败,原因仅在于它被解析为完全指定的(可能是因为源是严格的EcmaScript模块,例如,具有javascript mimetype的模块、."mjs"文件或package.json包含"" type ""的."js"文件):"模块"")。"
我设法解决了这个问题,通过添加

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

虽然这对任何可以访问webpack配置的应用程序都很有效,但我们希望我们的库可以"即插即用",而不需要任何弹出或额外的设置。我们应该使用什么样的配置来使消费者的webpack解决我们没有完全指定的路由?Code on github
先谢了

gab6jxml

gab6jxml1#

我没有弹出或修改node_modules中的文件就解决了这个问题。首先,添加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中的start/build/test命令,将react-scripts替换为craco

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

现在执行通常的yarn start,它应该可以工作。

相关问题