🐛[BUG] next.js build后无法使用ProTable，提示nU is not a function #9374
Description
提问前先看看：
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
🐛 bug 描述
next.js build后无法使用ProTable，提示nU is not a function
📷 复现步骤
创建一个页面，设置'use client'后，复制ProTable的Demo，build后访问对应页面。
🏞 期望结果
期望能正常展示表格
💻 复现代码
'use client';
import { DownOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';
const valueEnum = {
0: 'close',
1: 'running',
2: 'online',
3: 'error',
};
export type TableListItem = {
key: number;
name: string;
containers: number;
creator: string;
status: string;
createdAt: number;
memo: string;
};
const tableListDataSource: TableListItem[] = [];
const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];
for (let i = 0; i < 5; i += 1) {
tableListDataSource.push({
key: i,
name: 'AppName',
containers: Math.floor(Math.random() * 20),
creator: creators[Math.floor(Math.random() * creators.length)],
status: valueEnum[((Math.floor(Math.random() * 10) % 4) + '') as '0'],
createdAt: Date.now() - Math.floor(Math.random() * 100000),
memo:
i % 2 === 1
? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴'
: '简短备注文案',
});
}
const columns: ProColumns<TableListItem>[] = [
{
title: '应用名称',
width: 80,
dataIndex: 'name',
render: (_) => <a>{_}</a>,
},
{
title: '容器数量',
dataIndex: 'containers',
align: 'right',
sorter: (a, b) => a.containers - b.containers,
},
{
title: '状态',
width: 80,
dataIndex: 'status',
initialValue: 'all',
valueEnum: {
all: { text: '全部', status: 'Default' },
close: { text: '关闭', status: 'Default' },
running: { text: '运行中', status: 'Processing' },
online: { text: '已上线', status: 'Success' },
error: { text: '异常', status: 'Error' },
},
},
{
title: '创建时间',
tooltip: '这是一段描述',
width: 140,
key: 'since',
search: false,
dataIndex: 'createdAt',
valueType: 'date',
sorter: (a, b) => a.createdAt - b.createdAt,
},
];
const Demo = () => {
return (
<ProTable<TableListItem>
columns={columns}
request={(params, sorter, filter) => {
// 表单搜索项会从 params 传入，传递给后端接口。
console.log(params, sorter, filter);
return Promise.resolve({
data: tableListDataSource,
success: true,
});
}}
rowKey="key"
pagination={{
showQuickJumper: true,
}}
search={{
optionRender: false,
collapsed: false,
}}
dateFormatter="string"
headerTitle="表格标题"
toolBarRender={() => [
<Button key="show">查看日志</Button>,
<Button key="out">
导出数据
<DownOutlined />
</Button>,
<Button type="primary" key="primary">
创建应用
</Button>,
]}
/>
);
};
export default () => (
<div style={{ padding: 24 }}>
<Demo />
</div>
);
© 版本信息
- ProComponents 版本: 3.1.0-0
- "antd": "^6.1.0"
- "next": "15.3.6"
- 浏览器环境 Edge 143.0
- 开发环境 Ubuntu 24.04
🚑 其他信息
浏览器中的报错信息指向了@ant-design/pro-components/es/utils/useEditableArray/index.js:520:23，对应代码为
var _useLazyKVMap = useLazyKVMap(props.dataSource, 'children', props.getRowKey),
_useLazyKVMap2 = _slicedToArray(_useLazyKVMap, 1),
getRecordByKey = _useLazyKVMap2[0];
在yarn dev下不会触发这个问题