Import Nats.js library into custom widget javascript

Developer
,
1

Hi, I am trying to create a custom widget using nats.js library to connect with nats server.
I am follwing the documentation - https://github.com/nats-io/nats.js/blob/main/runtimes.md#running-in-the-browser

I want to import websocket library - @nats-io/nats-core into the code using url - https://cdn.jsdelivr.net/npm/@nats-io/nats-core@3.0.2/lib/nats.min.js) and url - (https://cdn.jsdelivr.net/npm/@nats-io/nats-core@3.0.2/+esm)

I am getting error -

Failed to load NATS.js: {}

could you please help me with what steps to take in order to load external library?

1 Like
2

@OlgaStroilova @Beth could you please guide me on this?

3

hi @p.bhagwan.gaikwad - we have a long weekend here with Memorial Day and responses may be delayed.

Please reach out to Support or Office Hours for more advanced questions like this.

Here’s a possible workaround to try before Office Hours next week:

Supported method for external libraries: Custom Widgets Overview
Workaround for libraries like NATs:

(async function MyWidget(start){ await start; // awaits loaded CDN imports

// Put your custom widget code here:

//

/*
        Load Scripts
*/
})((async function loadScripts(...urls) 
{
  for (const thisUrl of urls) 
  {
    console.log(`Loading script "${thisUrl}"...`);

    const response     = await fetch(thisUrl);
    const responseBody = await response.text();

    const scriptElm  = document.createElement("script");
    const inlineCode = document.createTextNode(responseBody);
    
    scriptElm    .appendChild(inlineCode);
    document.body.appendChild(scriptElm);

    console.log(`Script "${thisUrl}" successfully loaded`);
  }
})(
    "myExampleUrl1",
    "myExampleUrl2",
));
/*
    Place any CDN urls above, this is a workaround for the Content Policies
*/
  • Olga
4

sure @OlgaStroilova will try these steps until then!

5

@p.bhagwan.gaikwad please see updated suggestion in my post above.

6

image
image1871Ă—701 76.7 KB

@OlgaStroilova Using above solution I am getting the error as show in the screenshot.
is there a specific build of the library required for custom widget?

7

Seems like that your code is executed before the required libraries are loaded properly.. you should switch loadScripts and the your code.

1 Like
8

image
image1892Ă—198 21.2 KB

I did as you suggested @tokotu but I am still getting above error, and Additionally I checked browser console, looks like nats.js url is not valid.
Is there a specific build of url needed to load into custom widget?

9

I’ve forwarded this internally for triage.

10

@p.bhagwan.gaikwad it looks like the error is saying the URL is not valid. Looks like the URL in your second post is indeed not valid but the original one is loading:

https://cdn.jsdelivr.net/npm/@nats-io/nats-core@3.0.2/lib/nats.min.js

11

@OlgaStroilova it’s the same issue, the url is loading but its giving error as well.
In browser, it’s not allowing me to use library with “export” or “require”
I am trying to build and UMD version of the nats.js library side by side if there is no working URL.

image
image1887Ă—749 89.8 KB

12

Hello,

That JS package does not appear to be directly usable in the browser. You need to run the code through a JS bunder to transpile it to a syntax that the browser can use.

Here is an online bundler that seems to work: bundlejs - Online bundler + npm package size checker
You need to copy the js string in “output” tab into the custom widget.

1 Like