Got "window is not defined" when using with next js

[thanhpd56]

Purpose

• [ ] New feature
• [ ] New renderer
• [x] Bug fix
• [ ] Documentation
• [ ] Refactoring
• [ ] Test Case
• [ ] Other

Description

Hi, I'am using editor js renderer with react project then its working well. However, after I convert project to next js then it crashed with error "window is not defined". How can I fix it. Thanks.

[bekogeko]

are you importing with dynamic feature of next with ssr disabled ? or just with an basic import ?

can you show us how you imported ?

[kepi]

Just to those who see this before trying the project :shrug: - it is working fine with basic import in NextJS component.

Btw I just switched to this project blindly trying to deal with no SSR support in dev-juju/EditorJS-React-Renderer and it just worked.

[rawestmoreland]

Just to those who see this before trying the project 🤷 - it is working fine with basic import in NextJS component.

Btw I just switched to this project blindly trying to deal with no SSR support in dev-juju/EditorJS-React-Renderer and it just worked.

@kepi What version of nextjs and react are you using? I"m having the same 'window' issue with nextjs

[kepi]

NextJS 12.2.4, react 17.0.2.

And my Output component (I'm using rescript so here is generated code, but it is readable enough):

// Generated by ReScript, PLEASE EDIT WITH CARE

import * as React from "react";
import * as Caml_option from "rescript/lib/es6/caml_option.js";
import EditorjsBlocksReactRenderer from "editorjs-blocks-react-renderer";

var Blocks = {};

function Output(Props) {
  var data = Props.data;
  if (data !== undefined) {
    return React.createElement("div", {
                className: "prose"
              }, React.createElement(EditorjsBlocksReactRenderer, {
                    data: Caml_option.valFromOption(data)
                  }));
  } else {
    return React.createElement("div", undefined, "No data");
  }[email protected]:dho/expanzo-web.git

}

var make = Output;

export {
  Blocks ,
  make ,
}
/* react Not a pure module */

To avoid any unwanted confusion: I'm just moving to Next.js from Gatsby, and I'm in it for maybe three evenings, so it is possible that my use case is different. Take it as noobs input to discussion :) But, using completely same code and dependencies with EditorJS-React-Renderer I got windows is not defined. Now with this projects it is working fine.

[akzone]

are you importing with dynamic feature of next with ssr disabled ? or just with an basic import ?

can you show us how you imported ?

I'm facing the same issue

nextjs 13 app dir

dynamic import and basic import both same problem

Anyone know how to fix this?

[JannikZed]

We are facing this issue in Nextjs 13 first after enabling edge functions with export const runtime = "edge" -> so it worked as server components rendered in lambdas.. very strange. The underlying problem seems to be the dependency html-dom-parser

[akzone]

We are facing this issue in Nextjs 13 first after enabling edge functions with export const runtime = "edge" -> so it worked as server components rendered in lambdas.. very strange. The underlying problem seems to be the dependency html-dom-parser

Thanks for the good info.

Add this to next.config.js

const path = require('path');

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  webpack: (config) => {
    config.module.rules = [
      ...config.module.rules,
      {
        test: /html-react-parser\/index\.js$/,
        resolve: {
          alias: {
            'html-dom-parser': path.join(path.dirname(require.resolve('html-dom-parser')), 'lib/server/html-to-dom.js'),
          },
        },
      },
    ];
    return config;
  },
}

Problem solved!

Credit: https://github.com/remarkablemark/html-react-parser/issues/736

[bekogeko]

Actually i found a very good source for nextjs/app dir implementation for editorjs.

https://github.com/shadcn-ui/taxonomy/blob/651f984e52edd65d40ccd55e299c1baeea3ff017/components/editor.tsx