lexical icon indicating copy to clipboard operation
lexical copied to clipboard

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

Open Zian502 opened this issue 1 year ago • 21 comments

Lexical version:

Lexical version: 0.16.1 Browser: Chrome latest version Device: mac

Steps To Reproduce

Link to code example:

The current behavior

The expected behavior

Impact of fix

Zian502 avatar Jul 31 '24 12:07 Zian502

Generally this happens when you have multiple versions of lexical in the same app, or you are calling a state helper or node method from outside editor.update or editorState.read.

etrepum avatar Jul 31 '24 19:07 etrepum

Generally this happens when you have multiple versions of lexical in the same app, or you are calling a state helper or node method from outside editor.update or editorState.read.

I have the same problem with this issues: https://github.com/facebook/lexical/issues/5934

Zian502 avatar Aug 01 '24 01:08 Zian502

The version has been downgraded to 0.14.1 and is operational

Zian502 avatar Aug 01 '24 01:08 Zian502

Generally this happens when you have multiple versions of lexical in the same app, or you are calling a state helper or node method from outside editor.update or editorState.read.

I'm not sure if it has anything to do with the webpack version, I'm currently using webpack 4

Zian502 avatar Aug 01 '24 01:08 Zian502

It's likely that the problem is your webpack configuration. If you are not otherwise mixing versions or esm/cjs imports, the webpack configuration may be doing this in a way that's not as obvious.

etrepum avatar Aug 01 '24 01:08 etrepum

It's likely that the problem is your webpack configuration. If you are not otherwise mixing versions or esm/cjs imports, the webpack configuration may be doing this in a way that's not as obvious.

First of all, there is definitely no version mixing. Can you tell me how to change the WebPack-related configuration to solve this problem

Zian502 avatar Aug 01 '24 06:08 Zian502

I don't know what's wrong with your configuration, it should work with the defaults at least with recent versions. Other people are successfully using current lexical with webpack.

etrepum avatar Aug 01 '24 14:08 etrepum

Hi, I encounter same issue, I'm sure that we didn't mix up the lexical version and not build tool cache, any advise to chase this issue ?

carrymaniac avatar Aug 02 '24 02:08 carrymaniac

In every case I've seen it's either mixed versions or some other bundler configuration issue that causes multiple copies to be included on the same page. Without a full reproduction of the issue I couldn't give you any more specific advice than that. Maybe make sure you are using a current version of the bundler tooling (webpack, vite, rollup, etc.)

etrepum avatar Aug 02 '24 04:08 etrepum

Same problem

nickelaos avatar Aug 21 '24 12:08 nickelaos

Try upgrading to webpack 5

etrepum avatar Aug 21 '24 13:08 etrepum

We cannot update Webpack now because there are changes that are breaking, and our project is very large. Is it possible to fix this issue in a different way? Webpack version: 4.43.0.

nickelaos avatar Aug 21 '24 13:08 nickelaos

You would need to manually make sure all of the lexical modules are using the correct exports, or maybe find an old webpack 4 plug-in for supporting the exports field of package.json

etrepum avatar Aug 21 '24 14:08 etrepum

We tried the demo code described in the official docs here: https://lexical.dev/docs/getting-started/react How to adjust this code to have correct exports?

nickelaos avatar Aug 21 '24 14:08 nickelaos

Our goal is to have something similar to this demo: https://playground.lexical.dev/?showTreeView=false

nickelaos avatar Aug 21 '24 14:08 nickelaos

Sorry, I'm not an expert in webpack 4 configuration. You need to make sure every lexical module (lexical, @lexical/react, etc.) is resolved to the correct mjs file.

etrepum avatar Aug 21 '24 14:08 etrepum

That's the kind of problem that should be handled at the library level, not application level. I have added lexical and I'm having the exact same issue pasting code from lexical documentation.

canibanoglu avatar Oct 31 '24 11:10 canibanoglu

The library simply cannot function when multiple versions are present. If you've installed it correctly, with a consistent version, you should not get this error.

etrepum avatar Oct 31 '24 14:10 etrepum

npm install --save lexical @lexical/react is what I used, I can't imagine how I would install it incorrectly. It can be made to work if you add aliases in your webpack config for every imported module but it is not how things should be.

canibanoglu avatar Oct 31 '24 17:10 canibanoglu

If you got this error then you have multiple versions, I can't tell you what went wrong without being able to inspect your project, but there's really nothing we can do about it if your package.json or package-lock.json doesn't satisfy the constraints or your bundler configuration is not setup correctly with modern tools.

etrepum avatar Oct 31 '24 18:10 etrepum

Sure there is.

  • Have an actually useful error message. You yourself have mentioned in another issue that the message is not helpful to diagnose to issue.
  • Put the package.json and package-lock.json constraints you speak of in the documentation.
  • Mention somewhere, anywhere that using webpack versions < 5 will cause this issue. See here.

I daresay any combination of the above would be more useful and helpful than telling people that they have multiple versions even after they tell you the command they used to install (which incidentally is copy/pasted from the documentation).

canibanoglu avatar Oct 31 '24 22:10 canibanoglu

Interestingly, I ran into this error today 😄. In my case, it was caused by calling $getSelection outside the editor context. I fixed it by passing the editor instance into the function that needed it 🙌. If anyone else hits this issue, it's worth checking that you're only accessing editor-based state like selections within an editor.update() context.

Adebesin-Cell avatar May 11 '25 19:05 Adebesin-Cell