vite_javascript_tag in content rendered by UJS

[scmyers11]

Is it possible to use vite_javascript_tag in content rendered by a UJS call? Say a click that returns js + html to open a modal and initialize a new Vue instance in the modal? When rendering a javascript_pack_tag, the JS code was run immediately by the browser after it was fetched. With Vite that appears not to be the case.

[ElMassimo]

Hi Stephen!

Would you share a small example or repo where you are using this pattern with Webpacker?

The vite_javascript_tag renders a script tag—the only difference is that the script type is module.

Modules are only executed once, even if they have been referenced in multiple <script> tags.

For example, if you are relying on side-effects in the script but had previously imported it, the browser wouldn't execute it again the second time it's referenced.

HTML5 specifies that a <script> tag inserted with innerHTML should not execute.

Another reason for the script not executing would be the use of innerHTML to inject the script.

---

As @scmyers11 points out in the comment below, this seems to be the related to the lack of support for type="module" scripts in jQuery versions older than 3.6.

[scmyers11]

@ElMassimo Thanks for getting back to me! I put together this quick demo repo of the functionality in Webpacker and then a vite branch that does a quick migration to Vite and attempts the same pattern. The demo functions exactly the same as the application I am having issues with.

[scmyers11]

Based on a little more research this could be related to using jQuery's handling of module type script tags.

[scmyers11]

@ElMassimo Based on this PR from jquery - jquery/jquery#3869, support for eval() of modules wasn't added until jQuery 3.6, but jquery-rails is still on version 3.5.1 which explains this issue. Switching to jQuery 3.6 appears to fix this specific issue.

[ElMassimo]

Excellent, thanks for sharing your research, should be helpful for anyone that runs into the same issue 😃