Webpack 5 devtool配置不符合API Schema错误求助

执行npm audit修复后，运行webpack -d --watch出现Invalid API SCHEMA错误，已从React 16升级到React 18，同时存在ESLint相关问题。Webpack版本为5。

错误信息 #

无效的配置对象。Webpack使用了不符合API Schema的配置对象进行初始化。

• configuration.devtool应匹配模式"^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$"。
  自webpack 5起的重大变更：devtool选项更为严格。
  请严格遵循模式中关键词的顺序。

Webpack配置文件 #

var path = require('path');
var SRC_DIR = path.join(__dirname, '/client/src');
var DIST_DIR = path.join(__dirname, '/public');

module.exports = {
  entry: `${SRC_DIR}/index.jsx`,
  output: {
    filename: 'bundle.js',
    path: DIST_DIR
  },
  mode: "development",
  devtool: "inline-source-map",
  resolve: {
    // ... rest of the resolve config
    fallback: {
      "path": require.resolve("path-browserify")
    }
  },
  module : {
    rules : [
      {
        test : /\.jsx?/,
        include : SRC_DIR,
        loader : 'babel-loader',
        options: {
          presets: ['@babel/env', '@babel/react']
        }
      }
    ]

  },
  stats: 'verbose'
};

package.json #

{
  "homepage": "http://mobin0.github.io/mobin0",
  "name": "Mobin",
  "version": "1.0.0",
  "description": "Website",
  "author": "Mobin Skaria",
  "license": "ISC",
  "engines": {
    "node": ">=6.13.0"
  },
  "scripts": {
    "react-dev": "webpack -d --watch",
    "server-dev": "nodemon server/index.js",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "seed": "node db/createDB.js",
    "test:client": "jest --watchAll --expand --verbose",
    "test:coverage": "jest --verbose --coverage",
    "build": "react-app-rewired build"
  },
  "jest": {
    "roots": [
      "./client/src/tests"
    ],
    "verbose": true,
    "globals": {
      "NODE_ENV": "test"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^29.2.2",
    "babel-loader": "^8.0.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "gh-pages": "^4.0.0",
    "html-webpack-plugin": "^5.5.0",
    "jest": "^29.2.2",
    "jest-cli": "*",
    "jest-dom": "^2.1.0",
    "path-browserify": "^1.0.1",
    "react-app-rewired": "^2.2.1",
    "regenerator-runtime": "^0.12.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "dependencies": {
    "axios": "^1.1.3",
    "body-parser": "^1.17.0",
    "enzyme": "^3.3.0",
    "eslint": "^5.8.0",
    "eslint-config-hackreactor": "git://github.com/reactorcore/eslint-config-hackreactor.git",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "express": "^4.15.0",
    "faker": "^4.1.0",
    "file-system": "^1.2.2",
    "jquery": "^3.1.1",
    "mongoose": "^6.7.1",
    "ramda": "^0.25.0",
    "react": "latest",
    "react-bootstrap": "^0.32.4",
    "react-dom": "latest",
    "react-test-renderer": "^16.6.1",
    "react-testing-library": "^5.2.3",
    "request": "^2.81.0",
    "semantic-ui-react": "^0.83.0",
    "sinon": "^6.1.3"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

解决方案 #

1. 修复Webpack devtool配置冲突 #

Webpack 5的-d参数会自动设置devtool为eval-cheap-module-source-map，和你配置文件里手动指定的inline-source-map冲突，导致Schema校验失败。

解决方法二选一：

• 移除命令行的-d参数，修改package.json中的脚本：

  "react-dev": "webpack --watch"
  

  配置文件已设置mode: "development"，无需重复通过-d开启开发模式。
• 删除配置文件里的devtool字段，让-d参数自动配置devtool。

2. React 18适配调整 #

当前依赖和初始化代码未同步适配React 18，需做以下更新：

• 升级@babel/preset-react到最新版本，支持React 18的JSX转换：

  npm install @babel/preset-react@latest --save-dev
  

• 修改入口文件index.jsx的渲染逻辑，React 18不再使用ReactDOM.render：

  import React from 'react';
  import { createRoot } from 'react-dom/client';
  import App from './App';
  
  const container = document.getElementById('root');
  const root = createRoot(container);
  root.render(<App />);
  

• 替换测试适配器：enzyme-adapter-react-16不支持React 18，可卸载后安装适配React 18的版本（如@wojtekmaj/enzyme-adapter-react-18），或直接使用已安装的react-testing-library进行测试（对React 18支持更完善）。
• 升级UI组件库：react-bootstrap@0.32.4、semantic-ui-react@0.83.0版本过旧，需升级到支持React 18的版本：

  npm install react-bootstrap@latest semantic-ui-react@latest
  

3. ESLint版本兼容修复 #

当前ESLint及插件版本过旧，与React 18语法不兼容：

• 升级ESLint及相关插件到最新兼容版本：

  npm install eslint@latest eslint-plugin-react@latest eslint-plugin-import@latest eslint-plugin-jsx-a11y@latest --save-dev
  

• 若eslint-config-hackreactor不兼容新版本ESLint，可替换为eslint-config-airbnb等通用配置，或自定义规则适配React 18语法。

内容的提问来源于stack exchange，提问作者Mobin Skaria