Can't import component with filename suffix xx.client.jsx. Element type is invalid expected a string

[shadow rain]

I'm ultimately trying to get remix-utils to help me render a client-side-only component. Was lead to believe that a .client.tsx or .client.jsx file would help (even though I can't find it in the docs anywhere)

So I have this file:

// app/components/Test.client.jsx
export default function Test() {
  return <div>This is a test</div>;
}

being imported into my index.tsx file:

// app/routes/index.tsx
import Test from "~/components/Test.client";

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Welcome to Remix</h1>
      <Test />
    </div>
  );
}

Why won't this work? I've done this exact setup in a vanilla TypeScript app, and it works fine. Also, if I just remove the .client suffix it will import fine, but adding .client at the end of the file name somehow breaks the app and produces this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[trim gust]

You'll need both ClientOnly from remix-utils and *.client.tsx.

*.client.tsx tells Remix to bundle this file only for the client (and not for the server bundle).

ClientOnly tells Remix to skip the initial rendering on the server.

[shadow rain]

Thank you @trim gust It seems to be working. Now I just have to figure out why it's not working in the project that has the sanity cms in it. Appreciate the help.

[trim gust]

No prob, best of luck!