Bug: Lexical Collaboration Plugin is not working properly with Next.js 14 app router

ductuannguyen1999 commented 1 week ago

My Lexical editor was working perfectly fine with Next.js page router. But after I updated my project to use Next.js App Router, the lexical editor's collaboration plugin was not working properly. Sometimes, the lexical changes are not synced between collaborators. I'm using y-websocket for the yjs Websocket provider. Does this has anything to do with how Next.js app router works?

Lexical version: ^0.14.5

Steps To Reproduce

Running the lexical playground in a Next.js app router project.

My code in page router and app router are exactly the same, but the issue occurs with app router: App router test page: (which has issue)

import LexicalWrapper from '../../modules/lexical/LexicalWrapper';
import EditorWrapper from '../../modules/lexical/EditorWrapper';

type Props = {}

function TestPage({ }: Props) {
    return (
        <LexicalWrapper fetchedNote={null}>
            <EditorWrapper fetchedNote={null} editorId='a25' />
        </LexicalWrapper>
    )
}

export default TestPage

Page router test page: (which works fine)

import EditorWrapper from "../modules/lexical/EditorWrapper"
import LexicalWrapper from "../modules/lexical/LexicalWrapper"

type Props = {}

function TestPage({ }: Props) {
    return (
        <LexicalWrapper fetchedNote={null}>
            <EditorWrapper editorId="client-1" fetchedNote={null} />
        </LexicalWrapper>
    )
}

export default TestPage

The current behavior

With the app router test page:

If I have two browsers accessing an empty note, in which the root is empty, and I start typing in one of the browser (browser A), the other browser (browser B) can sync successfully with the changes. However, as soon as I start typing in the browser B, the changes do not reflect in browser A's lexical editor. I'm thinking maybe either browser A is not sending the lexical changes to yjs for syncing or browser B cannot listen to the changes from yjs.

The expected behavior

Two browsers should sync the lexical changes successfully.

etrepum commented 1 week ago

All of the components that use lexical have to be "use client" and you should try updating to the latest lexical. Also make sure that lexical and all @lexical/* dependencies are the exact same version.

ductuannguyen1999 commented 1 week ago

All of the components that use lexical have to be "use client" and you should try updating to the latest lexical. Also make sure that lexical and all @lexical/* dependencies are the exact same version.

Hey @etrepum, thank you for your reply. I've tried adding "use client" to all my lexical components, and updated all lexical packages to the latest version. The collaboration seems to be working now with collaborators being able to edit on the same document. However, when I refresh the page, the updates disappeared. And after a few more updates, the updates restored. I'm using y-websocket server as the yjs provider for the collaboration plugin. This doesn't happen with the Next.js page router though. Would this have anything to do with the y-websocket server connection? What updates should I make to my Next.js app router page to fix this issue? I'm new to Next.js app router, so I apologize if there is any confusion in my question, and I would really appreciate your support :)

etrepum commented 1 week ago

I couldn't say what's going wrong without seeing all of the code, but my guess is that it has to do with how you're setting up the provider for the collab plug-in.

facebook / lexical