cookies - How to import a javascript library CDN into a javascript file and use that same library in that file?

Question

This might be a little confusing - I'm trying to retrieve the value of a cookie from inside a js file and to do this im using the js-cookie library over a CDN create from the JS file. However Cookies is undefined when i try to access the library.

I'm wondering what the problem is and what my best option is to do this?

var jQueryScript = document.createElement("script");
jQueryScript.setAttribute(
  "src",
  "https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"
);
jQueryScript.setAttribute("type", "module");
document.head.appendChild(jQueryScript);

// Cookies.get is not defined.
var cookieval = Cookies.get("shopOrigin");
console.log(cookieval);

Any help would be much appeciated, it is most likely something simple i am missing. Thanks

question from:https://stackoverflow.com/questions/65916379/how-to-import-a-javascript-library-cdn-into-a-javascript-file-and-use-that-same

Answer 1

    const loadScript = url => new Promise((resolve, reject) => {
      const node = document.createElement('script')
      node.setAttribute('src', url)
      node.onload = resolve
      node.reject = reject 
      document.body.appendChild(node)
    })

    loadScript('//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js')
      .then(() => {
        // do your job here
        console.log(window.Cookies)
      })