Using `dynamic import` to fetch script from another host?

Question

I run my next.js app on localhost:3001. I want to fetch script from another host (localhost:3000). I could do it like this. As for me, much prettier would be using dynamic import. But I got an error: 'ModuleNotFoundError: Module not found: Error: Can't resolve 'http://localhost:3000/static/fileToFetch.js' in '/Users/{username}/Desktop/test-project/pages';

Example:

export const FetchedComponent = dynamic({
  loader: () =>
    import('http://localhost:3000/static/fileToFetch.js'),
  loading: () => 'Loading...',
  ssr: false,
});

Is it possible to do it?

The easiest way to load external files would be to `fetch` it. — Keno, Feb 20 '19 at 08:03
I found this doc maybe useful to you https://webpack.js.org/configuration/output/#outputcrossoriginloading — alsotang, Nov 21 '19 at 13:02

score 8 · Accepted Answer · answered Feb 20 '19 at 08:39

Dynamic import with webpack is works only for code splitting. you need to find out how to tell to webpack not to change the import() and then enable CORS in that domain.

An alternative way would be to write a function that will inject script tag to the body and return a promise, something like that:

function importExternal(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    script.onload = () => resolve(window['external_global_component']);
    script.onerror = reject;

    document.body.appendChild(script);
  });
}

When the file that you are loading, putting on the global (external_global_component) the component that was loaded. And then, you will able to use it with NextJS dynamic.

export const FetchedComponent = dynamic({
  loader: () =>
    importExternal('http://localhost:3000/static/fileToFetch.js'),
  loading: () => 'Loading...',
  ssr: false, // <- must be false, because we are using DOM.
});

Using `dynamic import` to fetch script from another host?

1 Answers1