In Next js 14 , Bug: Unhandled Runtime Error Error: Unable to find an active editor. This method can only be used synchronously during the callback of editor.update().

[saadi925]

My Lexical Version is : "@lexical/react": "^0.12.5",

Next js 14

import Editor from "@/components/editor/editor";
import { getPrepopulatedRichText } from "@/components/editor/utils/getPrepopulatedRichText";

export default function LexicalEditor(): JSX.Element {
  const {
    settings: { emptyEditor },
  } = useSettings();

  const initialConfig = {
    editorState: emptyEditor ? undefined : getPrepopulatedRichText,
    namespace: "Playground",
    nodes: [...PlaygroundNodes],
    onError: (error: Error) => {
      throw error;
    },
    theme: PlaygroundEditorTheme,
  };

.....

export function getPrepopulatedRichText() {
  const root = $getRoot();
  if (root.getFirstChild() === null) {
    const heading = $createHeadingNode("h1");
    heading.append($createTextNode("Welcome to the playground"));
    root.append(heading);
    const quote = $createQuoteNode();
    quote.append(
      $createTextNode(
        `In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. ` +
          `You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting.`
      )
    );
    root.append(quote);
    const paragraph = $createParagraphNode();
    paragraph.append(
      $createTextNode("The playground is a demo environment built with "),
      $createTextNode("@lexical/react").toggleFormat("code"),
      $createTextNode("."),....
      
      

import dynamic from "next/dynamic";
import { Logo } from "./logo";
const LexicalEditor = dynamic(() => import("./app"), { ssr: false });

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <LexicalEditor />
      <Logo />
    </main>
  );
}

The Specific Error Occurs in Next js 14 It keeps bugging , last time it was working fine with vite react

[etrepum]

Your code is not formatted correctly so I can't read it, but you probably have multiple versions of lexical installed. All installed lexical and @lexical/* packages must be the exact same version.

[saadi925]

@etrepum , what is the recommended version ? the error occurs in next js , when i use vite react , it works fine , but in next js , Unhandled Runtime Error Error: Unable to find an active editor. This method can only be used synchronously during the callback of editoe ,

even if i use in editor state read callback or editor.update callback may be , i don't know it's because how next js works , it is compiling it in a manner so it may becomes un accessible to editor enviroment , but i am using dynamic so ssr is off , it is a bug ? i am also using tip tap editor in another project of next js with extensive features , but since lexical is more flexible and nice so , i am waiting for this to fix

[etrepum]

It's not a bug, you just have multiple versions of lexical installed. If you look in your package-lock.json or your node_modules you'll find that the lexical version and the @lexical/react version are not exactly the same. I suggest updating all of them to the latest version and pinning a specific one. Other people are using lexical with next.js without an issue.

[lazakrisz]

hi @saadi925 , are you sure you're using the proper versions of lexical? I just had a very similar issue on my end as well. I'm currently working in a monorepo (turborepo) and in a different package then my frontend (which is also next.js) I had lexical installed but it was an outdated version. Since yarn hoisted the package to the root node_modules in my frontend I got conflicting lexical packages. It behaved strangely similar to your situation, ex.: errors were thrown (Unhandled Runtime Error Error: Unable to find an active editor.) I also couldn't type into the editor.

If you are not working in a monorepo do you have packages installed which could transitively use lexical? you can use yarn why <package_name> to see what installed a package, or the equivalent command with other package managers.

[saadi925]

@lazakrisz actually my lexical was the clone of lexical playground with a lot of features , but it was not starting correctly due to that error, as i have worked with other libraries like draft js and slate js, tiptap, but good to see that the community is active, hope it will get sorted out, thank you , i will surely check it.

[daifuyang]

I had the same problem, but after I re-changed package.json to 0.16.0, everything was fine.

[saadi925]

It's not a bug, you just have multiple versions of lexical installed. If you look in your package-lock.json or your node_modules you'll find that the lexical version and the @lexical/react version are not exactly the same. I suggest updating all of them to the latest version and pinning a specific one. Other people are using lexical with next.js without an issue.

it got solved , i am using 0.16 , which is latest , the reason it was not working cause i had 0.12 which does not support some features , thanks

[wangly19]

You must update the versions of [@ lexical/*] and [lexical] to be the same.