The browser console gets stucked when load editor resources

Developing Nodes
1

Hi,
I am trying to load editor resources following Loading extra resources in the editor : Node-RED (nodered.org)

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

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

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

and lower-case node is defined like this

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

<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

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

<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";
        }
})
2

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 :thinking:), not the name of a single node in your module.

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

3

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

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

{
    "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

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

4

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

1 Like
5

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

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

6

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

7

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.

8

Try moving it below the registration script.

Otherwise, use $.get or $.getScript in your oneditprepare to get the script functions.

9

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

1 Like
10

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

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

1 Like
11

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

1 Like
12

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.

13

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