Question

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

示例：

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

有可能做到吗？

Answer 1

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

另一种方法是编写一个将脚本标记注入到正文并返回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.
});

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

1 个答案: