时间戳

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

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

问题描述

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

我正在尝试使用仅在 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 对象变为空。当我在回调中打印出 m 对象时，我得到{"__webpackChunkName":"react_chat_popup_6445a148970fe64a2d707d15c41abb03"}如何正确导入库并<Chat/>在这种情况下开始使用元素？

标签： javascriptreactjswebpackserver-side-renderingnext.js

解决方案

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

import dynamic from 'next/dynamic'

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

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

推荐阅读