Next.Js-SunEditor Error: core._resourcesStateChange is not a function

Question

I want to create RichTextBox(wysiwyg) on Next.Js using SunEditor, but I am getting TypeError: core._resourcesStateChange is not a function. I do not encounter any problems when I try the same code on React.js. How can I fix this situation?

Editor Component

import React from "react";
import 'suneditor/dist/css/suneditor.min.css'; 
import dynamic from "next/dynamic";
const SunEditor = dynamic(() => import("suneditor-react"), {
    ssr: false,
  });
  
  const TextEditor2 = props => { 
    return (
      <div>
        <SunEditor  />
      </div>
    );
  };
  export default TextEditor2;

index.js

import "suneditor/dist/css/suneditor.min.css";
import styles from "../styles/Home.module.css";
import TextEditor2 from "../components/TextEditor2";

export default function Home() {
  return (
    <div className={styles.container}>
      <TextEditor2/>
    </div>
  );
}

Answer 1

I downgraded my next version to 12.2.2 then problem is solved. I am not sure about correlation between sun editor and next version. I actually had a middleware issue and I solved it by downgraded next version then sun editor error message has gone.

https://nextjs.org/docs/advanced-features/middleware

According to link v12.2.0 Middleware is stable

Answer 2

had the same issue solved by installing this version of suneditor

[email protected]

and works with nextjs 13.1.1

Answer 3

Turning off react strictmode can solve this problem.

in React - remove these lines <React.StrictMode> & </React.StrictMode>:

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

in Next js (next.config.js) change reactStrictMode: true -> reactStrictMode: false

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,     
};

module.exports = nextConfig;

Answer 4

This issue has been resolved(✅) in this release:

https://github.com/JiHong88/suneditor/releases/tag/2.44.10