Next JS (SSR) React support

[YElyousfi]

How can this be made to not rely on window being defined? Trying to integrate this with Next.JS / server-side-rendering but this means that on the server window is not defined.

[jenssogaard]

hi @YElyousfi. That is a good question. Could you skip SSR for the CF integration and execute when typeof window !== undefined ?

[jenssogaard]

@YElyousfi I haven't heard from you so I will assume that my answer solved your issue. Feel free to open a new issue if needed.

[jonrrivera]

how can we go about doing this?

[pfortes]

Use dynamic imports or check if typeof window !== undefined

[jonrrivera]

I imported the module using

import dynamic from 'next/dynamic';
const ConversationalForm = dynamic(import('conversational-form'), { ssr: false });

now I'm getting this when copying the get started code:

[jonrrivera]

dynamically importing like this made ConversationalForm = undefined

const { ConversationalForm } = dynamic(import('conversational-form'), { ssr: false });

[pfortes]

@jonrrivera maybe try adding conversational form inside a component and then importing that component dynamically .

i use suspense

const isSSR = typeof window === 'undefined';

{!isSSR && (
    <React.Suspense fallback={<div />}>
         <ContactChat />
    </React.Suspense>
 )}

in the ContactChat component i import conversationalform normaly:
import { ConversationalForm } from 'conversational-form';

[jonrrivera]

you legend, this actually worked!

[pfortes]

@jonrrivera Glad to hear that!