使用“动态导入”从另一台主机获取脚本？

Question

我在 .js 上运行我的 next.js 应用程序localhost:3001。我想从另一个主机 ( localhost:3000)获取脚本。我能做到这样。至于我，使用dynamic import. 但我收到一个错误：'ModuleNotFoundError: Module not found: Error: Can't resolve ' http://localhost:3000/static/fileToFetch.js ' in '/Users/{username}/Desktop/test-project/pages ';

例子：

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

有可能做到吗？

Answer 1

使用webpack 进行动态导入仅适用于代码拆分。您需要找出如何告诉 webpack 不要更改import()然后在该域中启用 CORS。

另一种方法是编写一个函数，将脚本标记注入正文并返回一个承诺，如下所示：

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

当您正在加载文件时，将加载external_global_component的组件放在全局 ( ) 上。然后，您将能够将它与 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.
});