Uncaught SyntaxError: Unexpected token 'export' at app.js

[kiddtang]

Horizon Version

5.24.3

Laravel Version

9.52.16

PHP Version

8.1.28

Redis Driver

PhpRedis

Redis Version

7.2.4

Database Driver & Version

No response

Description

Horizon Dashboard appear to be blank with error in console.
Uncaught SyntaxError: Unexpected token 'export' at app.js

Steps To Reproduce

run composer update , from version v5.23.1, update to version: v5.24.3

downgrade to version: v5.24.2, Dashboad back to normal.

assest was published after composer update by

"post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],

Tried

• Downgrading laravel/horizon (v5.24.3 => v5.24.2) ✅ Dashboard Normal
  then
  • Upgrading laravel/horizon (v5.24.2 => v5.24.3) ❌ Dashboard Blank Again with app.js error

[driesvints]

@mmachatschek another one ^

[mmachatschek]

@kiddtang
how do you run your laravel application?
do you run a vite server in dev mode or something else?
Also what browser are you running?

[kiddtang]

@kiddtang how do you run your laravel application? do you run a vite server in dev mode or something else? Also what browser are you running?

I am using Laravel Sail sail npm run dev. it shows blank for Laravel Horizon Dashboad (v5.24.3)
However, it still show blank dashboard even i ran npm run build without using vite v5.2.10.

I am running on Chrome Version 124.0.6367.78.

I tried Microsoft Edge Version 124.0.2478.51 inPrivate Mode, it still shows blank dashboard.

Also, Firefox 125.0.2 (64-bit) with Zero Add-ons
with slightly diff error message Uncaught SyntaxError: export declarations may only appear at top level of a module

Downgrade to v5.24.2 with sail npm run dev just working fine.

[gkarkow-digi]

I'm experiencing the same Uncaught SyntaxError: export declarations may only appear at top level of a module error here.

Using Laravel Mix.

[mmachatschek]

@kiddtang @gkarkow-digi I am unable to reproduce this issue with sail or normal php artisan serve

Further questions:

1. Do you have a special CORS setup enabled?
2. If you open the horizon dashboard and open the Network requests in the dev tools. Is horizon requesting assets from a different domain than horizon is served? e.g. you have serve horizon from http://laravel.test/horizon but the assets are loaded from http://127.0.0.1/vendor/horizon/app.js?
3. Is it possible that your webserver is not sending the "Content-Type: application/javascript" header when returning the app.js module? (please add a screenshot of the dev tools requests to /vendor/horizon/app.js

[kiddtang]

@kiddtang @gkarkow-digi I am unable to reproduce this issue with sail or normal php artisan serve

Further questions:

1. Do you have a special CORS setup enabled?
2. If you open the horizon dashboard and open the Network requests in the dev tools. Is horizon requesting assets from a different domain than horizon is served? e.g. you have serve horizon from http://laravel.test/horizon but the assets are loaded from http://127.0.0.1/vendor/horizon/app.js?
3. Is it possible that your webserver is not sending the "Content-Type: application/javascript" header when returning the app.js module? (please add a screenshot of the dev tools requests to /vendor/horizon/app.js

I tried using the default config/horizon.php (without any custom auth middleware) still blank horizon dashboard

[mmachatschek]

@kiddtang the screenshot of the app.js request indicates you are loading a older version of the built javascript asset.

Is the screenshot made with the v5.24.2 version of horizon or with the latest 5.24.3?

[kiddtang]

@kiddtang the screenshot of the app.js request indicates you are loading a older version of the built javascript asset.

Is the screenshot made with the v5.24.2 version of horizon or with the latest 5.24.3?

Both screenshot tested on version 5.24.3
The working version 5.24.2 is http://localhost/vendor/horizon/app.js?id=4999da9248177ed487693daec2a7d3fe

I upgraded to 5.24.3 the id still stuck at the 5.24.2, if i discard the published app.js in my git, the dashboard back to normal (using the app.js?id=4999da9248177ed487693daec2a7d3fe), once i run sail artisan horizon:publish, it become blank immediately (app.js is new version, however url still the 5.24.2 md5).

[mmachatschek]

@kiddtang this has to be some composer/cache/sail issue because in 5.24.3 this should not be loading

For further debugging. can you also post what the html document of /admin/horizon returns?

You can ignore the vue tag. please post your servers response like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Information -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="cVxb452zqdWgfkIL8I9YyTQ4yVw7grc3Er64Brbc">
    <link rel="shortcut icon" href="http://127.0.0.1:8000/vendor/horizon/favicon.png">

    <title>Horizon - Laravel</title>

    <!-- Style sheets-->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:300,400,500,600" rel="stylesheet" />

    <link rel="preload" as="style" href="http://127.0.0.1:8000/vendor/horizon/styles.css" integrity="sha384-4HOmv1E51xgqbUYzCYXaRXPRja5nEho6eq/L/CKs0LlidzTGNTk81VtCAHqLiYSC" /><link rel="stylesheet" href="http://127.0.0.1:8000/vendor/horizon/styles.css" integrity="sha384-4HOmv1E51xgqbUYzCYXaRXPRja5nEho6eq/L/CKs0LlidzTGNTk81VtCAHqLiYSC" data-scheme="light" />
    <link rel="preload" as="style" href="http://127.0.0.1:8000/vendor/horizon/styles-dark.css" integrity="sha384-/sLOxh+NTFEdcZ8svIuVTv/lSL65X3QGIXhExXAhntQYWjiez1CQbv4ICbtwRfd8" /><link rel="stylesheet" href="http://127.0.0.1:8000/vendor/horizon/styles-dark.css" integrity="sha384-/sLOxh+NTFEdcZ8svIuVTv/lSL65X3QGIXhExXAhntQYWjiez1CQbv4ICbtwRfd8" data-scheme="dark" />
</head>
<body>
...

<!-- Global Horizon Object -->
<script>
    window.Horizon = {"path":"horizon"};
</script>

<link rel="preload" as="style" href="http://127.0.0.1:8000/vendor/horizon/app.css" /><link rel="modulepreload" href="http://127.0.0.1:8000/vendor/horizon/app.js" integrity="sha384-EV5vlraT2g7leIzueltC7I+UzR7uBT4ndQF5b1G9I+kUrQ4XL0DREuRw/XiU/U3P" /><link rel="stylesheet" href="http://127.0.0.1:8000/vendor/horizon/app.css" /><script type="module" src="http://127.0.0.1:8000/vendor/horizon/app.js" integrity="sha384-EV5vlraT2g7leIzueltC7I+UzR7uBT4ndQF5b1G9I+kUrQ4XL0DREuRw/XiU/U3P"></script>
</body>
</html>

[kiddtang]

this is working v5.24.2

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Information -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="XpBTghnc7mA3UhykG0wJm3Zs1N48bNSfVPF6mzgD">
    <link rel="shortcut icon" href="http://localhost/vendor/horizon/img/favicon.png">

    <title>Horizon - Terakiosk</title>

    <!-- Style sheets-->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:300,400,500,600" rel="stylesheet" />
    <link href="http://localhost/vendor/horizon/app.css?id=14e3bcd1f1b1cf88e63e945529c4d0ce" rel="stylesheet" data-scheme="light">
    <link href="http://localhost/vendor/horizon/app-dark.css?id=dcaca44a9f0f1d019e3cd3d76c3cb8fd" rel="stylesheet" data-scheme="dark">
</head>
<body>
...
<!-- Global Horizon Object -->
<script>
    window.Horizon = {"path":"admin\/horizon"};
</script>

<script src="http://localhost/vendor/horizon/app.js?id=4999da9248177ed487693daec2a7d3fe"></script>
</body>
</html>

Update to v5.24.3

1. sail composer update

  - Upgrading laravel/horizon (v5.24.2 => v5.24.3)

3. sail artisan horizon:publish

   INFO  Publishing [horizon-assets] assets.

  Copying directory [vendor/laravel/horizon/public/build] to [public/vendor/horizon] ............................ DONE

❌ Before clear view cache

<!-- Global Horizon Object -->
<script>
    window.Horizon = {"path":"admin\/horizon"};
</script>

<script src="http://localhost/vendor/horizon/app.js?id=4999da9248177ed487693daec2a7d3fe"></script>
</body>
</html>

4. Clear View Cache

$ sail artisan view:clear

   INFO  Compiled views cleared successfully.

✅ After clear view cache, v5.24.3 Horizon Dashboard able to load properly.

<!-- Global Horizon Object -->
<script>
    window.Horizon = {"path":"admin\/horizon"};
</script>

<link rel="preload" as="style" href="http://localhost/vendor/horizon/app.css" /><link rel="modulepreload" href="http://localhost/vendor/horizon/app.js" integrity="sha384-EV5vlraT2g7leIzueltC7I+UzR7uBT4ndQF5b1G9I+kUrQ4XL0DREuRw/XiU/U3P" /><link rel="stylesheet" href="http://localhost/vendor/horizon/app.css" /><script type="module" src="http://localhost/vendor/horizon/app.js" integrity="sha384-EV5vlraT2g7leIzueltC7I+UzR7uBT4ndQF5b1G9I+kUrQ4XL0DREuRw/XiU/U3P"></script>
</body>
</html>

@mmachatschek You're right. it is cache issue. I will artisan view:clear after horizon update next time.

You may proceed to close this issue. Thanks for spending time on this issue.

[mmachatschek]

@gkarkow-digi can you also check your view cache on this? so we can confirm that you have the same issue

[driesvints]

Gonna close this but feel free to continue to discuss.

[gkarkow-digi]

@gkarkow-digi can you also check your view cache on this? so we can confirm that you have the same issue

@mmachatschek Looks like it was related to cached views indeed. Thanks for pointing that out!