Using Lexical in Remix

[ember cedar]

Hello,

I'm trying to use lexical editor (v0.5.0) in Remix, however, I am getting the following error which is probably due to SSR rendering:

ReferenceError: document is not defined

I tried adding a condition check, however, it does not work:

{typeof document !== 'undefined' &&
  <RichEditor value={JSON.stringify(rules)} />
}

[jaunty kernel]

When you import the RichEditor package, it probably references document itself. Let me get a code example for how I use TinyMCE

It looks like @tinymce/tinymce-react doesn't have that problem. I'm not sure if you can use React.lazy in Remix, but you could do something like that. Or else check the RichEditor to see if it can accommodate ssr

[brave yarrow]

ohh I have a whole project using lexical in remix, feel free to search things

https://github.com/bespoke-surf/bespoke

[twin pecan]

use with clientOnly: https://github.com/sergiodxa/remix-utils#clientonly

[brave yarrow]

i dont think you need to wrap it with ClientOnly, lexical works without it

[ember cedar]

But I have a ImageNode and it basically uses document outside of the component

[spiral gate]

did you end up getting this done?

[ember cedar]

No 😄

Are you having the same issue? @spiral gate

[spiral gate]

i didn't try yet but still roaming in the wilderness of text editor

tiptap editorjs slate this idk man

[ember cedar]

So the thing is that you define plugins, and nodes, one of which is for images. And it uses document

[spiral gate]

omer i just use <ClientOnly> form remix tool

[ember cedar]

I'm not sure how @brave yarrow handled it..

[spiral gate]

it works just trust

so u wrap you component with <ClientOnly> <Editor/> </ClientOnly>

slate works, tiptap works and editorjs works with this

i think lexical will work too

[ember cedar]

https://github.com/sergiodxa/remix-utils#clientonly this one?

[spiral gate]

yes this makes it so that the components runs on client side only

[ember cedar]

Do u pass fallback?

[spiral gate]

yes just pass an empty div but its necessary

[ember cedar]

Ah

[ember cedar]

Cannot really see if you are really using the Editor component at all 🤔
apps/web/app/components/Editor.tsx

saw it nvm

Cannot really see how u r handling the ssr 🤷🏻‍♂️

[spiral gate]

you can't it can only run on client

thats y we use client only

[harsh sundial]

Some libraries do checking on import, not only when they are rendered. If that's the case for lexical, you will need to import it in a client.tsx file to tell remix to only try to import it in the browser.

So you can either move your component using Lexical to a .client.ts file and import that into your route, or make a lexical component that is basically export * from 'lexical' in a lexical.client.ts or similar, and import lexical from there instead of the module itself

[brave yarrow]

the repo i linked, do a Search for <Editor and also lexical

also do update to the latest version

[spiral gate]

@brave yarrow i wonder y u halted the project looks dope ngl

[brave yarrow]

We have gleaned valuable insights from this project, and a significant portion of it is currently in the process of being implemented and will soon be released. The marketing strategy for our Mailchimp alternative did not resonate well within the market. However, the aspect of capturing and engaging user data resonated strongly. As a result, we are currently in the process of revising and rewriting the entire project using Remix. We anticipate that it will be ready for release within the next two weeks, possibly sooner. [used chatgpt*]

Also I would say, we stuffed way too many features!

[pastel frost]

Most of client-only strategy so far as i see use hydrated, but i think it's not optimized ? My expectation is the rendering should happens at the rendering time instead of useEffect

Main issue as i see is some client-only component also SSR-able.

My expectation is, library author could/should provide 2 versions: Server version and client version.