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

[muhammadmudasir1]

i create reactjs app which works fine but after i use react.lazy at multiple location not in editor and create a build it give the 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 (http://localhost:3000/static/js/bundle.js:755073:13)
at $getRoot (http://localhost:3000/static/js/bundle.js:748462:26)
at $rootTextContent (http://localhost:3000/static/js/bundle.js:747214:65)
at $isRootTextContentEmpty (http://localhost:3000/static/js/bundle.js:747236:14)
at $canShowPlaceholder (http://localhost:3000/static/js/bundle.js:747268:8)
at http://localhost:3000/static/js/bundle.js:747308:16
at readEditorState (http://localhost:3000/static/js/bundle.js:740294:12)
at EditorState.read (http://localhost:3000/static/js/bundle.js:741394:12)
at canShowPlaceholderFromCurrentEditorState (http://localhost:3000/static/js/bundle.js:723705:61)
at http://localhost:3000/static/js/bundle.js:723709:109

[etrepum]

This can happen if you have imported multiple versions of Lexical, unfortunately the callstack isn't enough information to help you with this issue. Can you reproduce this error and post the reproduction to github, stackblitz, or codesandbox so it can be inspected by someone else?

[CarinaSka]

Ref this, I suddenly started getting this same error on some occassions... It works fine in storybook ( with the same data). But when using in application it gives this error : Uncaught Error: Unable to find an active editor. This method can only be used synchronously during the callback of editor.update().
I´ve made sure that we use only one version of lexical. Any ideas on what to try? How to make sure that editor has value?! Only change we´ve made is converting to Vite. Anything there that should be mentioned to remember?

[etrepum]

Make sure you are only using import or only using require. Mixing both could cause problems. Are you using any third party packages that depend on lexical? Can you post a small project that reproduces this error?

Lexical is tested with vite, so as long as there isn't strange configuration that wouldn't cause a problem on its own.

[marwencherif]

I've encoutred the same issue, trying in a monorepo projects with a wbpackk (using Create React App)

[etrepum]

This issue is almost exclusively caused by mixing multiple versions of lexical or its dependencies in the same project. All lexical packages must be the exact same version.

[rodrigolungui]

Hey @etrepum, I hope you are well!

What do you mean "almost"?

I'm also experiencing this issue and still haven't realized what's happening. I'm trying to update lexical libraries from version 0.12.5 (which works fine) to 0.16.0. I'm not mixing imports/require, I only use imports in my project. I tried some versions between these, and it worked fine until the 0.14.1.

It seems the error comes from either the RichTextPlugin or PlainTextPlugin.
Here's the code:

import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
...
<RichTextPlugin
    contentEditable={<ContentEditable />}
    placeholder={<div>{placeholder}</div>}
    ErrorBoundary={LexicalErrorBoundary}
/>
...

I also checked the lock file, and the only version I can see from Lexical is 0.16.0, so I'm not mixing versions.

[etrepum]

next.js and other build tools often have caches that are not implemented correctly, try removing .next and node_modules and do a fresh install & build so you have a clean environment next time you test it. Other than that, without a more complete picture of what's going on (e.g. a full reproduction of the issue in an environment that I can inspect), I can't provide any more specific suggestions.

[Arweil]

The problem is that Lexical.dev.js and Lexical.dev.mjs are used simultaneously in the Lexical package, causing editor state exceptions.

The use of Lexical.dev.js is caused by the @lexical/react/LexicalComposer package.

The webpack v4 does not support the use of the exports field in package.json.

resolve: {
    alias: {
      '@lexical/react/LexicalComposer': '@lexical/react/LexicalComposer.mjs',
    },
},

Use the above code to fix the reference problem.

[nickelaos]

Thanks, Arweil.
It helped fix the error for ReachEditor.
But the issue persists when I'm trying to add ToolbarPlugin.
Could you help me with this, please?
I use the code from the official documentation here:
https://lexical.dev/docs/getting-started/react#adding-ui-to-control-text-formatting
My Webpack version: 4.43.0

[prasadpendke]

I am also facing similar issue which @nickelaos is facing.
@Arweil Can you please help to solve the issue ?

[Rohit1508]

Hi @nickelaos,

Did you find the fix?

[Tetiana-V-Kovalenko]

Hi, @nickelaos
Have you resolved the issue with Webpack 4 and lexical?

[FerdinandObermeier]

I’m facing the same issue. Did anyone find a solution yet?

[Tetiana-V-Kovalenko]

I’m facing the same issue. Did anyone find a solution yet?

No, I still couldn’t. Currently, Lexical only works with Webpack 5. However, we were able to use Slate.js for our needs.