Cannot read property 'parentNode' of null, after migrating to v5.0.1

Library Version: 5.0.1

I am using this component in the below structure:

function Parent() {
  const [text, setText] = useState("");
  const handleChange = (text) => {
    setText(text);
  }
  
  return <Child text={text} onChange={handleChange}/>
}

function Child({text, onChange}) {
  // Some other shenanigans

  return <SimpleMDEEditor value={text} onChange={onChange} />
}

Whenever I start typing in the editor, the application crashes and below is the stack trace that appears.

TypeError: Cannot read property 'parentNode' of null
EasyMDE.push../node_modules/easymde/src/js/easymde.js.EasyMDE.toTextArea
node_modules/easymde/src/js/easymde.js:2905
  2902 | }
  2903 | 
  2904 | // Unwrap easyMDEcontainer before codemirror toTextArea() call
> 2905 | easyMDEContainer.parentNode.insertBefore(wrapper, easyMDEContainer);
       | ^  2906 | easyMDEContainer.remove();
  2907 | 
  2908 | cm.toTextArea();
View compiled
(anonymous function)
src/SimpleMdeReact.tsx:176
  173 | // if this effect is getting called again means options has changed hence old instance shall be removed
  174 | // ref used to avoid endless loop
  175 | if (editorRef.current) {
> 176 |   editorRef.current?.toTextArea();
      | ^  177 |   // @ts-expect-error
  178 |   editorRef.current?.cleanup();
  179 | }
View compiled
▼ 16 stack frames were expanded.
invokePassiveEffectCreate
node_modules/react-dom/cjs/react-dom.development.js:23487
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:3945
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:3994
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:4056
flushPassiveEffectsImpl
node_modules/react-dom/cjs/react-dom.development.js:23574
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js:468
runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js:11276
flushPassiveEffects
node_modules/react-dom/cjs/react-dom.development.js:23447
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:22269
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:11327
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js:468
runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js:11276
flushSyncCallbackQueueImpl
node_modules/react-dom/cjs/react-dom.development.js:11322
flushSyncCallbackQueue
node_modules/react-dom/cjs/react-dom.development.js:11309
scheduleUpdateOnFiber
node_modules/react-dom/cjs/react-dom.development.js:21893
dispatchAction
node_modules/react-dom/cjs/react-dom.development.js:16139
▲ 16 stack frames were expanded.
_callee$
src/SimpleMdeReact.tsx:189
  186 | const imageUploadFunction = options?.imageUploadFunction
  187 |   ? imageUploadCallback
  188 |   : undefined;
> 189 | setEditor(
      | ^  190 |   new SimpleMDE(
  191 |     Object.assign({}, initialOptions, options, {
  192 |       imageUploadFunction,
View compiled
▼ 5 stack frames were expanded.
tryCatch
node_modules/regenerator-runtime/runtime.js:63
Generator.invoke [as _invoke]
node_modules/regenerator-runtime/runtime.js:293
Generator.next
node_modules/regenerator-runtime/runtime.js:118
asyncGeneratorStep
node_modules/@babel/runtime/helpers/asyncToGenerator.js:3
_next
node_modules/@babel/runtime/helpers/asyncToGenerator.js:25
▲ 5 stack frames were expanded.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

PS: This was working fine in 4.1.5

[markthiessen]

@RIP21 for sure – in my scenario ensuring the options are constant is a better approach anyway. It just took me a bit longer than expected to migrate from 4.x.x -> 5.0.0 as I didn’t see anything standing out from the release notes, so I needed to dive in to find out why it was erroring. You have good examples in the README, so I wouldn’t expect new users to run into it, more just during upgrades.

[RIP21]

@markthiessen yup. Sorry for that. That’s why I slightly changed a readme after multiple people encountered that, to ensure people will note that. Even old users. Thanks for these issues 😃 It helps improve experience for next users 😃