Why can't modules be imported in standard JavaScript?

user_1777526 0
Viewed 374

I need to use a Javascript library (https://unpkg.com/troika-3d-text@0.19.0/dist/textmesh-standalone.esm.js?module) which is only delivered as a module. When I try to import the class TextMesh in my non-module script build.js, the console gives me that error-message:

Cannot use import statement outside a module

So I needed to make build.js a module. But I have many non-module scripts, which are dependant from that build.js, which now also need to become modules. And I have many other non-module scripts, which are dependant from them, which then also need to become modules. And so on, ...

Where is my misunderstanding of the concept of JavaScript modules, because it can't be the intent of modules, that all scripts which are (in)directly dependant from that 'first' module, must become a module, too?!

javascript
3 Answers

You can use dynamic import() even in non-module scripts:

(async()=>{
const { TextMesh } = await import("https://unpkg.com/troika-3d-text@0.19.0/dist/textmesh-standalone.esm.js?module");
console.log( TextMesh );
})();

user_37027970

Include the script attribute module:

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

If you want to use the modules modules from a Node.js environment, name the files with the extension .mjs and use this command to run the file:

node --experimental-modules jsFile.mjs
user_120115750

You must tell the browser that the script is a module by using the type="module" attribute e.g

<script src="source_url" type="module"></script>

user_140389070
Related