window is not defined

[ivmarcos]

window is not defined

[ivmarcos]

@yantakus, since you are using Next.Js, try using some strategy regarding NoSSR components. For example: https://nextjs.org/docs#with-no-ssr.

[ltakato]

@yantakus, since you are using Next.Js, try using some strategy regarding NoSSR components. For example: https://nextjs.org/docs#with-no-ssr.

@ivmarcos next team update their page, on nowadays this kind of info is located here:
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

[ivmarcos]

Are you using React on server or front end?

[TonyBrobston]

I'm importing it into a React project. Let me know if there are any other questions I can answer.

[ivmarcos]

Hi @TonyBrobston! This type of error related to the message window is not defined happens when you are using on the server side (node) and not in the browser. That's why I asked if you were using React on the server, because this lib is intended to be used only in the browser, SSR is not supported, sorry.

[yantakus]

I don't need it to render server side, but in my case I'm using next.js and the app is rendered initially at server. I thought I can do smth like this:

{process.browser && (
<ReactToPdf>
    {({toPdf, targetRef}) =>  (
        <div style={{width: 500, height: 500, background: 'red'}} onClick={toPdf} ref={targetRef}/>
    )}
</ReactToPdf>
)}

but it's not possible, because I'm getting window is not defined even when I'm just importing the library and not using it.

Why not doing something like this

if (window) {
...
}

before using it?

[gucal]

As @ltakato said, you will not have this problem when you use dynamic import.

Example:

import dynamic from 'next/dynamic'

const ReactToPdf = dynamic(() => import('react-to-pdf'), { ssr: false })