React项目部署DreamHost后路由正常但JS报Unexpected token '<'错误求助

问题根源 #

你遇到的Unexpected token '<'错误，本质是服务器把JS、JSON等静态资源请求重定向到了index.html，导致浏览器解析HTML内容当成JS，自然报错。这大概率是静态资源路径配置错误或者.htaccess规则没正确过滤真实存在的文件。

解决方案 #

1. 修正package.json的homepage配置 #

在项目根目录的package.json中添加或修改homepage字段：

• 如果是部署在域名根目录（比如https://yourdomain.com/）：

  "homepage": "/"
  

• 如果是部署在子目录（比如https://yourdomain.com/your-app/）：

  "homepage": "/your-app/"
  

修改后重新执行npm run build，再上传新的build文件夹到服务器。

2. 优化.htaccess规则 #

原规则可能存在识别真实文件的偏差，替换为更严谨的规则，确保只有不存在的路径才重定向到index.html：

Options -MultiViews
RewriteEngine On

# 排除静态资源文件，避免被重定向
RewriteCond %{REQUEST_URI} !\.(js|css|png|jpg|jpeg|gif|ico|svg|json|txt)$ [NC]
# 排除已经存在的文件或目录
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 重定向到index.html
RewriteRule ^ index.html [QSA,L]

把这个更新后的内容覆盖原.htaccess文件，确保文件放在build文件夹的根目录（和index.html同级）。

3. 验证静态资源路径 #

上传build文件夹后，检查服务器上的文件结构：

• 确保static/js/、static/css/等目录完整存在
• 访问某个JS文件的直接URL（比如https://yourdomain.com/static/js/main.xxx.chunk.js），确认返回的是JS代码而非HTML内容

额外注意事项 #

• DreamHost的Apache服务器默认开启Rewrite模块，但如果上述规则无效，可联系主机商确认模块是否启用
• 上传build文件夹时，确保所有文件（包括隐藏的.htaccess）都完整上传，部分FTP工具默认不显示隐藏文件，需开启显示选项

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