本地运行React项目出现Uncaught SyntaxError及Manifest语法错误如何解决

报错的核心根因：浏览器请求JS、CSS、manifest.json等静态资源时，服务返回了HTML文档（通常为404页面，首字符为<），浏览器将HTML按对应资源格式解析时触发语法报错。线上部署无问题说明代码本身无语法错误，问题出在本地构建配置或资源托管方式。

修复步骤 #

• 步骤1：不要直接打开build目录下的index.html
  React打包后的产物不支持通过file://本地文件协议直接打开，必须用静态服务托管，操作命令如下：

# 全局安装静态服务工具
npm install -g serve
# 托管build目录
serve build

执行后访问serve输出的本地服务地址（默认http://localhost:3000）即可。

• 步骤2：修正package.json的homepage配置
  如果静态服务启动后仍报错，检查package.json中的homepage字段：线上部署在子路径下时通常会配置该字段为线上域名+子路径，会导致本地build后的资源路径自动添加子路径前缀，本地根路径托管时找不到资源。修复方法：本地构建时暂时注释该字段，或将值改为相对路径"./"后重新执行npm run build。
• 步骤3：调整构建工具的publicPath配置
  如果项目eject了CRA配置，或是自定义了webpack/vite构建规则，检查output.publicPath配置：线上环境通常会配置为带域名/子路径的绝对路径，本地构建时改为"/"或"./"即可。
• 步骤4：日常开发直接启动devServer
  如果不需要验证打包产物，仅需日常开发调试，直接执行npm start启动热更开发服务即可，无需提前执行build命令，开发服务会自动处理资源路径适配问题。

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