In next.js 13, Error: Unable to find an active editor state

[maccomaccomaccomacco]

Describe the bug Trying to use Verbum in a Next.js project, I get the following error

Unhandled Runtime Error
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().

To Reproduce Steps to reproduce the behavior:

1. create a next.js 13 project
2. define a component with the following code

'use client'

import {
    EditorComposer,
    Editor,
    ToolbarPlugin,
    AlignDropdown,
    InsertDropdown,
  } from 'verbum';
  
  const Verbum = () => {
    return (
      
    <EditorComposer>
        <Editor hashtagsEnables={true}>
        <ToolbarPlugin defaultFontSize="20px">
            <InsertDropdown enablePool={true} />
            <AlignDropdown />
        </ToolbarPlugin>
        </Editor>
    </EditorComposer>
    );
  };
  
  export default Verbum;

3. import the component into src/app/page.jsx
4. run the next.js application yarn run dev
5. you'll get the error

Expected behavior No error in next.js and Lexical editor rendered

Screenshots

Desktop (please complete the following information):

• OS: MacOS moneterey 12.2.1
• chrome

[reza-madani]

Describe the bug Trying to use Verbum in a Next.js project, I get the following error

Unhandled Runtime Error
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().

To Reproduce Steps to reproduce the behavior:

1. create a next.js 13 project
2. define a component with the following code

'use client'

import {
    EditorComposer,
    Editor,
    ToolbarPlugin,
    AlignDropdown,
    InsertDropdown,
  } from 'verbum';
  
  const Verbum = () => {
    return (
      
    <EditorComposer>
        <Editor hashtagsEnables={true}>
        <ToolbarPlugin defaultFontSize="20px">
            <InsertDropdown enablePool={true} />
            <AlignDropdown />
        </ToolbarPlugin>
        </Editor>
    </EditorComposer>
    );
  };
  
  export default Verbum;

3. import the component into src/app/page.jsx
4. run the next.js application yarn run dev
5. you'll get the error

Expected behavior No error in next.js and Lexical editor rendered

Screenshots

Desktop (please complete the following information):

• OS: MacOS moneterey 12.2.1
• chrome

I have same problem

[geekyayush]

Facing the same issue. Any solution?

[geekyayush]

@marcoautiero @reza-madani were you able to solve this?