给.jsx/.tsx文件添加.client后缀导致Remix导入失败的原因排查

你遇到的问题核心在于Remix对.client/.server后缀的文件有特殊的编译处理逻辑，和纯TypeScript项目的普通文件处理完全不同：

1. Remix会把带.client后缀的文件标记为仅客户端组件，编译时会将其打包成独立的异步代码块，导出的不再是直接的组件函数，而是一个Promise对象。你用同步默认导入import Test from "~/components/Test.client"拿到的其实是这个Promise，而非组件本身，这就导致了报错里的“got: object”——因为Promise是对象，不是React能渲染的组件类型。

2. 纯TypeScript项目里没有这种特殊处理，.client只是文件名的一部分，导入的就是正常的默认导出组件，所以能正常运行。

解决方法 #

要正确导入Remix的客户端组件，你需要用异步导入的方式，配合React的Suspense或者remix-utils的ClientOnly组件：

方式一：用React.lazy + Suspense

// app/routes/index.tsx
import { Suspense } from "react";
const Test = React.lazy(() => import("~/components/Test.client"));

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

方式二：用remix-utils的ClientOnly组件

// app/routes/index.tsx
import { ClientOnly } from "remix-utils";

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Welcome to Remix</h1>
      <ClientOnly fallback={<div>加载中...</div>}>
        {() => import("~/components/Test.client").then(mod => mod.default)}
      </ClientOnly>
    </div>
  );
}

补充说明 #

Remix官方确实支持.client.tsx/.server.tsx后缀来区分组件运行环境，但这类文件的导入必须是异步的——服务端渲染时会跳过客户端组件的代码加载，只在浏览器端才会异步加载并渲染，这也是Remix优化SSR打包体积的机制之一。

内容的提问来源于stack exchange，提问作者John Curry