Unhandled Runtime Error, TypeError: nextCreate is not a function

[yhoungdev]

Jodit Version: 3.4.xxxxx

Browser: Brave OS: Linux Is React App: False

Code

Your Example code below is wrong, Next Js would throw an error, due to wrong use of the useMemo Hook

// import React, { useState, useRef, useMemo } from 'react';
import JoditEditor from 'jodit-react';

const Example = ({ placeholder }) => {
    const editor = useRef(null);
    const [content, setContent] = useState('');

    const config = useMemo(
        {
            readonly: false, // all options from https://xdsoft.net/jodit/docs/,
            placeholder: placeholder || 'Start typings...'
        },
        [placeholder]
    );

    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) => {}}
        />
    );
};

Expected behavior: useMemo expects a function, but an object was passed, so there for it throws this error in NextJs Unhandled Runtime Error, TypeError: nextCreate is not a function

Actual behavior:

So this is an upgrded code that works for both React and NextJs

import React, { useState, useRef, useMemo } from 'react';
import JoditEditor from 'jodit-react';

const Example = ({ placeholder }) => {
    const editor = useRef(null);
    const [content, setContent] = useState('');

    const config = useMemo(()=> ({
            readonly: false, // all options from https://xdsoft.net/jodit/docs/,
            placeholder: placeholder || 'Start typings...'
        }),[placeholder]
    );

    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) => {}}
        />
    );
};

[yhoungdev]

Awesome