使用Vite搭建React 19服务端组件遇异步组件报错求助

你的核心问题是：Vite默认不支持React Server Components（RSC）的构建时静态渲染，即使React文档提到无需服务器的RSC场景，也需要工具链提供编译支持——而Vite官方目前没有内置这个能力，得靠额外插件配置。

为什么会报错？ #

Vite默认将所有组件视为Client Components，而Client Components不允许使用async/await语法。你写的async组件没有被识别为Server Component，所以触发了这个错误。

具体解决步骤 #

1. 安装RSC支持插件
   社区提供了Vite插件来处理RSC的构建时渲染，比如vite-plugin-react-server-components：

   npm install vite-plugin-react-server-components --save-dev
   

2. 配置Vite启用静态RSC渲染
   修改vite.config.js，添加插件并启用静态渲染模式（构建时预渲染Server Components内容）：

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   import reactServerComponents from 'vite-plugin-react-server-components';
   
   export default defineConfig({
     plugins: [
       react(),
       reactServerComponents({
         static: true, // 开启构建时静态渲染，无需运行时服务器
       }),
     ],
   });
   

3. 验证组件识别
   确保你的async组件没有被错误标记为Client Component（即不要在文件顶部加'use client'）——默认情况下，不带'use client'的组件会被插件识别为Server Component。

注意事项 #

• React 19的RSC在Vite生态中仍处于实验性阶段，插件版本和React版本需要严格匹配，建议使用最新的稳定版。
• 如果你的Server Component中有异步逻辑（比如数据请求），需要确保这些逻辑能在构建阶段执行（比如使用静态数据或构建时可访问的数据源），这样才能完成预渲染。

内容的提问来源于stack exchange，提问作者Mahmoud K