执行npm start启动React应用时出现ERR_INVALID_ARG_VALUE错误求助

一、致命错误：TypeError [ERR_INVALID_ARG_VALUE] 路径含空字节 #

错误原因 #

项目所在路径过长且包含#这类特殊字符，导致Node.js文件系统模块解析路径时触发空字节验证错误，直接阻断开发服务器启动。

修复步骤 #

1. 将项目文件夹迁移到短路径、无特殊字符的目录，比如从原路径：

   C:\React.js CodeWithHarry CWH 29.3.23#2 Creating our first react app using create-react-app  Complete React Course in Hindi #2 30.3.23\textutils
   

   改为：

   C:\react-projects\textutils
   

2. 打开终端进入新路径，先执行npm install重新关联依赖，再运行npm start。

二、webpack-dev-server弃用警告处理 #

警告原因 #

使用的case-sensitive-paths-webpack-plugin版本较旧，仍在调用已废弃的onAfterSetupMiddleware配置项，官方已推荐改用setupMiddlewares。

修复步骤 #

1. 升级插件到最新版本：

   npm install case-sensitive-paths-webpack-plugin@latest
   

2. 若使用create-react-app，升级后无需手动修改配置；若为自定义webpack配置，需将配置中的onAfterSetupMiddleware替换为setupMiddlewares。

完整错误日志参考 #

(node:12372) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
Starting the development server...
node:internal/fs/utils:676
throw err;
^
TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received 'C:\React.js CodeWithHarry CWH 29.3.23\#2 Creating our first react app using create-react-app  Complete React Course in Hindi ...
at readdir (node:fs:1358:10)
at go$readdir (C:\React.js CodeWithHarry CWH 29.3.23#2 Creating our first react app using create-react-app  Complete React Course in Hindi #2 30.3.23\textutils\node_modules\graceful-fs\graceful-fs.js:206:16)
at Object.readdir (C:\React.js CodeWithHarry CWH 29.3.23#2 Creating our first react app using create-react-app  Complete React Course in Hindi #2 30.3.23\textutils\node_modules\graceful-fs\graceful-fs.js:211:12)
at CacheBackend.provide (C:\React.js CodeWithHarry CWH 29.3.23#2 Creating our first react app using create-react-app  Complete React Course in Hindi #2 30.3.23\textutils\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:193:18)
at CaseSensitivePathsPlugin.getFilenamesInDir (C:\React.js CodeWithHarry CWH 29.3.23#2 Creating our first react app using create-react-app  Complete React Course in Hindi #2 30.3.23\textutils\node_modules\case-sensitive-paths-webpack-plugin\index.js:59:6)
at CaseSensitivePathsPlugin.fileExistsWithCase (C:\React.js CodeWithHarry CWH 29.3.23#2 Creating our first react app using create-react-app  Complete React Course in Hindi #2 30.3.23\textutils\node_modules\case-sensitive-paths-webpack-plugin\index.js:101:8)
at checkFile (C:\React.js CodeWithHarry CWH 29.3.23#2 Creating our first react app using create-react-app  Complete React Course in Hindi #2 30.3.23\textutils\node_modules\case-sensitive-paths-webpack-plugin\index.js:162:10)
at C:\React.js CodeWithHarry CWH 29.3.23#2 Creating our first react app using create-react-app  Complete React Course in Hindi #2 30.3.23\textutils\node_modules\case-sensitive-paths-webpack-plugin\index.js:196:7)
at CaseSensitivePathsPlugin.primeCache (C:\React.js CodeWithHarry CWH 29.3.23#2 Creating our first react app using create-react-app  Complete React Course in Hindi #2 30.3.23\textutils\node_modules\case-sensitive-paths-webpack-plugin\index.js:132:5)
at Object.onAfterResolve [as fn] (C:\React.js CodeWithHarry CWH 29.3.23#2 Creating our first react app using create-react-app  Complete React Course in Hindi #2 30.3.23\textutils\node_modules\case-sensitive-paths-webpack-plugin\index.js:191:10) {
code: 'ERR_INVALID_ARG_VALUE'
}

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