Collaboration example doesn't work correctly in Next.js

[Hypercoded]

Lexical version: 0.4.1

Steps To Reproduce

1. Create a component with the example from https://lexical.dev/docs/collaboration/react
2. Import the component without SSR from a Next.js page
3. Spin up a y-websocket server
4. Build the NextJS project and start it
5. Open the page, chrome developer tab mentions this error: Yjs was already imported. yjs/yjs#438

Link to code example: https://lexical.dev/docs/collaboration/react

The current behavior

Collaboration works as intended

The expected behavior

The editor doesn't update between instances. (Typing something in one editor will not show up in the other editor)
"Yjs was already imported. This breaks constructor checks and will lead to issues! - yjs/yjs#438"

[ehsaaniqbal]

Hey @Hypercoded, try the following steps:

• Add the following line to your webpack config in next.config.js, so all imports point to the same version of yjs webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } ) => { config.resolve.alias.yjs = path.resolve("node_modules/yjs/dist/yjs.cjs"); return config; },
• When importing yjs, use the cjs version const Y = require("yjs");

[Hypercoded]

Hey @Hypercoded, try the following steps:

• Add the following line to your webpack config in next.config.js, so all imports point to the same version of yjs webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } ) => { config.resolve.alias.yjs = path.resolve("node_modules/yjs/dist/yjs.cjs"); return config; },
• When importing yjs, use the cjs version const Y = require("yjs");

Got it, thank you. That works!