如何在 Next.js 中使用带有命名导出的动态导入？答案

【问题标题】：How to use dynamic import with a named export in Next.js?如何在 Next.js 中使用带有命名导出的动态导入？
【发布时间】：2021-10-09 06:15:54
【问题描述】：

我有这个反应组件。它对我来说很好用。

import { Widget } from 'rasa-webchat';

function CustomWidget(){
    return (
        <Widget
        initPayload={"payload"}
        socketPath={"/socket.io/"}
        customData={{"language": "en"}}
        />
    )
}
export default CustomWidget;

但是当我尝试在我的 next.js 网站上使用它时，它无法正常工作。

它给了我一个窗口未定义错误。

我想我通过使用动态导入器解决了这个特殊错误：

import dynamic from "next/dynamic";

const webchat = dynamic(
  () => {
    return import('rasa-webchat');
  },
  { ssr: false }
);

但现在我不知道如何实际使用包中的小部件组件。

我可以import { Widget } from 'rasa-webchat' 还是因为某种原因这与next.js 不兼容？如果可以，我该怎么做？

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

Nextjs 是一个框架，允许您构建静态和服务器端渲染的应用程序。因此，它在引擎盖下使用 Nodesj，并且在 nodejs 中未定义窗口。在 react ssr 框架中访问窗口的唯一方法是 useEffect 钩子。您的动态导入解决方案是正确的，因为您正在客户端获取文件。我希望这是有道理的。

祝你有美好的一天

【讨论】：

【解决方案2】：

命名导出的语法略有不同。您可以将小部件与动态导入一起使用，如下所示：

import dynamic from 'next/dynamic';

const Widget = dynamic(
    () => import('rasa-webchat').then((mod) => mod.Widget),
    { ssr: false }
);

function CustomWidget(){
    return (
        <Widget
            initPayload={"payload"}
            socketPath={"/socket.io/"}
            customData={{"language": "en"}}
        />
    )
}

export default CustomWidget;

更多详情请查看 Next.js dynamic import documentation。

【讨论】：