Next.js 13使用Container.Window报错：Unsupported Server Component type: undefined

问题场景 #

在Next.js 13 App Router中，当服务端组件Page尝试通过Container.Window的方式调用挂载在客户端组件Container上的Window组件时，抛出错误：

"Unsupported Server Component type: undefined"

复现代码 #

1. 服务端组件 Page #

import { Container } from '../components/Container'
export default function index() {
  return (
    <Container>
        <Container.Window>
            <h1>12345</h1>
        </Container.Window>
    </Container>
  )
}

2. 客户端组件 Container #

'use client';
import { Window } from './Window';

export const Container = ({ children }) => {
  return children;
};

Container.Window = Window;

3. 客户端组件 Window #

"use client";
export const Window = ({ children }) => {
  return children;
};

已验证的临时方案（不符合需求） #

• 单独导入Window组件直接使用：无报错
• 将Container改为服务端组件：无报错
• 将Page改为客户端组件：无报错

但需求是保留Container.Window的链式调用方式，以下是可行解决办法：

可行解决方案 #

原因说明 #

Next.js服务端渲染时，仅能识别客户端组件的静态导出内容，而把Window挂载到Container函数上属于运行时赋值，服务端在构建阶段无法解析这个属性，因此会判定Container.Window为undefined，触发报错。

方法1：静态导出组合对象 #

修改Container组件的导出逻辑，直接导出包含Container和Window的对象，而非运行时挂载：

'use client';
import { Window } from './Window';

export const Container = ({ children }) => {
  return children;
};

// 导出组合对象
export default {
  Container,
  Window
};

Page组件中导入并使用：

import Layout from '../components/Container'
export default function index() {
  return (
    <Layout.Container>
        <Layout.Window>
            <h1>12345</h1>
        </Layout.Window>
    </Layout.Container>
  )
}

方法2：新增服务端可访问的导出模块 #

新建一个无需'use client'声明的导出模块（如ContainerExport.js），在其中完成组件关联：

import { Container } from './Container';
import { Window } from './Window';

// 这里的关联是静态的，服务端能解析到
Container.Window = Window;

export { Container };

Page组件中导入该模块：

import { Container } from '../components/ContainerExport'
export default function index() {
  return (
    <Container>
        <Container.Window>
            <h1>12345</h1>
        </Container.Window>
    </Container>
  )
}

方法3：TypeScript类型增强（可选） #

如果项目使用TypeScript，可以通过类型声明增强Container组件的类型，确保Container.Window有正确的类型提示，同时配合方法2的静态导出使用：

// Container.tsx
'use client';
import { Window } from './Window';

export const Container = ({ children }) => {
  return children;
};

// 类型声明
declare module './Container' {
  export interface Container {
    Window: typeof Window;
  }
}

这样既能保留Container.Window的调用方式，又能让服务端正确识别组件，避免报错。

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