React项目用Parcel打包后运行dev命令报URI malformed错误怎么解决

报错核心诱因 #

你遇到的「本地1234端口已正常启动，但同步抛出C:\React\parcelreact\todoapp\public\index.html: URI malformed、堆栈指向decodeURIComponent()」的现象，是Parcel在解析入口HTML的资源路径时触发URI解码异常导致的，具体匹配你项目场景的诱发点有：

• 旧版parcel-bundler的启动流程是先绑定本地服务端口，再异步解析入口文件的资源引用，因此会出现端口已可访问但资源解析阶段抛错的情况，和服务本身是否启动成功无关。
• 你当前的scripts配置本身存在路径不一致：dev命令的入口指向public/index.html，build命令的入口指向根目录的index.html，本身就不符合Parcel统一入口文件的要求。
• 两类路径不兼容会直接触发decodeURIComponent()解码失败：
  1. CRA生成的public/index.html中默认带有%PUBLIC_URL%这类带百分号的占位符，Parcel会把百分号开头的字符串当作URL编码规则的内容尝试解码，遇到不符合十六进制规范的字符就会抛出URI malformed。
  2. 旧版parcel-bundler对Windows系统的反斜杠路径、特殊字符路径的编码处理存在bug，本地文件路径未做转码就直接传入解码方法，会直接触发解码异常。

分步解决操作 #

• 修正Parcel入口配置，匹配目录结构
  不要直接将public/index.html作为Parcel的入口。CRA的public目录是静态资源托管目录，并非Parcel识别的项目根路径。正确调整方式：

1. 将public/index.html移动到项目根目录，作为Parcel的标准HTML入口
2. 对齐package.json中的scripts配置，统一入口文件路径：

   "dev": "parcel index.html",
   "build": "parcel build index.html"
   

• 清理CRA专属的HTML占位符
  打开根目录的index.html，删除所有%PUBLIC_URL%类占位字符串，将原占位符对应的资源引用改为相对路径：
• 示例：将原写法<link rel="icon" href="%PUBLIC_URL%/favicon.ico">替换为<link rel="icon" href="./favicon.ico">
• 将原public目录下的静态资源（favicon、静态图片等）迁移到项目src/assets目录下，对应修改引用路径为相对路径，避免百分号触发解码异常
• 替换已停止维护的旧打包工具包
  旧版parcel-bundler已停止官方维护，对Windows路径的编码解析bug长期未修复，替换为当前官方维护的parcel包即可解决路径兼容问题：

npm uninstall parcel-bundler
npm install --save-dev parcel

• 验证排查
  完成上述调整后，先将项目移动到纯英文、无特殊符号的路径下（例如C:\code\parcel-react-demo\），再重新执行npm run dev。如果错误消失，即可确认此前的路径编码冲突是触发因素。

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