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

kiddtang commented 6 months ago

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 commented 6 months ago

@mmachatschek another one ^

mmachatschek commented 6 months ago

@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 commented 6 months ago

@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 commented 6 months ago

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

Using Laravel Mix.

mmachatschek commented 6 months ago

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

Further questions:

~Do you have a special CORS setup enabled?~
~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?~
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 commented 6 months ago

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

Further questions:

~Do you have a special CORS setup enabled?~

~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?~

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 commented 6 months ago

@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 commented 6 months ago

@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 commented 6 months ago

@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 commented 6 months ago

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

sail composer update

- Upgrading laravel/horizon (v5.24.2 => v5.24.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>

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.



@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 commented 6 months ago

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

driesvints commented 6 months ago

Gonna close this but feel free to continue to discuss.

gkarkow-digi commented 6 months ago

@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!

laravel / horizon