将 a.client 后缀添加到 my.jsx 或 .tsx 文件会破坏 Remix 中的导入

Question

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.

Answer 1

The .client suffix tells Remix to only include this in the client bundle.

Remember that Remix will render your route component on both the server and the client. By making Test a client-only component, it breaks if your route is server rendered ( Test is essentially undefined on the server).

If the component is truly client only, then you also need to use the <ClientOnly/> wrapper from remix utils.

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

This ensures that Remix does not try to render the component server-side.