本地创建React项目启动时出现webpack-dev-server模块找不到错误

问题背景 #

本地新建React项目执行npm start或yarn start启动时，持续触发Module not found错误，报错指向webpack-dev-server/client/index.js文件，但克隆GitHub上的同配置项目则无此问题。已尝试重装Node.js/npm/Yarn、清理node_modules与锁文件、验证项目结构、升级npm等操作，问题仍未解决。

具体报错信息 #

Failed to compile.

Module not found: Error: Can't resolve 'E:\REACT PROJECT\clone\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=none&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true' in 'E:\REACT PROJECT\clone'
ERROR in Module not found: Error: Can't resolve 'E:\REACT PROJECT\clone\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=none&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true' in 'E:\REACT PROJECT\clone'

webpack compiled with 1 error

项目package.json配置 #

{
  "name": "linkedin-clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.7",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.3",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "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-dev-server #

react-scripts 5.0.1依赖的webpack-dev-server版本可能存在安装不完整或兼容性问题，手动指定适配版本安装：

# 使用npm
npm install webpack-dev-server@4.15.1 --save-dev

# 使用yarn
yarn add webpack-dev-server@4.15.1 --dev

安装完成后重新执行npm start或yarn start。

2. 移除项目路径中的特殊字符 #

你的项目路径包含空格（E:\REACT PROJECT\clone），webpack在解析带空格的路径时容易出现错误。将路径修改为无空格格式（比如E:\REACT_PROJECT\clone），之后重新清理依赖并安装：

# npm用户
rm -rf node_modules package-lock.json
npm install
npm start

# yarn用户
rm -rf node_modules yarn.lock
yarn install
yarn start

3. 清理包管理器缓存并重新安装依赖 #

包管理器缓存可能残留损坏文件，执行以下步骤重置依赖：

# npm用户
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
npm start

# yarn用户
yarn cache clean
rm -rf node_modules yarn.lock
yarn install
yarn start

4. 新建项目时清除npx缓存 #

若后续新建项目仍出现该问题，先清理npx缓存再创建项目：

npx clear-npx-cache
npx create-react-app my-app # 使用默认模板
# 或使用TypeScript模板
npx create-react-app my-app --template typescript

内容的提问来源于stack exchange，提问作者Ravinder Kaur