1

I am using a Laravel application and Laravel Mix for asset building.

I was trying to use Glide.js this evening and did the following after installing glide.js via npm.

Within my resources/js/app.js file I have this contents:

require('./bootstrap');

import Glide from '@glidejs/glide'
new Glide('.glide').mount();

My webpack.mix.js filed which is compiled by Laravel Mix, looks like this:

mix.copyDirectory('resources/img', 'public/img')
    .js('resources/js/app.js', 'public/js')
    .version();

When I now load the frontend, my slider does not work - it throws an JS error : [Glide warn]: Root element must be a existing Html node

When I change my script tag from:

<script src="{{ mix src='js/app.js' }}"></script>

To

<script src="{{ mix src='js/app.js' }}" type="module"></script>

It works - but is this really necessary? I have never read about type=module in combination with mix. Is this always necessary once the main js has "import" statements?

Torben
  • 5,388
  • 12
  • 46
  • 78
  • I use Laravel Mix on a daily basis, and have had never used the `type=module`. Your error seems to be something else, maybe see this: https://stackoverflow.com/questions/52692950/glide-warn-root-element-must-be-a-existing-html-node-typeerror-this-root-is – Siddharth Bhansali Dec 05 '21 at 14:51
  • Yep, it's weird - but I have only one slider on the page and therefore only one element with the class `.glide` – Torben Dec 05 '21 at 17:02
  • Yeah I saw that, instead of `{{ mix src='js/app.js' }}`, could you use `{{ asset('/js/app.js') }}` and see if it makes any difference? – Siddharth Bhansali Dec 06 '21 at 05:48
  • asset is not known here in my antlers template (I use Statamic, so maybe that's why) – Torben Dec 06 '21 at 08:37
  • Hmm, maybe try executing the script after the DOM is loaded. Maybe the script is getting called before the element is printed on the DOM. – Siddharth Bhansali Dec 06 '21 at 11:18
  • Yep, I think it's a race condition and once I use `defer` in my script tag it works as well. So maybe `type=module` does some kind of "defer" as well... – Torben Dec 06 '21 at 19:22
  • Yeah it seems like it. – Siddharth Bhansali Dec 07 '21 at 06:33

0 Answers0