我在 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,
});
有可能做到吗?
最佳答案
动态导入 网页包仅适用于代码拆分。
您需要了解如何告诉 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.
});
关于reactjs - 使用 `dynamic import` 从另一台主机获取脚本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54781242/