前端开发服务器启动失败：Module parse failed错误求助（Node 12.12.0）

针对Node 12.12.0、npm 6.14.4环境下服务器启动崩溃，提示Module parse failed: Unexpected token (598:33)且babel-loader处理后仍需额外loader的问题，可按以下步骤排查修复：

• 检查并更新Babel配置
  该错误大概率是项目使用了Node 12.12.0不支持的ES2020+语法（如可选链?.、空值合并运算符??），而Babel未配置对应的转译规则。在项目根目录的.babelrc或babel.config.js中添加如下配置：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "node": "12.12.0"
        }
      }]
    ],
    "plugins": [
      "@babel/plugin-proposal-optional-chaining",
      "@babel/plugin-proposal-nullish-coalescing-operator"
    ]
  }
  

• 安装必要的Babel依赖
  执行以下命令安装缺失的Babel预设和插件：

  npm install --save-dev @babel/preset-env @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator
  

• 若为Create React App项目
  CRA默认隐藏Webpack和Babel配置，需通过react-app-rewired修改：

  1. 安装依赖：

     npm install --save-dev react-app-rewired customize-cra
     

  2. 根目录创建config-overrides.js：

     const { override, addBabelPlugins, addBabelPresets } = require('customize-cra');
     
     module.exports = override(
       addBabelPresets([
         '@babel/preset-env',
         { targets: { node: '12.12.0' } }
       ]),
       addBabelPlugins(
         '@babel/plugin-proposal-optional-chaining',
         '@babel/plugin-proposal-nullish-coalescing-operator'
       )
     );
     

  3. 修改package.json中的启动脚本：

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test"
     }
     

• 清理缓存并重启服务
  清理Node模块缓存后重新启动：

  rm -rf node_modules/.cache
  npm start
  

• 排查第三方依赖问题
  若错误来自第三方包，需在Babel配置中添加该包至转译范围，或调整Webpack配置排除/包含特定模块。

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