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

**URL:** <https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723>\
**Category:** General\
**Created:** [14 February 2020 20:33 UTC](https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723 "2020-02-14T20:33:36Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![CABrouwers](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@CABrouwers](https://discourse.nodered.org/u/CABrouwers)\
**Post date:** [14 February 2020 20:33 UTC](https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723/1 "2020-02-14T20:33:37Z")

</div>

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”](http://127.0.0.1:1880/module.js%E2%80%9D) was blocked because of a disallowed MIME type (“text/html”)._

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 February 2020 21:06 UTC](https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723/2 "2020-02-14T21:06:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![CABrouwers](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@CABrouwers](https://discourse.nodered.org/u/CABrouwers)\
**Post date:** [14 February 2020 21:14 UTC](https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723/3 "2020-02-14T21:14:51Z")

</div>

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_

---

<div class="post-metadata">

**Author:** ![CABrouwers](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@CABrouwers](https://discourse.nodered.org/u/CABrouwers)\
**Post date:** [14 February 2020 21:16 UTC](https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723/4 "2020-02-14T21:16:32Z")

</div>

... and Chrome says:

Uncaught SyntaxError: Cannot use import statement outside a module

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 February 2020 21:42 UTC](https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723/5 "2020-02-14T21:42:16Z")

</div>

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:

> **[JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)**
>
> This guide gives you all you need to get started with JavaScript module syntax.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [14 February 2020 21:52 UTC](https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723/6 "2020-02-14T21:52:12Z")

</div>

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](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](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.

---

<div class="post-metadata">

**Author:** ![CABrouwers](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@CABrouwers](https://discourse.nodered.org/u/CABrouwers)\
**Post date:** [14 February 2020 22:38 UTC](https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723/7 "2020-02-14T22:38:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [14 February 2020 22:40 UTC](https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723/8 "2020-02-14T22:40:07Z")

</div>

There are not full docs for the `RED` object, other than what is covered in [https://nodered.org/docs/creating-nodes/](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....

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 February 2020 22:42 UTC](https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723/9 "2020-02-14T22:42:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CABrouwers](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@CABrouwers](https://discourse.nodered.org/u/CABrouwers)\
**Post date:** [15 February 2020 11:59 UTC](https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723/10 "2020-02-15T11:59:24Z")

</div>

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](https://github.com/node-red/cookbook.nodered.org/wiki/Create-an-admin-configuration-API-endpoint)

---

<div class="post-metadata">

**Author:** ![CABrouwers](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@CABrouwers](https://discourse.nodered.org/u/CABrouwers)\
**Post date:** [15 February 2020 12:07 UTC](https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723/11 "2020-02-15T12:07:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [15 April 2020 12:07 UTC](https://discourse.nodered.org/t/how-to-make-a-node-html-script-load-a-js-module/21723/12 "2020-04-15T12:07:36Z")

</div>

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