[SOLVED] (After migrating to Vite) Some stacked scripts are executed before they should?

(After migrating to Vite) Some stacked scripts are executed before they should?

so I just migrated to Vite, and almost everything works, except... In a Blade component I'm adding a script to my scripts stack :

@push('scripts')
    <script>
        myfoo();
    </script>
@endpush

In app.js I have defined

window.myfoo = () => {
    console.log(111);
}

And I get an error Uncaught ReferenceError: myfoo is not defined. It worked before with Webpack. If I call myfoo() in the console it works. If I setTimeout the call a bit it works.

Of course in my layout they're in the correct order :

@vite('resources/js/app.js') {{-- Previously <script src="{{ mix('js/app.js') }}"></script> --}}
@stack('scripts')

I can force the call to wait for DOMContentLoaded but honestly I just don't understand the issue. Thanks ahead.

Solution

So it's because the script is tagged as type="module", its execution seems to be delayed. The solution is to makr the depending script as type="module" too.

@push('scripts')
    <script type="module">
        myfoo();
    </script>
@endpush