ReferenceError: self is not defined

[KumarDedhia]

Jodit Version: jodit-react : 1.3.39

Browser: Chrome
OS: Mac
Is React App: Yes (NextJS)

Code in my ts library

<Some state handling>
<JoditEditor
	ref={editor}
	value={content}
	config={config}
	onBlur={(newContent: string) => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
	onChange={(newContent: string) => {}}
/>

Issue
When I try to use the component from my library in my nextJS applicatio, below is the err occurred, I use rollup to bundle my lib.

ReferenceError: self is not defined
at eval (webpack-internal:///../flexi-form/node_modules/jodit-react/build/jodit-react.js:1:173)
at Object.../flexi-form/node_modules/jodit-react/build/jodit-react.js (/mui-admin/.next/server/pages/_app.js:21:1)
at webpack_require (/mui-admin/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///../flexi-form/dist/cjs/index.cjs:7:19)
at Object.../flexi-form/dist/cjs/index.cjs (/mui-admin/.next/server/pages/_app.js:502:1)
at webpack_require (/mui-admin/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/pages/_app.js:38:77)
at Function.webpack_require.a (/mui-admin/.next/server/webpack-runtime.js:100:13)
at eval (webpack-internal:///./src/pages/_app.js:1:21)
at Object../src/pages/_app.js (/mui-admin/.next/server/pages/_app.js:97:1)
at webpack_require (/mui-admin/.next/server/webpack-runtime.js:33:42)
at webpack_exec (/mui-admin/.next/server/pages/_app.js:523:39)
at /mui-admin/.next/server/pages/_app.js:524:28
at Object. (/mui-admin/.next/server/pages/_app.js:527:3)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.requirePage (/mui-admin/node_modules/next/dist/server/require.js:88:12)
at /mui-admin/node_modules/next/dist/server/load-components.js:45:54
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Promise.all (index 1)
at async Object.loadComponents (/mui-admin/node_modules/next/dist/server/load-components.js:43:33)
at async DevServer.findPageComponents (/mui-admin/node_modules/next/dist/server/next-server.js:563:36)
at async DevServer.findPageComponents (/mui-admin/node_modules/next/dist/server/dev/next-dev-server.js:1041:20)
at async DevServer.renderErrorToResponse (/mui-admin/node_modules/next/dist/server/base-server.js:1098:26)
at async pipe.req.req (/mui-admin/node_modules/next/dist/server/base-server.js:1075:30)
at async DevServer.pipe (/mui-admin/node_modules/next/dist/server/base-server.js:407:25) {
page: '/'
}

[GeitV]

This comes from using NextJS. When server-side rendering is enabled, NextJS is having trouble rendering JoditEditor on server-side. The fix is to remove your import and make it dynamic import and disabling SSR, like so:

const JoditEditor = dynamic(() => import("jodit-react"), {
    ssr: false,
});

[sagar-bmconsulting]

@GeitV I'm also getting same error.. I added above your given code but still facing same issue.

[sagar-bmconsulting]

This is my page.js
// import Image from 'next/image'
import JoditEditor from 'jodit-react';
import styles from './page.module.css'

export default function Home() {
const editor = useRef(null);
const [content, setContent] = useState('');

// Define a placeholder or use an empty string if placeholder is not provided
const placeholder = ''; // Replace with your desired placeholder value

const config = useMemo(
{
readonly: false,
placeholder: placeholder || 'Start typing...',
},
[placeholder]
);
const JoditEditor = dynamic(() => import("jodit-react"), {
ssr: false,
});
return (

<JoditEditor
ref={editor}
value={content}
config={config}
tabIndex={1} // tabIndex of textarea
onBlur={newContent => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
onChange={newContent => {setContent(newContent)}}
/>

</main>

)
}

[GeitV]

@sagar-bmconsulting you have 2 imports now. Remove the import JoditEditor from 'jodit-react'; and you're good to go

This should work

// import Image from 'next/image'
// import JoditEditor from 'jodit-react';     I commented your import out, but you should just remove it
import styles from './page.module.css'

const JoditEditor = dynamic(() => import("jodit-react"), {
    ssr: false,
}); // This is now your dependency import

export default function Home() {
const editor = useRef(null);
const [content, setContent] = useState('');
...

[sagar-bmconsulting]

@GeitV No, It's still getting errors.

This is my main.js file

"use client";
import dynamic from "next/dynamic";
import { useRef, useState, useMemo } from "react";

const JoditEditor = dynamic(() => import("jodit-react"), {
ssr: false,
});
export default function Home() {
const editor = useRef(null);
const [content, setContent] = useState('');

// Define a placeholder or use an empty string if placeholder is not provided
const placeholder = ''; // Replace with your desired placeholder value

const config = useMemo({
readonly: false,
placeholder: placeholder || 'Start typing...',
}, [placeholder] );

return (

setContent(newContent)} // preferred to use only this option to update the content for performance reasons onChange={newContent => {setContent(newContent)}} /> )}

[sksabbirhossain]

@sagar-bmconsulting you can use like this->

const initialValue = {
   readonly: false,
   placeholder: placeholder || "Start typings...",
 };
 // eslint-disable-next-line react-hooks/exhaustive-deps
 const config = useMemo(() => initialValue, [placeholder]);