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