React应用本地正常，部署Hostinger后白屏且报语法错误

核心错误分析 #

• Uncaught SyntaxError: Unexpected token '<'：本质是浏览器请求JS/CSS等资源时，服务器返回的是HTML内容（比如404页面或index.html），而非预期的静态文件，导致浏览器解析HTML时遇到<报错。
• manifest.json:1 Syntax error：同理，请求manifest.json时拿到的不是正确的JSON文件，而是HTML内容，解析JSON时触发错误。

排查与解决步骤 #

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

Create React App打包时的资源路径由package.json里的homepage字段决定，配置错误会直接导致资源加载失败：

• 若应用部署在Hostinger根域名（如https://yourdomain.com/），设置"homepage": "."或直接删除该字段（默认指向根路径）。
• 若部署在子目录（如https://yourdomain.com/my-app/），必须设置"homepage": "/my-app/"。
  修改后重新执行npm run build，用新的打包文件覆盖服务器上的旧文件。

2. 验证服务器文件路径与网站根目录映射 #

• 确认build文件夹内所有文件（index.html、static目录、manifest.json等）都上传到了Hostinger对应域名的目标目录（根目录或对应子目录）。
• 登录Hostinger面板，进入「网站」->「管理网站」->「文件管理器」，检查域名指向的根目录是否与你上传文件的目录一致，避免路径不匹配。

3. 配置SPA重写规则（关键） #

React是单页应用，所有路由请求都需指向index.html，否则会返回404并引发资源解析错误：

• 若Hostinger使用Apache服务器，在应用根目录创建/修改.htaccess文件，添加以下规则：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

• 若使用Nginx（较少见），需配置try_files指令：

location / {
  try_files $uri $uri/ /index.html;
}

4. 检查静态资源请求状态 #

打开浏览器开发者工具（F12）切换到「网络」标签，刷新页面：

• 查看main.xxx.js、manifest.json等资源的请求URL是否正确，状态码是否为200。
• 若返回404，说明路径配置错误，回到步骤1、2重新核对homepage和服务器文件路径。
• 若返回200但内容是index.html代码，说明重写规则或homepage配置有误，导致资源请求被路由到根页面。

5. 排查近期代码改动 #

因为此前部署正常，重点检查近期修改的内容：

• 是否新增了嵌套路由或非根路径路由，需确保与homepage配置兼容。
• 是否手动修改过public目录下的manifest.json或index.html，比如JSON格式错误（可重新上传build目录下的manifest.json验证）。
• 是否引入了新的第三方依赖，尝试重新执行npm install后再打包。

6. 清除缓存 #

• 浏览器端：按Ctrl+Shift+R强制刷新，清除本地缓存。
• Hostinger服务器端：进入面板「网站」->「管理网站」->「缓存」，清除网站缓存，避免旧的错误资源被缓存。

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