Question

我知道这个问题之前曾被问过多次，但没有一个解决方案可行。

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

我为SSR应用程序找到的解决方案是在动态导入库之前检查<Chat/>方法中的typedef of window !=== 'undefined'是否为动态导入库，因为通常单独导入库已经会导致componentDidMount错误。因此，我找到了链接https://github.com/zeit/next.js/issues/2940，其中提出了以下建议：

window is not defined

但是，当我这样做时，我的foo对象将变为null。在回调中打印出m对象时，我得到Chat = dynamic(import('react-chat-popup').then(m => { const {Foo} = m; Foo.__webpackChunkName = m.__webpackChunkName; return Foo; }));，如何正确导入库并在这种情况下开始使用{"__webpackChunkName":"react_chat_popup_6445a148970fe64a2d707d15c41abb03"}元素？

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

下一个js现在具有自己的方式来进行动态导入而无需SSR。

import dynamic from 'next/dynamic'

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

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

Answer 3

您自己提到了解决方案，该组件只能在客户端运行，因此只能使用条件在客户端上呈现它。执行以下操作只会在客户端上呈现该组件并解决您的问题：

if (process.browser) {
  // client-side-only code
  <Chat/>
}

您不必担心如何导入组件，只需将import {Chat} from 'react-chat-popup'与其他任何组件一样导入，它将被添加到客户端捆绑包（以及服务器端，但它是服务器）中，因此即使没有使用它也可以）。

这可能值得一读：https://github.com/zeit/next.js/issues/2473

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

3 个答案: