Can I use Lexical with Remix?

[rodolphoasb]

Hey, I stumbled upon this issue in the lexical repo and was wondering if this changes with v2.

Is it possible to use Lexical with Remix?

[kiliman]

Typically with components that don't really support SSR, you would wrap that in a <ClientOnly> component from remix-utils

First create a lexical.client.tsx file and re-export all the lexical functions

// components/lexical.client.tsx
export * from 'lexical'
export * from '@lexical/react'

Then in your route, import ClientOnly and your lexical components

// routes/editor.tsx
import { ClientOnly } from 'remix-utils'
import { LexicalComposer } from '~/components/lexical.client'

export default Component() {
  return (
    <ClientOnly fallback={<p>Loading</p>}>
      {() => (
        <LexicalComposer>
          //...
        </LexicalComposer>
      )}
    </ClientOnly>
  )
}

[luisrudge]

@rodolphoasb did you figure this one out? @kiliman's solution doesn't work because there's no export from @lexical/react

[luisrudge]

oh.. you mean replacing all the plugin imports with clientonly? hmm.. that might work. I didn't try that, but I tried

<ClientOnly>
  {()=><Editor/>}
</ClientOnly>

and it didn't work because the code that throws the error runs when it's imported, not when it's run.

example: https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/ImagesPlugin/index.tsx#L262

[rodolphoasb]

Hope this helps: https://cap.link/3pbwz9jdjhtf4zy

[luisrudge]

Thanks, I appreciate the help! I'll try this if I need one of those plugins!

[luisrudge]

I tested this approach and it still doesn't work

//imports
import { ClientOnly } from 'remix-utils/client-only';
import ComponentPickerPlugin from './plugins/ComponentPickerPlugin';


//rendering
<AutoFocusPlugin />
<ClearEditorPlugin />
<ClientOnly>{() => <ComponentPickerPlugin />}</ClientOnly>
<EmojiPickerPlugin />
<AutoEmbedPlugin />

error:

seems like the LexicalTypeaheadMenuPlugin import is already reading from document, which is throwing right away

[luisrudge]

oh, duh. I had to wrap other plugins in the 😅
it works now. do you also get a bunch of log messages like this?