dev-juju/EditorJS-React-Renderer

ReferenceError: window is not defined using Editor JS and Next JS

Closed this issue · 2 comments

rawalprashant commented

Describe the bug
A clear and concise description of what the bug is.

ReferenceError: window is not defined
at Object.253 (D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:8982)
at n (D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:39805)
at Object.995 (D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:9967)
at n (D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:39805)
at Object.356 (D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:11162)
at n (D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:39805)
at D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:40566
at D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:67395
at D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:67401
at D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:84 {
type: 'ReferenceError'
}

To Reproduce
Steps to reproduce the behavior:

  1. install the npm i editorjs-react-renderer
  2. import to the related js file - import Output from 'editorjs-react-renderer';
  3. render the data using

Expected behavior
It should show the post content as an article.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser Google Chrome
  • Version Latest
dev-juju commented

Hi @rawalprashant

Unfortunately SSR was broken in V3 to reduce bundle size.
This package can only be used client-side.

In nextjs you can use dynamic imports to only load the renderers on the client.

import dynamic from 'next/dynamic';

const Output = dynamic(
  async () => (await import('editorjs-react-renderer')).default,
  { ssr: false }
);

Note that dynamic imports only work with nextjs 12.0 and above. If you are using a lower version you might need another solution. e.g only import inside useEffect hook.

rawalprashant commented

Hi @dev-juju

Thanks a lot. it's super easy and works perfectly for me.