React项目用Parcel启动报错：Got unexpected undefined求助

问题详情 #

之前正常运行的React项目，执行npm start（启动命令为parcel index.html）时出现如下错误：

ERROR
C:\Users\amitb\OneDrive\Desktop\React-Project>npm start

react-project@1.0.0 start
parcel index.html

Error: Got unexpected undefined

at nullthrows (C:\Users\amitb\OneDrive\Desktop\React-Project\node_modules\nullthrows\nullthrows.js:7:15)
 at RequestGraph.invalidateOptionNodes (C:\Users\amitb\OneDrive\Desktop\React-Project\node_modules\@parcel\core\lib\RequestTracker.js:248:44)
 at loadRequestGraph (C:\Users\amitb\OneDrive\Desktop\React-Project\node_modules\@parcel\core\lib\RequestTracker.js:872:18)
 at async RequestTracker.init (C:\Users\amitb\OneDrive\Desktop\React-Project\node_modules\@parcel\core\lib\RequestTracker.js:822:17)
 at async Parcel._init (C:\Users\amitb\OneDrive\Desktop\React-Project\node_modules\@parcel\core\lib\Parcel.js:188:28)
 at async Parcel.watch (C:\Users\amitb\OneDrive\Desktop\React-Project\node_modules\@parcel\core\lib\Parcel.js:260:7)
 at async run (C:\Users\amitb\OneDrive\Desktop\React-Project\node_modules\parcel\lib\cli.js:283:9) {

framesToPop: 1
}

项目package.json配置：

{
  "name": "react-project",
  "version": "1.0.0",
  "description": "project1",
 
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "parcel": "^2.12.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3"
  },
  "devDependencies": {
    "postcss": "^8.4.38",
    "process": "^0.11.10",
    "tailwindcss": "^3.4.3"
  }
}

排查解决步骤 #

• 清理Parcel缓存
  Parcel的缓存目录可能损坏，导致解析异常。执行命令删除缓存：

# Windows系统
rmdir /s /q .parcel-cache

# macOS/Linux系统
rm -rf .parcel-cache

删除后重新运行npm start。

• 重建依赖环境
  依赖包可能存在冲突或损坏，删除现有依赖和锁文件后重新安装：

# Windows系统手动删除node_modules文件夹和package-lock.json文件，然后执行
npm install

# macOS/Linux系统
rm -rf node_modules package-lock.json
npm install

• 检查项目配置文件
  检查项目根目录下的.parcelrc、tailwind.config.js、postcss.config.js是否存在语法错误或配置项缺失。比如Tailwind配置中的路径是否正确，PostCSS的插件是否配置完整，这类配置错误会导致Parcel处理时出现未定义异常。

• 降级Parcel版本
  当前使用的Parcel 2.12.0可能存在已知bug，尝试降级到稳定版本2.11.0：

npm install parcel@2.11.0 --save

安装完成后重新启动项目。

• 检查入口文件index.html
  确认index.html中引用的脚本、样式路径是否正确，有没有未闭合的标签或语法错误，Parcel解析入口文件失败也可能触发此类错误。

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