运行React应用报错：无法找到模块'webpack/schemas/WebpackOptions.json'

这个报错大多是webpack与相关依赖版本不兼容或者配置文件不符合当前webpack版本规范导致的，结合你的配置，我整理了几个针对性的解决步骤：

1. 检查并统一webpack与webpack-dev-server版本 #

这是引发该错误最常见的原因：

• 先运行命令查看当前安装的依赖版本：

  npm list webpack webpack-dev-server
  

• 版本匹配建议：
  • webpack 4.x 搭配 webpack-dev-server@3.x
  • webpack 5.x 搭配 webpack-dev-server@4.x
    执行对应命令安装匹配版本：

  # webpack 4 + webpack-dev-server 3
  npm install webpack@4 webpack-dev-server@3 --save-dev
  
  # 或者 webpack 5 + webpack-dev-server 4
  npm install webpack@5 webpack-dev-server@4 --save-dev
  

注意：尽量只在项目局部安装webpack，避免全局安装引发版本冲突。

2. 更新webpack配置文件到对应版本规范 #

你的配置是webpack 1/2的旧写法，和新版本不兼容，需要调整：

• 把module.loaders改为module.rules（webpack 2+强制要求）
• output.path不能直接写'/'，要用path.resolve生成合法的绝对路径
• json-loader在webpack 2+已内置，无需单独配置
• babel的query字段要改为options，且preset名称已更新（原es2015替换为@babel/preset-env）

修改后的配置示例：

const path = require('path');

var config = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出到项目根目录下的dist文件夹
    filename: 'index.js',
  },
  devServer: {
    inline: true,
    port: 8080,
    static: path.resolve(__dirname, 'dist') // webpack-dev-server 4+需配置static指定静态文件目录
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
}

module.exports = config;

3. 更新babel相关依赖 #

原配置中的es2015和react preset已被弃用，需要安装新的@babel系列依赖：

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

4. 清理依赖并重新安装 #

缓存或损坏的依赖可能引发异常，执行以下步骤重置依赖：

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json（或yarn.lock）文件
• 运行npm install重新安装所有依赖

完成以上操作后，再尝试启动React应用，应该就能解决模块找不到的问题了。

内容的提问来源于stack exchange，提问作者Bharat Bittu