React项目启动失败求助：切换Node版本后仍无法运行

我正在学习React开发，之前项目能正常运行，因其他项目需求降低Node版本后，现在项目启动失败。已通过Git Bash安装NVM并切换至项目所需的Node v18.12.1版本，但项目仍无法启动。

启动日志 #

npm verb cli C:\Users\faf\.nvm\versions\node\v18.12.1\bin\node.exe C:\Users\faf\.nvm\versions\node\v18.12.1\bin\node_modules\npm\bin\npm-cli.js
npm info using npm@8.19.2
npm info using node@v18.12.1
npm timing npm:load:whichnode Completed in 3ms
npm timing config:load:defaults Completed in 3ms
npm timing config:load:file:C:\Users\faf\.nvm\versions\node\v18.12.1\bin\node_modules\npm\npmrc Completed in 15ms
npm timing config:load:builtin Completed in 16ms
npm timing config:load:cli Completed in 5ms
npm timing config:load:env Completed in 4ms
npm timing config:load:file:C:\Users\faf\OneDrive - TEST\Desktop\ReactJS\.npmrc Completed in 3ms
npm timing config:load:project Completed in 61ms
npm timing config:load:file:C:\Users\faf\.npmrc Completed in 7ms
npm timing config:load:user Completed in 7ms
npm timing config:load:file:C:\Users\afa\.nvm\versions\node\v18.12.1\bin\etc\npmrc Completed in 6ms
npm timing config:load:global Completed in 6ms
npm timing config:load:validate Completed in 3ms
npm timing config:load:credentials Completed in 2ms
npm timing config:load:setEnvs Completed in 3ms
npm timing config:load Completed in 113ms
npm timing npm:load:configload Completed in 114ms
npm timing npm:load:mkdirpcache Completed in 5ms
npm timing npm:load:mkdirplogs Completed in 4ms
npm verb title npm start
npm verb argv "start" "--loglevel" "verbose"
npm timing npm:load:setTitle Completed in 3ms
npm timing config:load:flatten Completed in 7ms
npm timing npm:load:display Completed in 14ms
npm verb logfile logs-max:10 dir:C:\Users\faf\AppData\Local\npm-cache\_logs
npm verb logfile C:\Users\faf\AppData\Local\npm-cache\_logs\2023-01-25T14_47_05_872Z-debug-0.log
npm timing npm:load:logFile Completed in 21ms
npm timing npm:load:timers Completed in 0ms
npm timing npm:load:configScope Completed in 0ms
npm timing npm:load Completed in 167ms

> reactjs@1.0.0 start
> webpack-dev-server --mode development --open --hot

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Users\faf\OneDrive - TEST\Desktop\ReactJS\public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
AssignProcessToJobObject: (6) The handle is invalid.
npm timing command:run-script Completed in 35919ms
npm timing command:start Completed in 35974ms
npm verb exit 2147483651
npm timing npm Completed in 36207ms
npm verb code 2147483651

Webpack配置文件 #

const path = require('path');  
const HtmlWebpackPlugin = require('html-webpack-plugin');  
  
module.exports = {  
   entry: './src/index.js',  
   output: {  
      path: path.join(__dirname, '/bundle'),  
      filename: 'index_bundle.js'  
   },  
   devServer: {
      // static: path.join(__dirname, 'public/'),
      // devMiddleware: {
      //   publicPath: '/dist/'
      // },
      port: 3000,
      hot: "only",
      historyApiFallback: true
    },
   module: {  
      rules: [  
         {  
            test: /\.jsx?$/,  
            exclude: /node_modules/,  
        use: {  
              loader: "babel-loader",  
            }  
         },
         {
            test: /\.(css|sass|scss)$/,
            use: [
              {
                loader: 'style-loader'
              },
              {
                loader: 'css-loader'
              },
              {
                loader: 'sass-loader'
              }
            ]
          }  
      ]  
   },  
   plugins:[  
      new HtmlWebpackPlugin({  
         template: './src/index.html'  
      })  
   ]  
}  

解决步骤 #

日志中的AssignProcessToJobObject: (6) The handle is invalid.是Windows环境下webpack-dev-server与NVM配合时的典型问题，按以下顺序尝试解决：

• 清理并重装依赖
  执行命令删除旧依赖和锁文件，重新安装适配当前Node版本的依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 修改启动命令参数
  在项目的package.json中，将scripts里的start命令修改为：

  "start": "webpack-dev-server --mode development --open --hot --no-spawn"
  

  添加--no-spawn参数避免子进程创建冲突。

• 验证终端环境一致性
  切换Node版本后，在项目目录打开CMD或PowerShell，执行node -v确认版本是否为v18.12.1，避免不同终端环境变量不一致。

• 更新webpack-dev-server版本
  当前版本可能与Node v18存在兼容性问题，执行命令更新到最新版：

  npm install webpack-dev-server@latest --save-dev
  

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