uiwjs/react-codemirror

No SSR support (Remix): React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

RabeeAbuBaker opened this issue · 2 comments

RabeeAbuBaker commented

I have tried to use CodeMirror with Remix but it doesn't work and breaks instantly.

Here's a minimal reproduction link on codesandbox https://codesandbox.io/p/devbox/twilight-voice-33kd6j

Error:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
image
quangIle commented

@RabeeAbuBaker Hi

You can try my work around until react-codemirror support Remix SSR:

import { ClientOnly } from 'remix-utils/client-only'

...

<ClientOnly>
  {() => (
    <CodeMirror extensions={[python()]} value={codeValue} onChange={(value) => setCodeValue(value)} />
  )}
</ClientOnly>

Reference:
https://github.com/sergiodxa/remix-utils?tab=readme-ov-file#clientonly

RabeeAbuBaker commented

@RabeeAbuBaker Hi

You can try my work around until react-codemirror support Remix SSR:

import { ClientOnly } from 'remix-utils/client-only'

...

<ClientOnly>
  {() => (
    <CodeMirror extensions={[python()]} value={codeValue} onChange={(value) => setCodeValue(value)} />
  )}
</ClientOnly>

Reference: https://github.com/sergiodxa/remix-utils?tab=readme-ov-file#clientonly

Thanks @quangIle!
I have already used the above workaround and it's working fine, also there's another way to do it https://remix.run/docs/en/main/guides/migrating-react-router-app#client-only-components

But I'm wondering if this issue should still be open or get closed as the solutions are considered a "workaround".
I'll leave this to the admins to decide.

  • 👍2