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:

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]);
};

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

Youssouf Oumar · Accepted Answer · 2022-09-23 06:47:40Z

1

Having export transform your file to a module, which has it own scope, so test is not added to window object anymore. 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 a 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";
}

edited Sep 23, 2022 at 6:47

answered Sep 22, 2022 at 13:10

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Import dynamically external JavaScript module in React component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related