# The browser console gets stucked when load editor resources

**URL:** <https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409>\
**Category:** Developing Nodes\
**Created:** [9 January 2024 07:06 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409 "2024-01-09T07:06:52Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![abu](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@abu](https://discourse.nodered.org/u/abu)\
**Post date:** [9 January 2024 07:06 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409/1 "2024-01-09T07:06:52Z")

</div>

Hi,  
I am trying to load editor resources following [Loading extra resources in the editor : Node-RED (nodered.org)](https://nodered.org/docs/creating-nodes/resources)

step 1  
make the resources directory `/app/nod_red/lower_case/resources`, like this

```auto
-rw-r--r-- 1 root root 3.1K Jan 9 13:48 1704778565817.png
-rw-r--r-- 1 root root 2.9K Jan 9 13:48 17047786206814.png
-rw-r--r-- 1 root root 3.7K Jan 9 13:48 17047786723943.png
-rw-r--r-- 1 root root 50 Jan 9 13:31 add.js

```

add.js has a function defined.

```auto
function add(num1, num2)
{
        return num1 + num2;
}

```

and lower-case node is defined like this

```auto
drwxr-xr-x 4 root root 288 Jan 9 10:06 locales/
-rw-r--r-- 1 root root 3.0K Jan 9 14:28 lower-case.html
-rw-r--r-- 1 root root 1.5K Jan 9 10:17 lower-case.js
-rw-r--r-- 1 root root 152 Jan 8 14:13 package.json
drwxr-xr-x 2 root root 464 Jan 9 13:48 resources/

```

step 2  
add a img tag in lower-case.html, like this

```auto
<script type="text/html" data-help-name="lower-case">
    <p data-i18n="lower-case.help-text">
        <img src="resources/lower-case/17047786723943.png" />
        <span id = "span_id"/>
    </p>
</script>

```

and the picture is shown correctly in browser console,  
 ![17047834751151](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/e/0e1dce0dda6e68272b1e7a2c29fe4c0600426f80.png)

step 3,  
add ` <script src="resources/lower-case/add.js">` to the begin of lower-case.html, restart node red, refresh browser, and the load page gets stucked

```auto
<script src="resources/lower-case/add.js">
<script type="text/javascript">
    RED.nodes.registerType('lower-case',{
        category: 'function',
        color: '#a6bbcf',
        defaults: {
            name: {value:""},
            username:{value:""},
            server: {value:"localhost", type:"remote-server"}
        },
        inputs: 1,
        outputs: 1,
        icon: "file.svg",
        label: function() {
            return this.name||"lower-case";
        }
})

```

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [9 January 2024 08:48 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409/2 "2024-01-09T08:48:17Z")

</div>

> [@abu](#):
>
> `<script src="resources/lower-case/add.js">`

are you sure that **lower-case** is the name of your entire module?

It should be one of

- @developer/node-red-lower-case
- node-red-contrib-lower-case

It should be the name of what you set in the top of the package.json file (or root folder name, I can’t remember 🤔), not the name of a single node in your module.

Also remember to close your script tag : `</script>`

---

<div class="post-metadata">

**Author:** ![abu](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@abu](https://discourse.nodered.org/u/abu)\
**Post date:** [9 January 2024 09:20 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409/3 "2024-01-09T09:20:51Z")

</div>

Thanks marcus-j-davies,  
lower-case is the root directory of lower-case node, its content are:

```auto
drwxr-xr-x 4 root root 288 Jan 9 10:06 locales/
-rw-r--r-- 1 root root 3.0K Jan 9 14:28 lower-case.html
-rw-r--r-- 1 root root 1.5K Jan 9 10:17 lower-case.js
-rw-r--r-- 1 root root 152 Jan 8 14:13 package.json
drwxr-xr-x 2 root root 464 Jan 9 13:48 resources/

```

here is the content of package.json

```auto
{
    "name" : "node-red-contrib-example-lower-case",
    "node-red" : {
        "nodes": {
            "lower-case": "lower-case.js"
        }
    }
}

```

I change `<script src="resources/lower-case/add.js">` to `<script src="resources/node-red-contrib-example-lower-case/add.js"/>`, and the browser console can not load the lower-case node correctly  
 ![1704791923897](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/e/1eff7626aefd560c581261b9797f1f173d614df0.png)

I change `<script src="resources/lower-case/add.js">` to `<script src="resources/lower-case/add.js"/>`, the browser console is still stucked.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 January 2024 09:27 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409/4 "2024-01-09T09:27:36Z")

</div>

> [@abu](#):
>
> I change `<script src="resources/lower-case/add.js">` to `<script src="resources/lower-case/add.js"/>`, the browser console is still stucked.

try `node-red-contrib-example-lower-case` instead of `lower-case` as usggested by @marcus-j-davies

> [@marcus-j-davies](#):
>
> It should be one of
> 
> - @developer/node-red-lower-case
> - node-red-contrib-lower-case

---

<div class="post-metadata">

**Author:** ![abu](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@abu](https://discourse.nodered.org/u/abu)\
**Post date:** [9 January 2024 09:37 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409/5 "2024-01-09T09:37:00Z")

</div>

I change `<script src="resources/lower-case/add.js">` to `<script src="resources/node-red-contrib-example-lower-case/add.js"/>`, and the browser console can not load the lower-case node correctly  
 ![1704791923897](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/e/1eff7626aefd560c581261b9797f1f173d614df0.png)

I change `<script src="resources/lower-case/add.js">` to `<script src="resources/lower-case/add.js"/>`, the browser console is still stucked.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 January 2024 09:43 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409/6 "2024-01-09T09:43:07Z")

</div>

> [@abu](#):
>
> and the browser console can not load the lower-case node correctly

That is probably an unrelated issue with your code. Attempting to accessing resources may not be what is preventing the node loading in the editor.

- Watch the Node-RED console for errors when you re-start node-red
- Look in the browsers console (devtools) for errors upon refresh

for the time being, disable the `<script src="resources/node-red-contrib-example-lower-case/add.js"/>` line and try to get your node to load in the editor.

Once your node is loading and showing up correctly in the editor, simply try accessing the resource from the browser e.g. `http://localhost:1880/resources/node-red-contrib-example-lower-case/add.js`

---

<div class="post-metadata">

**Author:** ![abu](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@abu](https://discourse.nodered.org/u/abu)\
**Post date:** [9 January 2024 09:59 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409/7 "2024-01-09T09:59:04Z")

</div>

Hi Steve-Mcl,  
after disabling `<script src="resources/node-red-contrib-example-lower-case/add.js"/>`, the lower-case node can be loaded correctly,and I can get add.js from `http://localhost:1880/resources/node-red-contrib-example-lower-case/add.js`, but my idea is writing some functions in a js file as a library and loading them in lower-case.html and then i can use these functions in lower-case.html, so the add.js must be loaded in lower-case.html correctly.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 January 2024 10:11 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409/8 "2024-01-09T10:11:49Z")

</div>

Try moving it below the registration script.

Otherwise, use [`$.get`](https://api.jquery.com/jQuery.get/) or [`$.getScript`](https://api.jquery.com/jQuery.getScript/) in your `oneditprepare` to get the script functions.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [9 January 2024 10:14 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409/9 "2024-01-09T10:14:55Z")

</div>

Also note : self closing script tags don’t work all that well (if at all)

It needs to be` <script>` `</script>`

So your original loading method may work - providing you have the url correct

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [9 January 2024 10:39 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409/10 "2024-01-09T10:39:03Z")

</div>

> [@Steve-Mcl](#):
>
> That is probably an unrelated issue with your code.

If your `add.js` file contains an error, loading will be blocked

Please take a look at your browser console, it contains useful informations

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 January 2024 10:46 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409/11 "2024-01-09T10:46:15Z")

</div>

> [@GogoVega](#):
>
> > [@Steve-Mcl](#):
> >
> > That is probably an unrelated issue with your code.
> 
> If your `add.js` file contains an error, loading will be blocked

Badly worded by me 🤦I meant disabling that script will confirm where the problem is (and I did ask user to check browser console - but they didnt respond 🤷 )

---

<div class="post-metadata">

**Author:** ![abu](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@abu](https://discourse.nodered.org/u/abu)\
**Post date:** [10 January 2024 05:01 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409/12 "2024-01-10T05:01:59Z")

</div>

I change `<script src="resources/node-red-contrib-example-lower-case/add.js"/>` to `<script src="resources/node-red-contrib-example-lower-case/add.js"></script>` and the js file can be load correctly now. Thanks for help.

---

<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:** [24 January 2024 05:02 UTC](https://discourse.nodered.org/t/the-browser-console-gets-stucked-when-load-editor-resources/84409/13 "2024-01-24T05:02:14Z")

</div>

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