Giter Club home page Giter Club logo

Comments (13)

kiddtang avatar kiddtang commented on May 25, 2024 1

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)
  1. 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>
  1. 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.

from horizon.

driesvints avatar driesvints commented on May 25, 2024

@mmachatschek another one ^

from horizon.

mmachatschek avatar mmachatschek commented on May 25, 2024

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

from horizon.

kiddtang avatar kiddtang commented on May 25, 2024

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

from horizon.

gkarkow-digi avatar gkarkow-digi commented on May 25, 2024

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

Using Laravel Mix.

from horizon.

mmachatschek avatar mmachatschek commented on May 25, 2024

@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

from horizon.

kiddtang avatar kiddtang commented on May 25, 2024

@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

image

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

from horizon.

mmachatschek avatar mmachatschek commented on May 25, 2024

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

from horizon.

kiddtang avatar kiddtang commented on May 25, 2024

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

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).

from horizon.

mmachatschek avatar mmachatschek commented on May 25, 2024

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

from horizon.

mmachatschek avatar mmachatschek commented on May 25, 2024

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

from horizon.

driesvints avatar driesvints commented on May 25, 2024

Gonna close this but feel free to continue to discuss.

from horizon.

gkarkow-digi avatar gkarkow-digi commented on May 25, 2024

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

from horizon.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.