Text/javascript vs module in html

Developing Nodes
1

I changed the text/javascript to module in my html file.
Here is a snippet:

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

<script type="module">
  import { fetchData } from "../nodeRedFunctions/menuUtils.js";
  
  RED.nodes.registerType("measurement", {
    category: "digital twin",
    color: "#e4a363",

This seems to work just fine so no problems here. Only Im wondering seeing that this behaves in a total different way if everything still works fine or am I missing something ? I thought that text/javascript was global and modules were not.

Thanks for the doublecheck !

2

Assuming that you don't need to support older browsers, if it is working, there shouldn't be any issues I don't think.

One thing to note about browser-based modules is that they automatically isolate the code - this should not be a problem though and indeed, is preferred - I always wrap my editor scripts in an IIFE anyway.

You do seem to be loading menuUtils twice though which you should not need to do. Best to load it just using an import from your main module.

1 Like
3

Yeah cheers for the second tip I figured that out as well :smile:
I just needed this part :

<script type="module">
  import { fetchData } from "../nodeRedFunctions/menuUtils.js";
4

Also, don't forget that each node package (collection of nodes in a single npm package) has the option for a resources folder which is auto-mounted to the Editor like so:

<script src="./resources/node-red-contrib-uibuilder/uibuilder.js"></script>

I load all my node Editor JS this way now as it makes the html file a lot simpler and also makes editing much easier as well.

And not forgetting that a node package can define an Editor plugin as well as nodes. I use this to load a set of standard functions for uibuilder nodes.

Thanks to your prompt, I've started to change my nodes to use modules for the editor JS. :slight_smile:

Oh, 1 final possible thing to catch you out. I don't believe that modules will set global variables without using window or globalThis because a module is isolated automatically. Doesn't matter to me since I was already isolating my editor code in an IIFE but if you weren't doing that, it is possible that you might have accidentally put something into the global context and now it won't be. Mostly that's good of course.

As an example, I have this in my editor js:

const uibuilder = window['uibuilder']

Which makes sure that I have a local reference to the global uibuilder object that is created in my Editor plugin.