How to make a node HTML script load a .js module?

General
1

This is probably a basic question, sorry for that; I am not an experienced client-side programmer.

How can I make a node HTML script load a .js module? I am developing a node-red package. The HMTL script files of several of the nodes in the package need the same javascript functions. I would like to put them in a common .js file and have the scripts load that file.

I tried inserting the following line in the script:
import { foo} from './module.js'
but this doesn't does work.

I also tried adding the following line in the HTML files:
<script type="module" src="module.js"></script>
I can see on the browser console that the browser refuses to load the .js file because of a MIME type issue.
Loading module from “http://127.0.0.1:1880/module.js” was blocked because of a disallowed MIME type (“text/html”).

2

Modules are not fully supported by all browsers so check whether yours does.

But assuming that your file is actually just plain JavaScript, you should load it as such and not as a module.

3

Thank using the current version of Firefox.

Also, if I use an import statement the error i seen on the Firefox console is:

SyntaxError: import declarations may only appear at top level of a module

4

... and Chrome says:

Uncaught SyntaxError: Cannot use import statement outside a module

5

So don't use a module which means don't use import?

I think that Chromium based browsers need to use a particular extension for modules?

Here is some info on modules:

6

There is a more fundamental issue here. There's nothing in the runtime that knows how to serve up the extra .js file to the browser. So whether it's a module/import or not is actually irrelevant.

To get this to work, you'd have to add a custom admin endpoint to your node that can be used to serve up the extra content.

You can see this in action with the geofence node. Here's how the custom admin endpoint is setup - https://github.com/hardillb/node-red-node-geofence/blob/master/geofence.js#L114

And how its loaded dynamically in the editor - https://github.com/hardillb/node-red-node-geofence/blob/master/geofence.html#L192 - although I'm not sure if the getScript method is needed, or if it can just be a <script src="....."> tag.

7

Thanks a lot. I did vaguely suspect there was something needed to get this file properly served.
Reading the geofence code, I also realize I don't really know exactly what the object RED is but I can't find it referred to in the available doc.
Do you mind indicating where to look for some explanation ?
Thanks.

8

There are not full docs for the RED object, other than what is covered in https://nodered.org/docs/creating-nodes/

In this instance "creating custom http endpoints" has been on the todo list for those docs for about 5 years....

9

For reference, there's a whole load of endpoints defined in uibuilder. Hopefully reasonably well documented.

10

Thanks a lot, Nick. And for the benefit of anyone who would come across this thread, I also refer to you very own and very good post on the topic here: https://github.com/node-red/cookbook.nodered.org/wiki/Create-an-admin-configuration-API-endpoint

11

Thanks, Julian. I`ll dive into uibuilder at some point, it looks very flexible.

12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.