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().

[aanavadiya03]

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.

[etrepum]

This is a build issue on your end, you need to make sure they are both using the same exact lexical module. If you have two copies of lexical in separate chunks of your app, then they will not be compatible, you need to make sure only one lexical exists in your app.

[aanavadiya03]

@etrepum If two micro frontend applications use different versions, lets say (0.16.1 and 0.14.1) of the Lexical module, and are loaded at the same time on the browser. how can they be made compatible to operate within a single application?

[etrepum]

Currently no, it is only supported and tested to have at most one version of lexical on the page. Fixing it probably wouldn't be that much work, but testing it would be pretty tricky.

[aanavadiya03]

Is it on the roadmap to support more than one version?

[etrepum]

If someone contributes an example project that can be used to test it, then it can be supported

[etrepum]

Also note, that due to the nature of this issue (a global event handler that tries to manage events for all lexical editors on the page), when this is fixed, older versions of lexical (without the fix) will still have this bug and will never work with any other lexical version. For example, assuming this is fixed by 0.18.0: 0.16.1 will never be able to coexist with 0.18.0, but 0.18.0 could coexist with 0.19.0.

[ivailop7]

You can workaround this by using overrides in package.json to unify all packages to use the same lexical version.

[etrepum]

That workaround would only work if there is only one build of lexical included on the page. If the micro-frontends do not have a common chunk for lexical then the same problem will occur. The root cause isn't so much that the versions are different, but the identities of the modules and classes are different, which can occur if the same version of lexical is built multiple times and included in the same page.