Problems with loading Javascript (Alpine / ApexCharts)
When i load the dashboard for the first time on the production server, i get a bunch of JS-Errors in the Browser Console and Toggle-Buttons from WireUI or Apexcharts aren't loaded. When i reload the page, everything works fine. On the local Enoirement (XAMPP Windows) these Errors don't appear.
Here is the -Part of app.blade.php (the most top Layout-Blade):
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link href="https://fonts.cdnfonts.com/css/cocogoose" rel="stylesheet" />
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
@wireUiScripts()
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
When loading the Page for the first time, i get dozends of Errors in the Browser Console. They all look like this:
livewire.js?id=4495682f:1196 Uncaught ReferenceError: date is not defined at [Alpine] date.isDisabled (eval at safeAsyncFunction (livewire.js?id=4495682f:1243:21), :3:32) at livewire.js?id=4495682f:1265:23 at tryCatch (livewire.js?id=4495682f:1185:14) at livewire.js?id=4495682f:3437:19 at reactiveEffect (livewire.js?id=4495682f:2359:18) at Object.effect2 [as effect] (livewire.js?id=4495682f:2334:7) at effect (livewire.js?id=4495682f:726:35) at wrappedEffect (livewire.js?id=4495682f:742:29) at Function.handler2 (livewire.js?id=4495682f:3437:5) at flushHandlers (livewire.js?id=4495682f:1347:48)
I know what it means, but i call all the JS-Funktions after the Head-Tag.
When i look in the compiled HTML-Code it looks like this:
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>window.Wireui = {hook(hook, callback) {window.addEventListener(`wireui:${hook}`, () => callback())},dispatchHook(hook) {window.dispatchEvent(new Event(`wireui:${hook}`))}}</script>
<link rel="stylesheet" href="https://www.wettprofi.eu/build/assets/app-BmTdjf4W.css" data-navigate-track="reload"><script type="module" src="https://www.wettprofi.eu/build/assets/app-CifqVuM1.js" data-navigate-track="reload"></script> <!-- Livewire Styles --><style>[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style>
So it looks like he defines the Livewire Variables before loading the library?! What am i'm doing wrong?
Thanks in advance for your efforts.
Please or to participate in this conversation.