NextJS - ReferenceError: window is not defined

Question

import dynamic from 'next/dynamic'
import { convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToMarkdown from 'draftjs-to-markdown';
import ReactMarkdown from 'react-markdown'

When I refresh page, it happens error: ReferenceError: window is not defined

I follow the solution and changed code as follow:

const { convertToRaw } = dynamic(import('draft-js'),{ssr:false})
const { Editor } = dynamic(import('react-draft-wysiwyg'),{ssr:false})

const draftToMarkdown = dynamic(() => import("draftjs-to-markdown"), {
  ssr: false
});
const ReactMarkdown = dynamic(() => import("react-markdown"), {ssr:false})

But this time, it doesn't display, nothing, it is blank page Please find the solution

Answer 1

Since Next.js runs on the server & client, you need to make sure that your code access window object only when it runs in the client.

There are 2 things that runs on the client for sure, event handles & useEffect hook / componentDidMount.

Put your window related code there.