reactjs - 使用 `dynamic import` 从另一台主机获取脚本？

Question

我在 localhost:3001 上运行我的 next.js 应用程序.我想从另一台主机(localhost:3000)获取脚本。我能做到 like this .至于我，更漂亮的是使用 dynamic import .但我收到一个错误:'ModuleNotFoundError: 未找到模块:错误:无法解析' http://localhost:3000/static/fileToFetch.js ' 在 '/Users/{用户名}/Desktop/test-project/pages';

例子:

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

有可能做到吗？

Answer 1

动态导入 网页包仅适用于代码拆分。
您需要了解如何告诉 webpack 不要更改 import()然后在该域中启用 CORS。

另一种方法是编写一个函数，将脚本标记注入(inject)主体并返回一个 promise ，如下所示:

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