Javascript files as ES6 modules

Hi
I’m new to Bootstrap Studio and I’m trying to use javascript with ES6 classes. When I’m defining and exporting a class in a file I cannot import it into another file using ES6 import statements. The error message I get is “Uncaught SyntaxError: Cannot use import statement outside a module”. When I look into the exported app’s index.html I see that the generated script tags are not of “type=module”. If I change that manually everything works fine. My question: I there a better way of telling Bootstrap Studio that certain js-file should be treated as ES6 modules?

cheers Peter

Currently there is not a way to add a attribute to a html script tag. It would be a nice feature improvement I think.

You could also automate the editing process with a export script found under export settings. Various other external editing ideas after export have been put forth in the forums.

Also, the custom code component would allow you to insert the script tags with the attributes but you lose some functionality with the visibility settings etc.

Hi twinstream,

thanks for your reply. It would really be a nice feature improvement, nothing ground breaking but useful. I thought briefly of using export scripts, because there are also other “post-processing” tasks that I have to perform. My current approach, that I already used in similar contexts, is to use node-red based pipeline that is triggered by a file/directory watcher for the export target. I use node-red in many mostly IoT related scenarios so I have it installed anyway. I can use all of their existing nodes for transformations and I can write new re-usable ones. On the long run I prefer that approach to write hardly re-usable custom scripts.

Using the custom code component sounds like a good tip, but as I already said I’m new to BSS. So the question: What do you mean by loosing “some functionality with the visibility settings”?

peter

If you right click over a js file you will see the settings which include visibility which is self-explanatory.

If you make a new html page so you have untitled.html.
right click on your module.js file and click on visibility and choose show on only these pages and mark untitled.html.
Delete the untitled.html.
If you use minify when exporting keep in mind your module.js will change name to module.min.js

Add this to a Js File

const jsModulFile = "Your-module-File.js";
let myModule = document.createElement("script");
myModule.setAttribute("type", "module");
myModule.setAttribute("src", jsModulFile);
document.getElementsByTagName("head")[0].appendChild(myModule);

Thats helpful. Bootstrap 5 I believe will let you import modules for the javascript.

1 Like