[英]Next.js: How to dynamically import external client-side only React components into Server-Side-Rendering apps developed?
I know this question has been asked multiple times before but none of the solution seems to work.我知道这个问题之前已经被问过多次,但似乎没有一个解决方案有效。
I'm trying to use the library 'react-chat-popup' which only renders on client side in a SSR app.(built using next.js framework) The normal way to use this library is to call import {Chat} from 'react-chat-popup'
and then render it directly as <Chat/>
.我正在尝试使用库“react-chat-popup”,它仅在 SSR 应用程序的客户端呈现。(使用 next.js 框架构建)使用此库的正常方法是调用
import {Chat} from 'react-chat-popup'
然后直接将其渲染为<Chat/>
。
The solution I have found for SSR apps is to check if typedef of window !=== 'undefined'
in the componentDidMount
method before dynamically importing the library as importing the library normally alone would already cause the window is not defined
error.我为 SSR 应用程序找到的解决方案是在动态导入库之前检查
componentDidMount
方法typedef of window !=== 'undefined'
因为通常单独导入库会导致window is not defined
错误。 So I found the link https://github.com/zeit/next.js/issues/2940 which suggested the following:所以我找到了链接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;
}));
However, my foo object becomes null when I do this.但是,当我这样做时,我的 foo 对象变为空。 When I print out the m object in the callback, i get
{"__webpackChunkName":"react_chat_popup_6445a148970fe64a2d707d15c41abb03"}
How do I properly import the library and start using the <Chat/>
element in this case?当我在回调中打印出 m 对象时,我得到
{"__webpackChunkName":"react_chat_popup_6445a148970fe64a2d707d15c41abb03"}
在这种情况下,如何正确导入库并开始使用<Chat/>
元素?
I've managed to resolve this by first declaring a variable at the top:我设法通过首先在顶部声明一个变量来解决这个问题:
let Chat = ''
then doing the import this way in componentDidMount:然后在 componentDidMount 中以这种方式进行导入:
async componentDidMount(){
let result = await import('react-chat-popup')
Chat = result.Chat
this.setState({
appIsMounted: true
})
}
and finally render it like this:最后像这样渲染它:
<NoSSR>
{this.state.appIsMounted? <Chat/> : null}
</NoSSR>
You mentioned the solution yourself, this component should only run clientside, hence you can only render it on the client using a condition.您自己提到了解决方案,该组件只能在客户端运行,因此您只能使用条件在客户端上呈现它。 Doing the following will only render the component on the client and solve your issues:
执行以下操作只会在客户端呈现组件并解决您的问题:
if (process.browser) {
// client-side-only code
<Chat/>
}
You don't have to worry about how to import the component, just import {Chat} from 'react-chat-popup'
it as any other component and it will be added to the clientside bundle (as well as the server side but it's server, so it's fine to have it there even though it's not used).您不必担心如何导入组件,只需像任何其他组件一样
import {Chat} from 'react-chat-popup'
,它就会被添加到客户端包(以及服务器端,但它是服务器,因此即使不使用它也可以将其放在那里)。
This might be worth a read: https://github.com/zeit/next.js/issues/2473这可能值得一读: https : //github.com/zeit/next.js/issues/2473
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.