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 (

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

) }

[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]);