Parcel v2 报错求助：无法找到axios模块及CSP连接问题

错误1：CSP阻止WebSocket连接 #

Parcel v2默认开启热重载（HMR），开发时会尝试建立ws://127.0.0.1:1234的连接，但你的Content Security Policy（CSP）规则未允许该源，导致报错。

解决选项：

• 开发环境临时方案：打包时禁用热重载，修改package.json中的打包命令，添加--no-hmr参数：

  "scripts": {
    "dev": "parcel src/js/your-entry-file.js --dist-dir ./public/js/bundle --no-hmr",
    "build": "parcel build src/js/your-entry-file.js --dist-dir ./public/js/bundle"
  }
  

• 持久方案（仅开发环境）：更新你的CSP规则，添加connect-src指令允许WebSocket连接：

  default-src 'self' https://.mapbox.com; connect-src 'self' https://.mapbox.com ws://127.0.0.1:1234;
  生产环境打包时Parcel不会启用热重载，该问题会自动消失，无需修改生产CSP。

错误2：Cannot find module 'axios' #

虽然你已安装依赖，但Parcel v2的模块解析逻辑与v1有差异，可按以下步骤排查：

• 确认axios已安装到项目依赖：运行命令npm list axios，若未显示依赖项，执行npm install axios --save重新安装
• 检查代码中的导入语句是否正确，确保是import axios from 'axios'而非相对路径导入
• 清除缓存并重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 确认打包命令的入口文件路径正确，确保Parcel能扫描到入口文件及其依赖（比如入口是src/js/index.js，命令需指向该文件）

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