启动React应用时出现“Cannot find module 'webpack/hot/log.js'”错误

对应解决步骤 #

1. 清理依赖缓存并重新安装 #

依赖损坏或版本不匹配是常见诱因，按以下操作修复：

• 删除本地依赖文件夹和锁文件：

  rm -rf node_modules package-lock.json yarn.lock
  

• 重新安装所有依赖：

  npm install
  

• 重新启动项目：

  npm start
  

2. 修复webpack与webpack-dev-server版本兼容性 #

报错来自webpack-dev-client模块，大概率是版本不匹配导致：

• 查看当前安装的版本：

  npm list webpack webpack-dev-server
  

• 按照对应关系调整版本：webpack 5对应webpack-dev-server 4.x，webpack 4对应webpack-dev-server 3.x。示例安装webpack-dev-server 4.x：

  npm install webpack-dev-server@4 --save-dev
  

3. 检查自定义webpack配置 #

若项目修改过webpack配置，确认热重载相关配置是否正确：

• 打开webpack.config.js，检查entry配置是否包含热重载入口：

  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ]
  

• 确认plugins中添加了热重载插件：

  const webpack = require('webpack');
  
  module.exports = {
    // ...其他配置
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ]
  };
  

4. 清除webpack缓存 #

webpack缓存的旧模块引用可能导致文件找不到：

• 启动项目时添加清除缓存参数：

  npm start -- --no-cache
  

• 或手动删除缓存目录：

  rm -rf node_modules/.cache/webpack
  

内容的提问来源于stack exchange，提问作者Mr. Developer