Import dynamically external JavaScript module in React component

Question

I have a Javascript module that looks like:

export function test() {
  return "Hello";
}

I need to import this script in React. This is what I tried:

1. Defined a useScript method:

const useScript = ({ onLoad } : { onLoad: any }) => {
  useEffect(() => {
    const script = document.createElement('script');
    script.type = "module";
    script.src = "remote/path/to/test.js";
    script.onload = onLoad
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    }
  }, [onLoad]);
};

2. Use it to load the script in React component:

const getTest = () => {
    window["test"]();
 }

useScript({
  onLoad: getTest
});

This gives me the error:

window.test is not a function

Note, that if I remove export from the JS file then it works. However, I need the export and not sure why adding export breaks it. Any clues?

Edit: Tried using import like this:

  useEffect(() => {
      const getTest = async function() {
        const uri = "https://remote/path/to/test.js";
        const { test } = await import(uri);
        console.log(test());
      }
      getTest();
    }
  }, []);

However, this gives the error:

Unhandled Rejection (Error): Cannot find module

Answer 1

Having export transform your file into a module, which has it own scope and not added to window object. If you need the file on demand consider using import() :

The import() call, commonly called dynamic import , is a function-like expression that allows loading an ECMAScript module asynchronously and dynamically into a potentially non-module environment.

In an project bundled by Webpack add /* webpackIgnore: true */ before your url if it's an external file that Webpack shouldn't look for at build time, like so:

const { test } = await import(/* webpackIgnore: true */ "/test.js");

This would import test function from this test.js file:

export function test() {
  return "Hello";
}