How to load a javascript module with jquery

Question

I'm loading a javascript file using jquery with the usual:

// file application.js
$.getScript("module.js", function(data, textStatus, jqxhr) { ... });

So far so good. Except that module.js uses a function declared in another module i.e., it contains the statement:

// file module.js
import { myFunction } from './library.js';

When the browser loads my application, it complains that:

Cannot use import statement outside a module

Is there a way to load the script module.js as a module?

Thanks

Bear in mind import isn't supported by any of the MS browsers. Your likely going to want to use something like webpack to transpile your code into something with better support. — Liam
– Liam, Commented Nov 6, 2019 at 8:26
Thank you @Liam . Let's say my application runs only on chrome: is there a way to solve my problem? — Daniele Pallastrelli
– Daniele Pallastrelli, Commented Nov 6, 2019 at 8:31
Well one issue is, module.js does not include the code for library.js. So you can't just load that one js file. Again precompilation should solve this as it can bundle the whole application into one file. I'd still be looking at webpack or some other compiler — Liam
– Liam, Commented Nov 6, 2019 at 9:04

rokiuk · Accepted Answer · 2020-05-04 23:33:38Z

1

Try loading the script in the html file as

  <script type="module" src="module.js"></script>

answered May 4, 2020 at 23:33

rokiuk

111 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Daniele Pallastrelli Over a year ago

Actually the point of my question is loading modules using javascript because I take the list of modules from a DB :-)

dearsina Over a year ago

Did you solve this ever? I'm running into the same issue.

woif00 · Accepted Answer · 2022-05-05 06:18:46Z

0

You cannot load other modules unless you declare your own script also a module.

So if your javascript is inline code you can do:

<script type="module"> ... $.getScript("module.js", function(data, textStatus, jqxhr) { ... }); ... </script>

The problem I ran into using this approach is, while using jQuery you also have to also import jQuery as Module.

There's another thread on how to do that here I liked the solution from Yukulélé.

Depending on how many other scripts you have this might be a load of work, or if you're using a lot of external scripts this might not work at all.

answered May 5, 2022 at 6:18

woif00

11 bronze badge

Comments

Uchenna Adubasim · Accepted Answer · 2023-11-27 04:57:54Z

0

This worked for me:

I put an empty placeholder for the Script in HTML:

&lt;script id="loadlater" type="module"&gt;&lt;/script&gt;

and later with jquery I loaded it by setting the src attribute:

$("script#loadlater").attr("src","/js/myModuleScript.js");

edited Nov 27, 2023 at 4:57

Uchenna Adubasim

5,4487 gold badges16 silver badges36 bronze badges

answered Nov 21, 2023 at 17:54

Cem Edisboylu

14 bronze badges

Collectives™ on Stack Overflow

How to load a javascript module with jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related