Next.js：如何将外部仅客户端的React组件动态导入到开发的服务器端渲染应用程序中？

Question

我知道这个问题已经被问过多次了，但是似乎没有一个解决方案。

我正在尝试使用仅在客户端在SSR应用程序中呈现的库'react-chat-popup'。（使用next.js框架构建）使用此库的正常方法是调用该库import {Chat} from 'react-chat-popup'，然后将其直接呈现为<Chat/>。

我为SSR应用找到的解决方案是在动态导入库之前检查方法中是否typedef of window !=== 'undefined'存在该componentDidMount方法，因为通常仅导入库通常已经引起了window is not defined错误。所以我找到了链接https://github.com/zeit/next.js/issues/2940，该链接建议以下内容：

Chat = dynamic(import('react-chat-popup').then(m => {
  const {Foo} = m;
  Foo.__webpackChunkName = m.__webpackChunkName;
  return Foo;
}));

但是，当我这样做时，我的foo对象将变为null。当我在回调中打印出m对象时，我得到{"__webpackChunkName":"react_chat_popup_6445a148970fe64a2d707d15c41abb03"}如何正确导入库并<Chat/>在这种情况下开始使用元素？

Answer 1

我已经设法通过首先在顶部声明一个变量来解决此问题：

let Chat = ''

然后在componentDidMount中以这种方式进行导入：

async componentDidMount(){
        let result = await import('react-chat-popup')
        Chat = result.Chat
        this.setState({
            appIsMounted: true
        })
    }

最后像这样渲染它：

<NoSSR>
   {this.state.appIsMounted? <Chat/> : null}
</NoSSR>

Answer 2

Next js 现在有自己的方式来进行动态导入，无需 SSR。

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

这是他们文档的链接：next js