如何在 Next.js 中使用动态导入和命名导出？

Question

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

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 不兼容？如果可以的话我该怎么做？

Answer 1

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

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动态导入文档。