Window is not defined while SSR

[tpikachu]

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

file:///Users/legendarypanda/Downloads/rethink-plaintext-editing-master/node_modules/react-rte/dist/react-rte.js (6:8752) file:///Users/legendarypanda/Downloads/rethink-plaintext-editing-master/node_modules/react-rte/dist/react-rte.js (6:8714) t.exports file:///Users/legendarypanda/Downloads/rethink-plaintext-editing-master/node_modules/react-rte/dist/react-rte.js (6:9216) Object. file:///Users/legendarypanda/Downloads/rethink-plaintext-editing-master/node_modules/react-rte/dist/react-rte.js (27:59873) e file:///Users/legendarypanda/Downloads/rethink-plaintext-editing-master/node_modules/react-rte/dist/react-rte.js (1:115) Object. file:///Users/legendarypanda/Downloads/rethink-plaintext-editing-master/node_modules/react-rte/dist/react-rte.js (11:133101) e file:///Users/legendarypanda/Downloads/rethink-plaintext-editing-master/node_modules/react-rte/dist/react-rte.js (1:115) file:///Users/legendarypanda/Downloads/rethink-plaintext-editing-master/node_modules/react-rte/dist/react-rte.js (1:472) Object. file:///Users/legendarypanda/Downloads/rethink-plaintext-editing-master/node_modules/react-rte/dist/react-rte.js (1:483) Module._compile internal/modules/cjs/loader.js (955:30)

[tranchinamit]

I have the same issue on project TypeScript (I have already installed @types/react-rte)

[NickMandylas]

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.

[tpikachu]

Sorry already tried this before?

[NickMandylas]

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.

[tranchinamit]

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

[matwming]

@NickMandylas thanks Nick. It works. @tpikachu if do you a check for window, will it work? if(typeof windows !=='undefined'){}

[timsoraro]

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?

[burhanuday]

@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

[sash20m]

Worked well with @NickMandylas 's solution. Thanks