sstur
Window is not defined while SSR
Server Error ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
I have the same issue on project TypeScript (I have already installed @types/react-rte)
For those using NextJS, and are having an issue with server-side rending, this is how I solved the issue.
Create an "Editor" component. You'll create your react-rte instance here.
import React from "react";
import RichTextEditor, { EditorValue } from "react-rte";
interface EditorProps {}
export const Editor: React.FC<EditorProps> = ({}) => {
const [value, setValue] = React.useState<EditorValue>(
RichTextEditor.createEmptyValue()
);
return (
<RichTextEditor
onChange={(newValue) => {
setValue(newValue);
}}
value={value}
/>
);
};
export default Editor;
Now on the page where you want to use the editor, import next/dynamic & use it to import your editor component. This library is used to specify not to include this module on the server-side.
import dynamic from "next/dynamic";
const ReactRTE = dynamic(() => import("../../components/Editor"), {
ssr: false,
});
// ... use <ReactRTE /> as your component.
Sorry already tried this before?
Currently working for me, using react-rte 0.16.3 & nextjs 9.5.3. (And also using typescript). No issues for me.
Ya, it worked for me well. react-rte 0.16.3 & next 9.4.0. Thanks @NickMandylas. And "dynamic import" is the way to work for others rick text editor
@NickMandylas thanks Nick. It works.
@tpikachu if do you a check for window, will it work?
if(typeof windows !=='undefined'){}
For those using NextJS, and are having an issue with server-side rending, this is how I solved the issue.
Create an "Editor" component. You'll create your react-rte instance here.
import React from "react"; import RichTextEditor, { EditorValue } from "react-rte"; interface EditorProps {} export const Editor: React.FC<EditorProps> = ({}) => { const [value, setValue] = React.useState<EditorValue>( RichTextEditor.createEmptyValue() ); return ( <RichTextEditor onChange={(newValue) => { setValue(newValue); }} value={value} /> ); }; export default Editor;Now on the page where you want to use the editor, import next/dynamic & use it to import your editor component. This library is used to specify not to include this module on the server-side.
import dynamic from "next/dynamic"; const ReactRTE = dynamic(() => import("../../components/Editor"), { ssr: false, }); // ... use <ReactRTE /> as your component.
I get this error:
./components/Editor.jsx:4:1
Syntax error: Unexpected reserved word 'interface' (4:0)
2 | import RichTextEditor, { EditorValue } from "react-rte";
3 |
> 4 | interface EditorProps {}
| ^
5 |
6 | export const Editor: React.FC<EditorProps> = ({}) => {
7 | const [value, setValue] =
Can you please help me solve this?
@timsoraro That's because you are trying to use Typescript inside a .jsx file. Remove all Typescript related code from the snippet and you should be fine
