Bug: Uncaught Error: Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update() or editorState.read(). #6481
Description
Lexical version: 0.16.1
Browser: Chrome latest version
Device: mac
Problem
I'm using the Lexical editor in two separate micro frontend applications. When I attempt to load both applications into the parent frontend, one RTE functions normally, and another one throw errors.
Steps To Reproduce
It is difficult to produce micro frontend environment in the codesandbox that we're working on, please let me know if any easier way to create micro frontend sandbox.
The current behavior
When I attempt to load both applications into the parent frontend, one RTE functions normally, while the other produces the following errors when attempting to access it:
Uncaught Error: Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update() or editorState.read().
at getActiveEditorState (Lexical.dev.mjs:7544:13)
at $getNodeByKey (Lexical.dev.mjs:800:39)
at _ParagraphNode.getLatest (Lexical.dev.mjs:3774:20)
at _ParagraphNode.getParent (Lexical.dev.mjs:3445:25)
at _ParagraphNode.getIndexWithinParent (Lexical.dev.mjs:3425:25)
at $internalResolveSelectionPoint (Lexical.dev.mjs:6951:39)
at $internalResolveSelectionPoints (Lexical.dev.mjs:7041:31)
at $internalCreateRangeSelection (Lexical.dev.mjs:7139:35)
at $internalCreateSelection (Lexical.dev.mjs:7092:12)
at $beginUpdate (Lexical.dev.mjs:8088:41)
Lexical.dev.mjs:7544 Uncaught Error: Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update() or editorState.read().
at getActiveEditorState (Lexical.dev.mjs:7544:13)
at $getNodeByKey (Lexical.dev.mjs:800:39)
at _TextNode.isAttached (Lexical.dev.mjs:3380:20)
at $isNodeValidForTransform (Lexical.dev.mjs:7582:41)
at $applyAllTransforms (Lexical.dev.mjs:7624:35)
at $beginUpdate (Lexical.dev.mjs:8099:9)
at updateEditor (Lexical.dev.mjs:8168:5)
at onSelectionChange (Lexical.dev.mjs:2424:3)
at HTMLDocument.onDocumentSelectionChange (Lexical.dev.mjs:3121:3)
Uncaught Error: Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update() or editorState.read().
at getActiveEditorState (Lexical.dev.mjs:7544:13)
at $getNodeByKey (Lexical.dev.mjs:800:39)
at _ParagraphNode.isAttached (Lexical.dev.mjs:3380:20)
at $isNodeValidForTransform (Lexical.dev.mjs:7582:41)
at $applyAllTransforms (Lexical.dev.mjs:7651:33)
at $beginUpdate (Lexical.dev.mjs:8099:9)
at updateEditor (Lexical.dev.mjs:8168:5)
at onSelectionChange (Lexical.dev.mjs:2424:3)
at HTMLDocument.onDocumentSelectionChange (Lexical.dev.mjs:3121:3)
All applications are using esbuild.
The expected behavior
It should work seamlessly in all the micro frontend application.
Steps taken to resolve it
- We kept all the lexical dependencies on the same versions i.e. latest version 0.16.1
- We have provided uniq namespace for each instance of the Lexical Editor.
