Open KumarDedhia opened 11 months ago
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,
});
@GeitV I'm also getting same error.. I added above your given code but still facing same issue.
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 (
) }
@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('');
...
@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 (
)}
@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]);
Jodit Version: jodit-react : 1.3.39
Browser: Chrome OS: Mac Is React App: Yes (NextJS)
Code in my ts library
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.