运行npm run dev出现语法错误，求Next.js在线象棋项目解决方案

我正在开发一个基于Next.js的在线象棋项目，之前运行一切正常，突然弹出错误：node_modules/watchpack/lib/watchpack.js文件存在无效或意外令牌。尝试回退到旧Git版本也没能解决问题，以下是错误栈信息和项目的package.json内容：

错误信息 #

E:\Allprojects\NEXTAPPS\chess_online\node_modules\watchpack\lib\watchpack.js:1
$→��m��mo�L�D��;�%g�?w��ŷ↓�▬��ovH0��a�5��*�ؒ��l͛�S�iy☺�r�O7��
��%L]��%��∟�hk
 ^

SyntaxError: Invalid or unexpected token
    at internalCompileFunction (node:internal/vm:73:18)      
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)   
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:110:18)    
    at Object.<anonymous> (E:\Allprojects\NEXTAPPS\chess_online\node_modules\next\dist\cli\next-dev.js:28:59)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)

Node.js v18.16.1

项目package.json内容 #

{
  "name": "chess_online",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "13.4.9",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.44.0",
    "eslint-config-next": "13.4.9"
  }
}

解决方案 #

1. 彻底清理并重新安装依赖 #

这是最常见的解决方法，文件损坏大概率是依赖安装过程中出现了异常：

• 删除项目根目录的node_modules文件夹：
  Windows命令：rd /s /q node_modules
  Mac/Linux命令：rm -rf node_modules
• 删除package-lock.json文件（如果用yarn则删除yarn.lock）
• 重新执行npm install（或yarn install）拉取干净的依赖

2. 清除npm缓存再重装依赖 #

缓存的损坏文件可能导致安装的依赖异常，执行以下步骤：

• 强制清除npm缓存：npm cache clean --force
• 重复上面清理依赖的步骤：删除node_modules和锁文件，再重新安装

3. 检查Node.js版本兼容性 #

虽然当前Node.js v18.16.1和Next.js 13.4.9理论上兼容，但版本微小差异也可能引发问题：

• 可以用nvm管理Node.js版本，安装LTS版本（比如v20.x）：
  1. 安装nvm后，执行nvm install 20
  2. 切换到该版本：nvm use 20
  3. 重新清理并安装依赖，启动项目测试

4. 手动替换watchpack文件 #

如果上述方法都无效，可以手动替换损坏的watchpack包：

• 找到Next.js依赖的watchpack版本（查看package-lock.json中watchpack的版本号）
• 下载对应版本的watchpack包
• 解压后替换项目中node_modules/watchpack文件夹

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