Proper way to integrate a client-side only component?

[wondering639]

I need to integrate an editor (needs document object) into my Remix app. I got it working, but it still raises an error in the console.
This is the console error (chunk names removed for better readability):

Uncaught Error: document is not defined
    at updateDehydratedSuspenseComponent 
    at updateSuspenseComponent
    at beginWork
    at beginWork$1 
    at performUnitOfWork
    at workLoopSync 
    at renderRootSync
    at performConcurrentWorkOnRoot 
    at workLoop
    at flushWork 

This is my code:
_index.tsx with a Suspense function:

export default function Index() {
  const editorComponent = lazy(() => import("./EditorComponent"));
  const MemoizedEditorComponent = React.memo(editorComponent);

  return (
      <Suspense fallback={<div>Loading ...</div>}>
        <MemoizedEditorComponent />
      </Suspense>
  );
}

And the EditorComponent.tsx:

export default function EditorComponent() {
  const editor = useCreateBlockNote();
  return <BlockNoteView editor={editor} />;
}

So, what am I missing to prevent the console error?

[sergiodxa]

Render it inside ClientOnly from Remix Utils.

If just by importing it cause the error then also re-export it from a .client.ts file.

Also const editorComponent = lazy(() => import("./EditorComponent")); must happen outside the component, not inside.

[wondering639]

Thanks, ClientOnly worked perfect :-) (for others: needed to use npm install [email protected] as latest stable remix isn't yet using React Router 7 which remix-utils 8.0.0 expects)