WSL2环境下运行npm start启动React应用报错求助

问题背景 #

之前在远程Ubuntu服务器正常运行的React应用，转到本地Windows的WSL2环境后无法启动，尝试过各类npm命令无效，完全不懂JS，求解决启动问题。

报错信息 #

nick@GameCube:~/Winions.gg/frontend/my-app$ npm start

> my-app@0.1.0 start /home/nick/Winions.gg/frontend/my-app
> react-scripts start

/home/nick/Winions.gg/frontend/my-app/node_modules/eslint-webpack-plugin/node_modules/jest-worker/build/index.js:110
  _ending;
         ^

SyntaxError: Unexpected token ;
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/home/nick/Winions.gg/frontend/my-app/node_modules/eslint-webpack-plugin/dist/getESLint.js:9:5)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-app@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nick/.npm/_logs/2022-12-11T03_44_57_094Z-debug.log

package.json配置 #

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://winions.gg",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.2.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.6.0",
    "react-circular-progressbar": "^2.1.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.6.0",
    "react-router-dom": "^6.4.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"
    ]
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0"
  }
}

解决方案 #

1. 升级Node.js版本 #

报错核心原因是Node.js版本过低，不支持jest-worker中使用的ES6+类字段语法（_ending;），react-scripts@5.0.1要求Node.js 14.0.0或更高版本：

• 执行node -v查看当前版本，若低于14.0.0则需升级
• 推荐用nvm管理Node版本（WSL2环境下最稳定）：
  1. 安装nvm：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
  2. 关闭并重新打开终端，安装LTS版本：nvm install 16
  3. 切换到新安装的版本：nvm use 16

2. 清理依赖重新安装 #

WSL2环境和原服务器的依赖缓存可能存在差异，清理后重新安装可解决兼容性问题：

rm -rf node_modules
rm package-lock.json
npm install
npm start

3. 移除冲突的开发依赖 #

babel-eslint@10.1.0是旧版本ESLint解析器，和react-scripts@5.x内置的ESLint配置冲突：

• 编辑package.json，删除devDependencies中的"babel-eslint": "^10.1.0"
• 执行npm install更新依赖

内容的提问来源于stack exchange，提问作者NFeruch - FreePalestine