I am trying to create a next.js application. But when I import and use Editor from ‘react-draft-wysiwyg’, I get an error saying that “ReferenceError: window is not defined”.
My import statement looks like “import Editor from ‘react-draft-wysiwyg’;”
How do I solve this?
saam Changed status to publish February 26, 2022
Yes in next js you have to import the “react-draft-wysiwyg” dynamically.
Basically what is happening is that when the module loads the windows object is not defined. So what you need do is import the react-draft-wysiwyg when windows object is available. To achieve this please use the below code.
import dynamic from 'next/dynamic';
const Editor = dynamic(
() => import('react-draft-wysiwyg').then(mod => mod.Editor),
{ ssr: false }
)
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
Please use the above code to solve “ReferenceError: window is not defined” in next js
saam Answered question February 26, 2022
