从零配置webpack报SyntaxError: Invalid or unexpected token

我借助createapp.dev网站搭建React项目，选择React、TypeScript、Babel、Sass、Prettier配置组合生成项目模板后，在控制台执行npm i安装全部依赖。后续执行webpack serve --hot --mode development命令，尝试以热模块替换模式启动webpack开发服务，收到如下报错：

[webpack-cli] /mnt/c/Users/[User]/Desktop/junior-to-senior-lessons/wp-autogenerated/node_modules/webpack-dev-server/lib/getPort.js:13
const maxPort = 65_535;
                ^^
SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:723:23)...

webpack配置文件（自动生成） #

const webpack = require('webpack');
const path = require('path');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

const config = {
  entry: [
    'react-hot-loader/patch',
    './src/index.tsx'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          'postcss-loader'
        ]
      },
      {
        test: /\.ts(x)?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.svg$/,
        use: 'file-loader'
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      }
    ]
  },
  devServer: {
    'static': {
      directory: './dist'
    }
  },
  resolve: {
    extensions: [
      '.tsx',
      '.ts',
      '.js'
    ],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  plugins: [
    new LodashModuleReplacementPlugin
  ]
};

module.exports = config;

package.json文件（自动生成） #

{
  "name": "wp-complete",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": {
    "clean": "rm dist/bundle.js",
    "build-dev": "webpack --mode development",
    "build-prod": "webpack --mode production",
    "start": "webpack serve --hot --mode development",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hot-loader": "^4.13.0",
    "@material-ui/core": "^4.12.4",
    "fontsource-roboto": "^4.0.0",
    "@material-ui/icons": "^4.11.3",
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "babel-loader": "^8.2.5",
    "@babel/core": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@hot-loader/react-dom": "^17.0.2+4.13.0",
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1",
    "postcss-loader": "^7.0.0",
    "autoprefixer": "^10.4.7",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "@babel/preset-react": "^7.17.12",
    "webpack-dev-server": "^4.9.2",
    "jest": "^28.1.1",
    "babel-jest": "^28.1.1",
    "typescript": "^4.7.4",
    "ts-loader": "^9.3.1",
    "sass-loader": "^13.0.0",
    "node-sass": "^7.0.1",
    "file-loader": "^6.2.0",
    "url-loader": "^4.1.1",
    "lodash-webpack-plugin": "^0.11.6",
    "prettier": "^2.7.1"
  }
}

报错指向webpack-dev-server依赖中getPort.js第13行的数值分隔符语法，提示无效token，本质是本地Node.js运行版本过低：
代码里65_535的写法是ES2021标准引入的数值分隔符语法，用于提升大数字的可读性，该语法最低支持Node.js 12.22.0、14.17.0版本，低于该版本的Node.js无法识别该语法，会直接抛出语法错误。从报错栈里的internal/modules/cjs/loader.js:723行号也能佐证，该行号对应Node.js 10.x及更早版本的模块编译逻辑，远低于webpack-dev-server 4.x要求的最低Node版本。

• 执行node -v查看本地Node版本，确认版本低于v14.17.0即可定位问题。
• 将本地Node.js升级至16.x/18.x/20.x的长期支持（LTS）版本，升级完成后重新执行node -v确认版本符合要求。如果需要同时维护多个不同Node版本的项目，可以使用nvm等版本管理工具切换版本，不会影响其他项目的运行环境。
• 删除项目目录下的node_modules文件夹和package-lock.json锁文件，重新执行npm i安装全量依赖，避免旧版本依赖缓存导致的兼容问题。
• 重新执行npm run start启动开发服务即可正常运行。

注意：不要尝试手动修改node_modules里webpack-dev-server的源码去掉下划线，这种改法会在下次重装依赖时失效，还可能引发其他不可预期的运行问题。

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