React构建包部署Ubuntu服务器遇Uncaught SyntaxError: Unexpected token '<'错误求助

这个错误的核心原因是浏览器请求静态资源（如/static/js/main.xxx.js）时，Nginx返回了index.html的内容，导致JS解析器把HTML标签当成JS代码，抛出"Unexpected token '<'"错误。以下是具体修复步骤：

1. 核对Nginx的root路径配置 #

打开你的Nginx配置文件（通常在/etc/nginx/sites-available/或/etc/nginx/conf.d/目录下），确保server块里的root指向React项目build文件夹的绝对路径，示例配置如下：

server {
    listen 80;
    server_name 你的域名或服务器IP;

    # 替换为服务器上build文件夹的实际绝对路径，比如/var/www/my-react-app/build
    root /path/to/your/react/build/folder;
    index index.html;

    # 处理React单页应用的路由 fallback
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源单独配置，提升缓存效率
    location /static/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

常见错误：如果root指向的是build的上级目录，而非build本身，请求静态资源时会找不到文件，触发fallback返回index.html，导致报错。

2. 验证静态资源的存在与权限 #

登录Ubuntu服务器，执行以下命令检查：

# 进入build目录
cd /path/to/your/react/build/folder
# 查看js和css文件是否存在
ls -la static/js/ static/css/
# 确保Nginx进程（通常是www-data用户）有读取权限
sudo chown -R www-data:www-data /path/to/your/react/build/folder

3. 重启Nginx服务 #

修改配置后，先验证语法正确性，再重启服务：

# 检查配置语法
sudo nginx -t
# 语法正确则重启
sudo systemctl restart nginx

4. 强制刷新浏览器缓存 #

本地浏览器可能缓存了错误响应，按Ctrl+Shift+R强制刷新，或用无痕模式测试。

额外注意 #

如果你的项目部署在子路径下（比如xxx.com/my-app），需要先在项目的package.json中添加"homepage": "/my-app/"，重新构建后再调整Nginx的location配置对应子路径。

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