Using antd in React servers Components: Super expression must either be null or a function

[MarkLyck]

Reproduction link

https://nextjs.org/examples

Steps to reproduce

Attempt to render an antd Table in a React server component.

const dataSource = [{ value: 'test' }]
const columns = [{
    title: 'Value',
    dataIndex: 'value',
    key: 'value',
}]

// React Server component in NextJS13
export default async function Page() {
  return <Table dataSource={dataSource} columns={} />
}

What is expected?

It should render the Table without throwing an error.

What is actually happening?

An error is thrown:

Uncaught TypeError: Super expression must either be null or a function
    at _inherits (webpack-internal:///(sc_server)/./node_modules/.pnpm/@babel runtime@7.18.9/node_modules/@babel/runtime/helpers/inherits.js:5:15)
    at eval (webpack-internal:///(sc_server)/./node_modules/.pnpm/rc-resize-observer@1.2.0_biqbaboplfbrettd7655fr4n2y/node_modules/rc-resize-observer/lib/SingleObserver/DomWrapper.js:16:28)
    at eval (webpack-internal:///(sc_server)/./node_modules/.pnpm/rc-resize-observer@1.2.0_biqbaboplfbrettd7655fr4n2y/node_modules/rc-resize-observer/lib/SingleObserver/DomWrapper.js:31:2)
    at (sc_server)/./node_modules/.pnpm/rc-resize-observer@1.2.0_biqbaboplfbrettd7655fr4n2y/node_modules/rc-resize-observer/lib/SingleObserver/DomWrapper.js (/Users/marklyck/web/formula-stocks/.next/server/app/dashboard/users2/page.js:9413:1)
    at __webpack_require__ (/Users/marklyck/web/formula-stocks/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./node_modules/.pnpm/rc-resize-observer@1.2.0_biqbaboplfbrettd7655fr4n2y/node_modules/rc-resize-observer/lib/SingleObserver/index.js:13:42)
    at (sc_server)/./node_modules/.pnpm/rc-resize-observer@1.2.0_biqbaboplfbrettd7655fr4n2y/node_modules/rc-resize-observer/lib/SingleObserver/index.js (/Users/marklyck/web/formula-stocks/.next/server/app/dashboard/users2/page.js:9424:1)
    at __webpack_require__ (/Users/marklyck/web/formula-stocks/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./node_modules/.pnpm/rc-resize-observer@1.2.0_biqbaboplfbrettd7655fr4n2y/node_modules/rc-resize-observer/lib/index.js:12:46)
    at (sc_server)/./node_modules/.pnpm/rc-resize-observer@1.2.0_biqbaboplfbrettd7655fr4n2y/node_modules/rc-resize-observer/lib/index.js (/Users/marklyck/web/formula-stocks/.next/server/app/dashboard/users2/page.js:9435:1)

Environment	Info
antd	4.24.1
React	18.2.0
System	Macos
Browser	Any

[github-actions[bot]]

You may look for issues:

1. 52% #36975

_{🤖 By issues-similarity-analysis}

[github-actions[bot]]

Hello @MarkLyck. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @MarkLyck, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

[silentim]

如果使用nextjs 13最新的app目录，任何antd组件都会是这个错误（包括@ant-design/icon等），只能在client components中使用。比如下面会出错：

/*   /app/page.tsx   */

import {Button} from 'antd';

export default function Page(){
    return <Button>ok</Button>
}

下面就正常：

/*   /app/page2.tsx   */

‘use client';

import {Button} from 'antd';

export default function Page(){
    return <Button>ok</Button>
}

还有任何组件的props中包含function也不能用（比如onClick，Pagination中的renderItem等）

可以参看nextjs文档：beta.nextjs.org