New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: CollaborationPlugin not working with minimal code example #2153
Comments
Have you test the Playground version? If you clone the Lexical repository locally and do |
Playground worked fine but I need to use it outside, I have tired copy the playground code to my next.js based repo with no ssr , but I get wrong with "should never happen" message on one of collaboration tab console when I edit on another tab. I guess it maybe caused by the runtime environment, so I start a new vite repo to reproduce it and get this result. |
I have updated code to lexical playground version(only RichTextPlugin, CollaborationPlugin and WebsocketProvider), land still don't work, did I missed something? |
Hey @jullite. Were you able to resolve this? |
sorry, I'm quite not familiar with this codebase. |
Have you made sure you're handling bootstrapping properly? I.e. the |
All you mentioned above have been put in the right place except the collaboration context, is the SharedHistoryContext on playground? Then I tried to put it in my codebase but still don't work. <LexicalComposer initialConfig={initialConfig}>
<SharedHistoryContext>
<RichTextPlugin
contentEditable={<ContentEditable className="editor-input" />}
placeholder={<div>type here</div>}
initialEditorState={null}
/>
<CollaborationPlugin
id="main"
providerFactory={createWebsocketProvider}
shouldBootstrap={true}
/>
</SharedHistoryContext>
</LexicalComposer>` |
Hello! I'm struggling with something similar myself. I'm able to get the playground running locally with collaboration on 🎉 Local PlaygroundBut when I try to get the same playground code to run outside of the lexical codebase, collaboration doesn't work. I get the generic Should never happen error 😭 Note: Getting the playground to at least load and work outside of the lexical repo requires a lot of changes, you have to transform all of the imports from named imports to default imports. Standalone PlaygroundI'm still debugging this , it seems that it fails because getOrInitCollabNodeFromSharedType is returning undefined at some point. Hoping someone else has gotten this to work? @jullite @hustlefueled maybe? @trueadm Any idea why I see this error or how to fix it? Thank you! |
@iamzapata Are you ensuring that the RichTextPlugin is passing in |
@trueadm So I have the same code from packages/lexical-playground: <RichTextPlugin
contentEditable={<ContentEditable />}
placeholder={placeholder}
initialEditorState={
isCollab ? null : emptyEditor ? undefined : prepopulatedRichText
}
/> But even setting the I'm going to keep trying, but I feel the playground should be decoupled from the packages and work outside of it. Thank you for lexical though, I'm really excited about it. |
The playground isn’t doing anything special. Make sure you add the collaboration context too for the doc map. |
I could make collaboration edit with what I did was
But, i still fail and struggling with error when I run I also removed all other plugins and nodes
And I guess the key is build options, but I still trying to figure it out. code here: |
I still haven't been able to make collaboration work locally. I continue getting the "error while handling a Yjs update error: should never happen" error Everything but the build setup is identical to the playground, I'm using vite though. I extracted the playground from the lexical, can be found here: https://github.com/iamzapata/lexical-test |
Did you resolve the issue of having multiple Yjs loaded? I can't access https://github.com/iamzapata/lexical-test, it seems to 404. |
@trueadm Hi, can you please check the link again. And related to your question:
I do see this warning you're mentioning:
I can open two windows, turn on collaboration on both. Then I will type something in one window and right away, in the other window, I get this error:
|
After I changed So, I think we can solve this problem in two ways: Fork And Build Lexical packeges in development (which I will try), Or Change vite build config. Sorry, I'm not familiar with js bundle and build, so I can't describe the problem much. |
I think this seems like an issue with Vite where it's unable to handle a CJS and an ESM import of the same package. I guess this will be resolved in the future when Lexical also supports ESM, but that's quite complex to support right now (as we have DEV and PROD variants, which I'm unsure how would work in an ESM world). |
@jullite @iamzapata my mate solved the vite build problem.
please try this. |
@fomachanyade I confirm making this change makes the collaboration work locally. Thank you! =) |
Is this the only thing we need to do to get the collaboration working on a separate project? I was not able to make the collaboration work by adding this to my vite config file. |
Hi @ebads67 I think so? Check this repo out and let me know: https://github.com/iamzapata/lexical-collab |
Okay I could actually make it work. The fix was slightly different than what proposed here:
|
Hey @ebads67 were you able to test collaboration and sync data back to your backend server? I've tested yjs connection and it works but it outputs the binary message when I log what it's sending to the server. |
Yes I did. I'd suggest checking the repo mentioned above. |
Too many repos mentioned above. Would be kind to share the link again. Sorry for the trouble.
Sent via Superhuman ( ***@***.*** )
…On Fri, Jun 24, 2022 at 15:38:12, Ebad < ***@***.*** > wrote:
>
>
> Hey @ ebads67 ( https://github.com/ebads67 ) were you able to test
> collaboration and sync data back to your backend server?
>
>
>
> I've tested yjs connection and it works but it outputs the binary message
> when I log what it's sending to the server.
>
>
Yes I did. I'd suggest checking the repo mentioned above.
—
Reply to this email directly, view it on GitHub (
#2153 (comment) ) ,
or unsubscribe (
https://github.com/notifications/unsubscribe-auth/AVDFMEHVHVCQXSALVX2JN2DVQWCIZANCNFSM5VXWKW7Q
).
You are receiving this because you were mentioned. Message ID: <facebook/lexical/issues/2153/1165420271
@ github. com>
|
The one mentioned by @iamzapata. https://github.com/iamzapata/lexical-test |
Thank you. 🙏
Sent via Superhuman ( ***@***.*** )
…On Fri, Jun 24, 2022 at 15:45:35, Ebad < ***@***.*** > wrote:
>
>
> Too many repos mentioned above. Would be kind to share the link again.
> Sorry for the trouble. Sent via Superhuman ( *@*.*** )
> … ( # )
> On Fri, Jun 24, 2022 at 15:38:12, Ebad < *@*.*** > wrote: > > > Hey @
> ebads67 ( https:/ / github. com/ ebads67 ( https://github.com/ebads67 ) )
> were you able to test > collaboration and sync data back to your backend
> server? > > > > I've tested yjs connection and it works but it outputs the
> binary message > when I log what it's sending to the server. > > Yes I
> did. I'd suggest checking the repo mentioned above. — Reply to this email
> directly, view it on GitHub ( #2153 (comment) (
> #2153 (comment) ) )
> , or unsubscribe ( https:/ / github. com/ notifications/ unsubscribe-auth/
> AVDFMEHVHVCQXSALVX2JN2DVQWCIZANCNFSM5VXWKW7Q (
> https://github.com/notifications/unsubscribe-auth/AVDFMEHVHVCQXSALVX2JN2DVQWCIZANCNFSM5VXWKW7Q
> ) ). You are receiving this because you were mentioned. Message ID: < / issues/
> 2153 ( #2153 ) /1165420271 @
> github. com>
>
>
The one mentioned by @ iamzapata ( https://github.com/iamzapata ). https:/
/ github. com/ iamzapata/ lexical-test (
https://github.com/iamzapata/lexical-test )
—
Reply to this email directly, view it on GitHub (
#2153 (comment) ) ,
or unsubscribe (
https://github.com/notifications/unsubscribe-auth/AVDFMEGO63L7I64GFF2TDD3VQWDEPANCNFSM5VXWKW7Q
).
You are receiving this because you were mentioned. Message ID: <facebook/lexical/issues/2153/1165426498
@ github. com>
|
The fix worked for me. the initial error I was hitting was yjs/yjs#438 It would still be useful to understand why the playground does not need that config https://github.com/facebook/lexical/blob/5d0a07a4c9fbd4d33832c824f68a7ec16e47d5f6/packages/lexical-playground/vite.config.js and why it is needed when the collab feature is used in a separated project. |
@echarles Sometimes there are nested Another reason for the error message is that some complex build system import both the commonjs ( You can resolve both issues by specifying explicitly which version you want to use. In webpack and other bundlers, you can set an alias: |
Yeah, absolutely, I have learned that some time ago for other libraries, like e.g. React which is also sensible to mixed versions, and have a few tips to overcome that: you can specify "resolutions" In the local env case I am referring in this issue, I have double checked with a
That could be indeed the root cause. I don't know how to check.
Yes, this is the workaround documented in this issue and it works. I found it a bit fragile, especially when you have a monorepo managed with tools like lerna, and also when that monorepo is onboarded in yet another complex other monrepo. You don't have guarantee at which level of your tree the single yjs package will end-up. |
@trueadm is this a hard requirement for collaboration in Lexical? Is there any way to have an initial state? |
@knpwrs Yes. As the initial state comes from the Y.Doc for consistency reasons. |
@fomachanyade I can't thank you and your mate enough for this. The alias suggestion in the vite config resolved the error of duplicate import. I have wasted several hours today trying to work this out. I hope that lexical exposes ES6 exports to avoid Vite users to go through this..
|
The right answer, thanks. |
Guys i have an problem, i use Electron + Vite and i try to add alias but it gave me the same error: import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
main: {
plugins: [externalizeDepsPlugin()]
},
preload: {
plugins: [externalizeDepsPlugin()],
},
renderer: {
resolve: {
alias: {
yjs: resolve("node_modules/yjs/src/index.js"),
'@renderer': resolve('src/renderer/src')
}
},
plugins: [react()]
}
}) |
Lexical version:0.2.9
browser: chrome lasted version
computer: mac
Steps To Reproduce
Link to code example:
https://github.com/jullite/hello-lexical
The current behavior
content of editor not sync between two tabs
The expected behavior
content of editor will sync between two tabs
The text was updated successfully, but these errors were encountered: