我使用了React18的版本，但在项目运行时报了react__WEBPACK_IMPORTED_MODULE_1___default(...).useId is not a function 错误

[Andy-lm]

重现步骤

在线示例链接：（必填）

这是我的使用实例：
import React, { useState, useEffect, Fragment, Component } from 'react';
import { Welcome, Sender, ThoughtChain } from '@ant-design/x';
import { Drawer, Button, Card, Typography } from 'antd';
import { CodeTwoTone, CheckCircleOutlined, MoreOutlined } from '@ant-design/icons';
const { Paragraph, Text } = Typography;
import styles from './index.less';

const customizationProps = {
title: 'Thought Chain Item Title',
description: 'description',
icon: ,
extra: <Button type="text" icon={} />,
footer: Thought Chain Item Footer,
content: (


In the process of internal desktop applications development, many different design specs and
implementations would be involved, which might cause designers and developers difficulties
and duplication and reduce the efficiency of development.


After massive project practice and summaries, Ant Design, a design language for background
applications, is refined by Ant UED Team, which aims to{' '}

uniform the user interface specs for internal background projects, lower the unnecessary
cost of design differences and implementation and liberate the resources of design and
front-end development



),
};

class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

static getDerivedStateFromError(error) {
// 更新 state 使下一次渲染能够显示降级后的 UI
return { hasError: true };
}

componentDidCatch(error, errorInfo) {
// 你同样可以将错误日志上报给服务器
console.error('1111111111', error, errorInfo);
}

render() {
if (this.state.hasError) {
// 你可以自定义降级后的 UI 显示
return

Something went wrong.

;
}
return this.props.children;
}
}

const items = [
{
title: 'Thought Chain Item Title',
description: 'description',
extra: <Button type="text" icon={} />,
},
{
title: 'Thought Chain Item Title',
description: 'description',
extra: <Button type="text" icon={} />,
},
{
title: 'Thought Chain Item Title',
description: 'description',
extra: <Button type="text" icon={} />,
},

{
title: 'Thought Chain Item Title',
description: 'description',
extra: <Button type="text" icon={} />,
},
];

const AIInput = (props) => {
const [visible, setVisible] = useState(true);

useEffect(() => {}, []);

return (

<Sender
className={styles.aiInput}
submitType="enter"
placeholder="请一句话概括你的需求~比如：我想实现一个抽奖组件"
onSubmit={(editor) => {
if (editor === '帮我实现一个点赞组件') {
setVisible(true);
} else {
setVisible(false);
}
console.log(editor, '==editor, value');
}}
/>

<CodeTwoTone onClick={() => setVisible(true)} />

<Drawer
open={visible}
title="AI 调用结果"
placement="right"
onClose={() => setVisible(false)}
width={400}
>

<Card style={{ width: 500 }}>

);
};

export default AIInput;

当前行为

No response

预期行为

No response

上下文

No response

版本

1.0.6

您在哪些浏览器上遇到了这个问题？

Chrome

[petercat-assistant]

您遇到的错误信息 react__WEBPACK_IMPORTED_MODULE_1___default(...).useId is not a function 通常是由于 React 版本不匹配或库版本不兼容导致的。useId 是 React 18 中引入的一个新 Hook，因此确保您使用的是 React 18 或更高版本。

以下是一些可能的解决方案：

1. 检查 React 版本:

   • 确保您的项目中安装的 React 和 React DOM 版本都是 18 或更高。您可以在 package.json 中查看并更新这些依赖项。

2. 更新依赖:

   • 运行以下命令以更新 React 和 React DOM 到最新版本：

     npm install react@latest react-dom@latest

3. 检查其他依赖:

   • 确保所有使用的库（如 @ant-design/x 和 antd）与 React 18 兼容。您可能需要查看这些库的文档或更新它们。

4. 清理缓存:

   • 有时，缓存可能会导致问题。尝试清理 npm 缓存并重新安装依赖：

     npm cache clean --force
     npm install

如果您已经确认所有版本都是兼容的，但问题仍然存在，请提供更多的上下文或错误日志，以便进一步帮助您。

如果需要进一步的帮助，请在评论中描述您的问题并 @petercat-assistant 开始与我对话。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[kimteayon]

您好可以准备一个 caodesandbox 来描述您的问题 https://codesandbox.io/p/sandbox/ant-design-x-box-vmqvt8?file=%2Fsrc%2FApp.tsx%3A296%2C1-301%2C7