Laravel+React生产环境报错：Uncaught SyntaxError: Unexpected token '<'

生产环境访问地址http://52.90.15.223/时，浏览器控制台报错：app.js:1 Uncaught SyntaxError: "Unexpected token '<'"，无法正常加载app.js及resources目录下的静态资源。

问题现象说明 #

• 页面表现：页面空白，控制台输出上述语法错误
• 网络请求：请求app.js返回的是HTML内容（而非预期的JS文件）

相关代码配置 #

app.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Funny Stack</title>
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('css/memes-list.css') }}" rel="stylesheet">
    <link href="{{ asset('css/edit-meme.css') }}" rel="stylesheet">
    <link href="{{ asset('css/auth.css') }}" rel="stylesheet">
    <link href="{{ asset('css/navbar.css') }}" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <div id="app"></div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production",
        "heroku-postbuild": "npm run prod"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.13.13",
        "@popperjs/core": "^2.10.2",
        "axios": "^0.25",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1"
    },
    "dependencies": {
        "@babel/standalone": "^7.23.3",
        "@react-oauth/google": "^0.11.1",
        "interactjs": "^1.10.11",
        "jwt-decode": "^4.0.0",
        "materialize-css": "^1.0.0-rc.2",
        "react-beforeunload": "^2.5.1",
        "react-google-button": "^0.7.2",
        "react-google-login": "^5.2.2",
        "react-paginate": "^7.1.3",
        "react-router-dom": "^5.2.0"
    }
}

解决步骤 #

1. 确认资源已编译
   生产环境必须执行npm run prod，让Laravel Mix将资源打包到public/css和public/js目录。检查服务器上这两个目录下的app.js、app.css是否存在，且文件内容是编译后的资源而非HTML。

2. 修复Web服务器静态资源配置

   • Nginx：确保配置中优先处理静态资源，避免转发到Laravel入口文件：

     location / {
         try_files $uri $uri/ /index.php?$query_string;
     }
     
     location ~* \.(js|css|png|jpg)$ {
         expires 1y;
         add_header Cache-Control "public, immutable";
     }
     

   • Apache：确认public/.htaccess文件存在且配置正常，Laravel默认配置会自动处理静态资源请求。

3. 验证资源URL正确性
   查看页面源码，确认app.js的URL是http://52.90.15.223/js/app.js这类正确路径，点击该URL如果返回HTML页面，说明服务器未正确映射到静态文件。

4. 调整文件权限
   确保服务器进程（www-data/nginx）能读取public目录下的文件：

   chmod -R 755 public/
   chown -R www-data:www-data public/
   

5. 清除缓存

   • 执行Laravel缓存清理命令：php artisan cache:clear、php artisan config:clear
   • 强制刷新浏览器（Ctrl+F5）测试

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