描述Bug
React dev服务器未始终显示webpack配置错误。
cra的默认webpack配置不会导致任何问题。
您可以通过react-app-rewired等工具自定义您的webpack配置来重现此问题。
该问题100%可重现。
是否尝试恢复依赖项?
它发生在最新版本中。
您在《用户指南》中搜索了哪些术语?
这是一个没有显示错误信息的问题,所以我认为它与用户指南无关。
我搜索的词是:
- 仅显示“正在启动开发服务器...”而不执行
- 执行npm启动时挂起编译
环境
create-react-app的当前版本:5.0.0
从/用户/peter.lee/.npm/_npx/c67 e74 de 0542 c87 c/节点模块/创建React应用程序运行
系统:
操作系统:MacOS 12.0.1
CPU:(10)苹果M1 Pro arm 64
二进制文件:
节点:16.14.0 - ~/.nvm/版本/节点/v16.14.0/bin/节点
Yarn:1.22.17/可选/自制/箱装/纱装
npm:8.3.1 - ~/.nvm/版本/节点/v16.14.0/bin/npm
浏览器:
铬:98.0.4758.102
边:未找到
Firefox:未找到
Safari浏览器:15.1
npm程序包:
React:^17.0.2 =〉17.0.2
React域:^17.0.2 =〉17.0.2
React脚本:^5.0.0 =〉5.0.0
npm全局程序包:
创建React应用程序:未找到
重现步骤
1.创建基本CRA项目
- x1m0n1x
- 自定义Webpack配置以构建多个条目和html
- 安装其他软件包
- React应用程序重新连接@2.2.1
- 自定义cra@1.0.0
- 创建单独的条目js和html文件
- 配置config-overrides.js(根路径)
const path = require("path");
const { override } = require("customize-cra");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const isEnvProduction = process.env.NODE_ENV === "production";
module.exports = {
webpack: override(function (config) {
config.entry = {
main: path.resolve(__dirname, "src/index.js"),
second: path.resolve(__dirname, "src/second.js"),
};
const htmlWebpackPlugin = config.plugins.find(
(element) => element.constructor.name === "HtmlWebpackPlugin"
);
htmlWebpackPlugin.userOptions.chunks = ["main"];
config.plugins.push(
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "public/second.html"),
filename: "second.html",
chunks: ["second"],
minify: isEnvProduction,
})
);
return config;
}),
};
- 修改packages.json中的npm脚本
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
$ npm run start
个
预期行为
如果运行不正常,控制台上应显示错误。
实际行为
不发生错误,仅显示以下消息,并且无法正常运行
可重现的演示
通过上述的再现步骤,可以容易地再现它。
其他说明(重要)
不运行是正常的。(我写错了代码。)
但是,问题是没有关于为什么没有执行它的提示(错误消息)。
我用下面的方法调试了react-scripts,并找到了项目无法运行的原因。
原因是webpack config.output.filename属性在开发模式下不是多个条目的配置值。
通过另外执行以下步骤来执行调试。
1.在node_modules/react-dev-utils/WebpackDevServerUtils.js
的createCompiler
函数内设置webpack编译器的failed挂钩,以便在编译失败时显示错误消息。
compiler.hooks.failed.tap('failed', async stats => {
console.log(chalk.red('Failed to compile.\n'));
console.log(stats)
});
$ npm run start
1.检查错误消息
1.修改多个块的webpack配置的输出文件名(config-overrides.js)
const path = require("path");
const { override } = require("customize-cra");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const isEnvProduction = process.env.NODE_ENV === "production";
module.exports = {
webpack: override(function (config) {
config.entry = {
main: path.resolve(__dirname, "src/index.js"),
second: path.resolve(__dirname, "src/second.js"),
};
const htmlWebpackPlugin = config.plugins.find(
(element) => element.constructor.name === "HtmlWebpackPlugin"
);
htmlWebpackPlugin.userOptions.chunks = ["main"];
// !!! Update !!!
if (!isEnvProduction) {
config.output.filename = "static/js/[name].bundle.js";
}
config.plugins.push(
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "public/second.html"),
filename: "second.html",
chunks: ["second"],
minify: isEnvProduction,
})
);
return config;
}),
};
$ npm run start
1.检查控制台中的输出
1条答案
按热度按时间kmb7vmvb1#
几个月来,我一直在为同样的问题而苦恼。以前,它只是通过简单地禁用开发环境中的linting来解决,然而,在升级到
react-scripts 5.0.1
后,这个问题又出现了,禁用linting并没有解决。有了这些建议,我也可以找到错误并开始修复它。