Loading javascripts in a certain order

[nitzanto]

Hi everyone,
I'm looking for a way to ensure that a specific JavaScript file (msw_init) is loaded before another one (layout) when using Shakapacker.

For example, I tried these approaches:

1.
= append_javascript_pack_tag('layout')
= javascript_pack_tag('msw_init')

2.
= prepend_javascript_pack_tag('msw_init')
= javascript_pack_tag('layout')

3.
= javascript_pack_tag('msw_init', 'layout')

However, I'm encountering a race condition where sometimes layout is loaded before msw_init, which breaks the expected behavior.

Is there a reliable way to ensure that msw_init is always loaded before layout and only then to load layout, either through configuration or by changing the way the packs are imported?

I'm trying to use MSW JS for my react on rails app: https://mswjs.io/

[tomdracz]

Try using defer: false attribute i.e. something like:

= javascript_pack_tag('msw_init', 'layout', defer: false)

or

prepend_javascript_pack_tag 'msw_init', defer: false
= javascript_pack_tag 'layout'

I would have half expected this to work without it though since defer should retain load order. Wondering if there are any side effects that end up messing this up here. Ref

If that still doesn't work, can you post the generate HTML script tags that you end up with?

[Judahmeek]

Yes, defer should retain load order, which means that there's async logic somewhere.

Possibly an eventlistener running a callback?