运行React项目出现webpack-dev-server模块找不到错误求助

开发者阿泽

2026-8-14

React项目编译错误：无法解析webpack-dev-server/client/index.js

环境信息

npm 8.19.0
Node.js v16.13.1
React 18.2.0

背景

此前通过以下步骤创建的React项目可正常运行：

npx create-react-app "myappname"
cd "myappname"
npm start

今早学习React结合MS SignalR后，所有项目（包括新创建的）均出现编译错误：

Failed to compile.
Module not found: Error: Can't resolve 'C:\Users\abc\Documents\Study\c#\Project\LearningDotNetCore\POC\demo\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 'C:\Users\abc\Documents\Study\c#\Project\LearningDotNetCore\POC\demo'
ERROR in Module not found: Error: Can't resolve 'C:\Users\abc\Documents\Study\c#\Project\LearningDotNetCore\POC\demo\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 'C:\Users\abc\Documents\Study\c#\Project\LearningDotNetCore\POC\demo'
webpack compiled with 1 error

推测问题与MS SignalR相关，不愿重置系统，寻求解决方法。

相关文件内容

项目package.json

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "webpack-dev-server": "^4.11.1"
  },
  "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"
    ]
  }
}

webpack-dev-server/client/index.js内容

webpack-dev-server/client/index.js代码截图

webpack-dev-server的package.json

{
  "name": "webpack-dev-server",
  "version": "4.11.1",
  "description": "Serves a webpack app. Updates the browser on changes.",
  "bin": "bin/webpack-dev-server.js",
  "main": "lib/Server.js",
  "types": "types/lib/Server.d.ts",
  "author": "Tobias Koppers @sokra",
  "bugs": "https://github.com/webpack/webpack-dev-server/issues",
  "homepage": "https://github.com/webpack/webpack-dev-server#readme",
  "repository": "https://github.com/webpack/webpack-dev-server",
  "license": "MIT",
  "funding": {
    "type": "opencollective",
    "url": "https://opencollective.com/webpack"
  },
  "files": [
    "bin",
    "lib",
    "client",
    "types"
  ],
  "engines": {
    "node": ">= 12.13.0"
  },
  "scripts": {
    "fmt:check": "prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different",
    "lint:js": "eslint . --cache",
    "lint:types": "tsc --pretty --noEmit",
    "lint": "npm-run-all -p \"fmt:**\" \"lint:**\"",
    "fmt": "npm run fmt:check -- --write",
    "fix:js": "npm run lint:js -- --fix",
    "fix": "npm-run-all fix:js fmt",
    "commitlint": "commitlint --from=master",
    "build:client": "rimraf ./client/* && babel client-src/ --out-dir client/ --ignore \"client-src/webpack.config.js\" --ignore \"client-src/modules\" && webpack --config client-src/webpack.config.js",
    "build:types": "rimraf ./types/* && tsc --declaration --emitDeclarationOnly --outDir types && node ./scripts/extend-webpack-types.js && prettier \"types/**/*.ts\" --write && prettier \"types/**/*.ts\" --write",
    "build": "npm-run-all -p \"build:**\"",
    "test:only": "jest",
    "test:coverage": "npm run test:only -- --coverage",
    "test:watch": "npm run test:coverage --watch",
    "test": "npm run test:coverage",
    "pretest": "npm run lint",
    "prepare": "husky install && npm run build",
    "release": "standard-version"
  },
  "dependencies": {
    "@types/bonjour": "^3.5.9",
    "@types/connect-history-api-fallback": "^1.3.5",
    "@types/express": "^4.17.13",
    "@types/serve-index": "^1.9.1",
    "@types/serve-static": "^1.13.10",
    "@types/sockjs": "^0.3.33",
    "@types/ws": "^8.5.1",
    "ansi-html-community": "^0.0.8",
    "bonjour-service": "^1.0.11",
    "chokidar": "^3.5.3",
    "colorette": "^2.0.10",
    "compression": "^1.7.4",
    "connect-history-api-fallback": "^2.0.0",
    "default-gateway": "^6.0.3",
    "express": "^4.17.3",
    "graceful-fs": "^4.2.6",
    "html-entities": "^2.3.2",
    "http-proxy-middleware": "^2.0.3",
    "ipaddr.js": "^2.0.1",
    "open": "^8.0.9",
    "p-retry": "^4.5.0",
    "rimraf": "^3.0.2",
    "schema-utils": "^4.0.0",
    "selfsigned": "^2.1.1",
    "serve-index": "^1.9.1",
    "sockjs": "^0.3.24",
    "spdy": "^4.0.2",
    "webpack-dev-middleware": "^5.3.1",
    "ws": "^8.4.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.3",
    "@babel/core": "^7.17.5",
    "@babel/eslint-parser": "^7.17.0",
    "@babel/plugin-transform-object-assign": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@babel/runtime": "^7.17.2",
    "@commitlint/cli": "^16.2.3",
    "@commitlint/config-conventional": "^16.2.1",
    "@types/compression": "^1.7.2",
    "@types/default-gateway": "^3.0.1",
    "@types/node-forge": "^1.0.4",
    "@types/rimraf": "^3.0.2",
    "@types/sockjs-client": "^1.5.1",
    "@types/trusted-types": "^2.0.2",
    "acorn": "^8.2.4",
    "babel-jest": "^28.1.3",
    "babel-loader": "^8.2.4",
    "body-parser": "^1.19.2",
    "core-js": "^3.21.1",
    "css-loader": "^5.2.4",
    "eslint": "^8.12.0",
    "eslint-config-prettier": "^8.4.0",
    "eslint-config-webpack": "^1.2.5",
    "eslint-plugin-import": "^2.23.2",
    "execa": "^5.1.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.2",
    "http-proxy": "^1.18.1",
    "husky": "^7.0.0",
    "jest": "^28.1.3",
    "jest-environment-jsdom": "^28.1.3",
    "klona": "^2.0.4",
    "less": "^4.1.1",
    "less-loader": "^7.3.0",
    "lint-staged": "^12.3.4",
    "marked": "^4.0.12",
    "memfs": "^3.2.2",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.6.1",
    "puppeteer": "^13.4.1",
    "require-from-string": "^2.0.2",
    "rimraf": "^3.0.2",
    "sockjs-client": "^1.6.1",
    "standard-version": "^9.3.0",
    "strip-ansi-v6": "npm:strip-ansi@^6.0.0",
    "style-loader": "^2.0.0",
    "supertest": "^6.1.3",
    "tcp-port-used": "^1.0.2",
    "typescript": "^4.7.2",
    "url-loader": "^4.1.1",
    "webpack": "^5.71.0",
    "webpack-cli": "^4.7.2",
    "webpack-merge": "^5.8.0"
  },
  "peerDependencies": {
    "webpack": "^4.37.0 || ^5.0.0"
  },
  "peerDependenciesMeta": {
    "webpack-cli": {
      "optional": true
    }
  }
}

解决方法

1. 移除手动安装的webpack-dev-server

create-react-app已内置适配版本的webpack-dev-server，手动安装的webpack-dev-server@4.11.1与react-scripts@5.0.1存在版本冲突，执行：

npm uninstall webpack-dev-server

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

# 清理npm缓存
npm cache clean --force

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json

# 重新安装依赖
npm install

3. 检查环境变量

确认学习SignalR时未误改系统环境变量：

确保NODE_ENV为development
排查是否存在WEBPACK_DEV_SERVER_CLIENT_URL等干扰webpack路径的自定义变量

4. 重置create-react-app缓存

若以上步骤无效，执行：

npx react-scripts --reset-cache

5. 清理SignalR残留配置

检查项目根目录是否存在自定义webpack.config.js或craco.config.js，暂时重命名或删除后测试
确认入口文件（如src/index.js）中无残留的SignalR初始化代码干扰配置

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

运行React项目出现webpack-dev-server模块找不到错误求助

环境信息 #

背景 #

相关文件内容 #

项目package.json #

webpack-dev-server/client/index.js内容 #

webpack-dev-server的package.json #

1. 移除手动安装的webpack-dev-server #

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

3. 检查环境变量 #

4. 重置create-react-app缓存 #

5. 清理SignalR残留配置 #