2

Trying to add Wysiwyg editor to my web app.

When trying to import editor module, get error. Tried both react-draft-wysiwyg and react-quill. First leads to "window not defined", second to "document not defined" when loading page. And all this just on import, I not even used it anywhere.

I looked for solution, but I didn't find similar situation anywhere. The most near to it was case when somebody also had "document not defined", but there it was cured by using NoSsr wrapper. This case, as I already said, I can't even load page with only import of this element.

So, this doesn't work:

...
import DeleteIcon from '@mui/icons-material/Delete';
import { DesktopDatePicker } from '@mui/x-date-pickers'
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {NoSsr} from "@mui/base";
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
...

But this is okay:

...
import DeleteIcon from '@mui/icons-material/Delete';
import { DesktopDatePicker } from '@mui/x-date-pickers'
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {NoSsr} from "@mui/base";
import { EditorState } from 'draft-js';
...

enter image description here

Could somebody help me please, if you know why this problem appears?

Thank you in advance.

Improve this question
2
  • Hi, given that the "window not defined" error may come up in different situations, with different causes and different solution each time, I've crafted a generic answer that lists all these scenarios in a related question: stackoverflow.com/a/77556387/5513532 A NoSsr wrapper is fine for modules that can be imported, but not rendered on the server (say, D3.js). When the module cannot be imported at all on the server (say, Leaflet or jQuery), you need a dynamic import as mentioned in the selected answer (however this is a more radical solution). Commented Dec 28, 2023 at 13:27
  • This other question brings additional insights in situations where the dynamic import fails: stackoverflow.com/questions/63451068/… Commented Dec 28, 2023 at 14:05

2 Answers 2

Reset to default
7

Nextjs consider the import in the page's initial javascript bundle. The package you are using needs to be imported lazily since it is internally using window and document objects, this should not be executed on the server. Try to import react-draft-wysiwyg and react-quill dynamically with next/dynamic.

Something like this:

import dynamic from 'next/dynamic'

const { Editor } = dynamic(() => import('react-draft-wysiwyg'), {ssr: false})
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you, it helped Now it is rendered The only moment what now I get next warning when press on editor: "Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the i component."
Can you share the sandbox link? It would be easy then to debug. Also, you can accept the above answer, if that helped you so that it might helps others as well
What sandbox? I don't understand
Codesandbox is an online editor for rapid web development, you can write your code there and share the link of the project, it's a perfect tool and I can easily debug your code there itself, rather than clone the project locally.
0

you can use window just put a check before using it like this

if(typeof window !== "undefined"){
  window.location.reload()
 }
Improve this answer

1 Comment

But the problem was appearing before I do anything. Just on import stage.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.