如何解决React.js中的Webpack Dev Server模块找不到错误

问题背景 #

安装Babel扩展后触发Webpack Dev Server报错，移除扩展后问题未消失，核心报错为无法解析指定路径下的webpack-dev-server/client/index.js文件。

报错信息 #

Module not found: Error: Can't resolve 'D:#4 Web Development\React-Concepts\learn-react-2\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 'D:#4 Web Development\React-Concepts\learn-react-2'
ERROR in Module not found: Error: Can't resolve 'D:#4 Web Development\React-Concepts\learn-react-2\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 'D:#4 Web Development\React-Concepts\learn-react-2'

项目配置（package.json） #

{  
  "name": "learn-react-2",  
  "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"  
  },  
  "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"    
    ]  
  }
}

入口文件（index.js） #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(  
  <React.StrictMode>    
    <App />  
  </React.StrictMode>
);

解决步骤 #

• 清理依赖并重新安装

  1. 删除node_modules目录：Windows执行rd /s /q node_modules，Mac/Linux执行rm -rf node_modules
  2. 删除package-lock.json文件
  3. 重新安装依赖：npm install

• 修正项目路径
  项目路径包含#4这类特殊字符，会导致Webpack路径解析异常，建议将项目迁移到无特殊字符、空格的路径下，例如D:\WebDevelopment\React-Concepts\learn-react-2

• 重置react-scripts
  重新安装react-scripts修复可能损坏的配置：

  npm install react-scripts@5.0.1 --save
  

• 清除Webpack缓存
  执行以下命令强制清除缓存后重启服务：

  npm start -- --reset-cache
  

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