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

我知道这个问题以前被问过很多次，但似乎没有一个解决方案是有效的

我正在尝试使用“react chat popup”库，该库仅在SSR应用程序的客户端呈现。（使用next.js framework构建）使用该库的正常方式是从“react chat popup”调用

import{chat}

，然后直接呈现为

我为SSR应用找到的解决方案是检查窗口的

typedef！='动态导入库之前，
componentDidMount
方法中未定义“

，因为单独导入库通常会导致

窗口未定义

错误。因此，我找到了建议如下的链接：

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

---

但是，执行此操作时，我的foo对象将变为null。当我在回调中打印出m对象时，我得到

{“\uuu webpackChunkName”：“react\u chat\u popup\u 6445a148970fe64a2d707d15c41abb03”

在这种情况下，我如何正确导入库并开始使用

元素？

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

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

if（process.browser）{
//仅客户端代码
}

您不必担心如何导入该组件，只需从“react Chat popup”导入{Chat}它作为任何其他组件，它将被添加到客户端捆绑包中（以及服务器端，但它是服务器端，因此即使没有使用它，也可以将其放在那里）

---

这可能值得一读：

我已经设法解决了这个问题，首先在顶部声明了一个变量：

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>

{this.state.appIsMounted？：null}

Next js现在有了自己的方式，可以在不使用SSR的情况下进行动态导入

import dynamic from 'next/dynamic'

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

---

这是他们文档的链接：

嗨，我明白你的意思。但是如果我只是按照常规从“react Chat popup”导入{Chat}，我会得到

“window is not defined”

错误，因此我也需要有条件地导入（当其客户端时）。问题是，当我尝试按上述条件进行导入时，它不起作用。您是否尝试过我的上述代码？如果你不调用组件，它不应该执行任何东西，除非他们在库端执行一些奇怪的代码。事实上，我已经尝试完全删除

元素，只保留import语句，它仍然会触发

窗口未定义的
错误。感觉react chat弹出窗口在SSR中的工作非常糟糕，如果它需要这样的破解，但是找到解决方案很好！