window is not defined using NextJs

[dalladirosa]

Summary

I got an error ReferenceError: window is not defined

Steps to reproduce

1. Install remirror recent version
2. Create a new page
3. Place this code

 const { manager, state } = useRemirror({
    // extensions,
    content: content,
    stringHandler: 'html',
  });

<AllStyledComponent>
  <ThemeProvider className="shadow-none remirror">
    <RemirrorSSR
      manager={manager}
      state={state}
      editable={false}
      attributes={{
        class: 'ProseMirror remirror-editor remirror-a11y-dark',
      }}
    />
  </ThemeProvider>
</AllStyledComponent>

4. Open the page

Expected results

Show remirror editor

Actual results

Get an error ReferenceError: window is not defined

Possible Solution

Screenshot(s)

[SunPj]

I bumped into the same issue. One possible quick fix is to disable server side rendering for the editor.

Wrap your component to

import {NoSsr} from "@material-ui/core";

.....

<NoSsr>
    <YourComponent />
</NoSsr>

[dalladirosa]

I bumped into the same issue. One possible quick fix is to disable server side rendering for the editor.

Wrap your component to

import {NoSsr} from "@material-ui/core";

.....

<NoSsr>
    <YourComponent />
</NoSsr>

Thanks for the solution i will try it later

[Powersource]

Yeah getting the same. Curious as the readme says SSR should work perfectly fine.

[edwinvelez]

Hopefully you figured this out by now. If not, take a look at Next.js Dynamic Import. Below is an example that loads a React Component from within a page.

import type { NextPage } from 'next';
import dynamic           from 'next/dynamic';

const TextEditor = dynamic( () => import('../components/text-editor'), { ssr: false } );

const Home: NextPage = () => {
  return (
    <>
      Next.js Home Page

      <TextEditor />
    </>
  );
};

export default Home;

[Kaempy]

Hopefully you figured this out by now. If not, take a look at Next.js Dynamic Import. Below is an example that loads a React Component from within a page.

import type { NextPage } from 'next';
import dynamic           from 'next/dynamic';

const TextEditor = dynamic( () => import('../components/text-editor'), { ssr: false } );

const Home: NextPage = () => {
  return (
    <>
      Next.js Home Page

      <TextEditor />
    </>
  );
};

export default Home;

Thanks @edwinvelez this helped