# Undefined class when using external js script

**URL:** <https://discourse.nodered.org/t/undefined-class-when-using-external-js-script/14993>\
**Category:** Developing Nodes\
**Created:** [1 September 2019 09:30 UTC](https://discourse.nodered.org/t/undefined-class-when-using-external-js-script/14993 "2019-09-01T09:30:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [1 September 2019 09:30 UTC](https://discourse.nodered.org/t/undefined-class-when-using-external-js-script/14993/1 "2019-09-01T09:30:46Z")

</div>

Hi folks,

I'm trying (in my node's config screen) to instantiate a class that is supplied in a third party javascript [file](https://github.com/SVG-Edit/svgedit/blob/master/editor/embedapi.js). Summarized it contains something like this:

```auto
...
class EmbeddedSVGEdit {
   ...
}
...
export default EmbeddedSVGEdit;

```

Found some code snippets on the internet (for that same file!) that do it like this:

```auto
<script src="https://github.com/SVG-Edit/svgedit/blob/master/editor/embedapi.js"></script>
<script>
   ...
  oneditprepare: function() {
      new EmbeddedSVGEdit(myOwnIframe);
  }
   ...
</script>

```

However that results in an error "_ **Uncaught ReferenceError: EmbeddedSVGEdit is not defined** _".

So I thought this might be a _ **timing** _ issue, i.e. my oneditprepare being executed before the embedapi.js file is being loaded. So I changed my code to load the file via jQuery and add a (success) _callback handler_ function:

```auto
<script>
   ...
  oneditprepare: function() {
      $.getScript( "https://github.com/SVG-Edit/svgedit/blob/master/editor/embedapi.js", function( data, textStatus, jqxhr ) {
          if (jqxhr.status == 200) {
               new EmbeddedSVGEdit(myOwnIframe);
          });
  }
   ...
</script>

```

But then the same error 🥴

Does anybody have a clue what I'm doing wrong?

Thanks !!  
Bart

---

<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:** [1 September 2019 09:35 UTC](https://discourse.nodered.org/t/undefined-class-when-using-external-js-script/14993/2 "2019-09-01T09:35:07Z")

</div>

At a glance, the url for the script you are using is to its github page and not the raw script itself.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [1 September 2019 09:53 UTC](https://discourse.nodered.org/t/undefined-class-when-using-external-js-script/14993/3 "2019-09-01T09:53:17Z")

</div>

Morning Nick,  
OMG. This can't be true.  
I wanted to add that file to my svg-node's repository later on, and publish it automatically when the config screen requested it. But I thought: let's first load it directly from the web, and if that works I can use it locally. Completely forgotten that I had to use the raw file instead ...  
Thanks for that already !!!!!

So I have changed my code to use the **raw file** :

```auto
$.getScript( "https://raw.githubusercontent.com/SVG-Edit/svgedit/master/editor/embedapi.js", function( data, textStatus, jqxhr ) {
     if (jqxhr.status == 200) {
          node.embeddedSvgEdit = new EmbeddedSVGEdit(iFrame); 
     }
});

```

But still same error:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/86ce2b94e93b9d6fefe438b2de45a22d18317c89.png)

This is the content of the input parameters I receive in the callback function:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f601cb4c5e8ec7ffb409bb81783412400f8573df.png)

I assume that all content in the file will be loaded by the Javascript runtime, as soon as I arrive in the callback? Or is the raw file also not correct, and should I load it locally?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [1 September 2019 10:30 UTC](https://discourse.nodered.org/t/undefined-class-when-using-external-js-script/14993/4 "2019-09-01T10:30:21Z")

</div>

Unless somebody sees another problem, I will try this evening to load the file from a local location. Currently it seems to be loaded correctly, and this is confirmed by what I see in the '_network_' tab of Chrome's developer tools:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e2f7fe7eb3367935adc1800cbc25bca9d1be127c.png)

However I have a warning in my Chrome console log:

> vendor.js:5 Cross-Origin Read Blocking (CORB) blocked cross-origin response [https://raw.githubusercontent.com/SVG-Edit/svgedit/master/editor/embedapi.js?\_=1567333419781](https://raw.githubusercontent.com/SVG-Edit/svgedit/master/editor/embedapi.js?_=1567333419781) with MIME type text/plain. See [Chrome Platform Status](https://www.chromestatus.com/feature/5629709824032768) for more details.

Don't understand why this happens, moreover since (see screenshot) Github seems to allow cross origin usage of the files...

But perhaps this blocking issue explains why the 'data' part of my response handler is undefined??

Anyway will try it locally to make sure ...

---

<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:** [1 September 2019 20:05 UTC](https://discourse.nodered.org/t/undefined-class-when-using-external-js-script/14993/5 "2019-09-01T20:05:52Z")

</div>

Taking a closer look, the file you're trying to load is a javascript module. So in theory you need `type="module"` as an attribute of your `<script>` tag. Although I've not used modules in the browser before, so I could be wrong.

> **[Using ES Modules in the Browser Today — SitePoint](https://www.sitepoint.com/using-es-modules/)**
>
> Mark Brown shows how you can use ES modules in the browser today, moving away from module loaders to bundle dependencies into a single ES5 file.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [1 September 2019 21:45 UTC](https://discourse.nodered.org/t/undefined-class-when-using-external-js-script/14993/6 "2019-09-01T21:45:34Z")

</div>

> [@knolleary](#):
>
> Although I've not used modules in the browser before, so I could be wrong.

Nope Nick, you are again damn right! I had never heard of those ES6 modules before, but it seems that this was the golden tip I was waiting for...

Here a summary in case anybody ever needs it:

- _ **Server side** _: this part wasn't really necessary for this problem, but I wanted to have the file locally available. So I have added the embedapi.js to my own Github repository and I created an endpoint to make this file available:

- _ **Client side** _: here I load the ES6 module dynamically (i.e. not via a tag) and instantiate the class specified in it.

Really appreciate you did some looking up for me !!!!!!!!!!!!