in nuxt3，I used antd design vue and wangEditor in the project, and antd reported an error when using it #5583
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
3.2.3
Environment
"nuxt": "3.0.0-rc.2"
"@wangeditor/editor": "^5.0.1",
"@wangeditor/editor-for-vue": "^5.1.11",
Reproduction link
https://github.com/chen-ccll/nuxt3-demo
Steps to reproduce
<template>
<div class="content">
<div class="card-container">
<a-tabs v-model:activeKey="activeKey" type="card">
<a-tab-pane key="1">
<template #tab>
<span>
<fire-outlined />
AAA
</span>
</template>
<div style="border: 1px solid #ccc">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
</div>
</a-tab-pane>
<a-tab-pane key="2">
<template #tab>
<span>
<question-outlined />
BBB
</span>
</template>
BBB
</a-tab-pane>
<a-tab-pane key="3">
<template #tab>
<span>
<edit-outlined />
CCC
</span>
</template>
<p>CCC</p>
</a-tab-pane>
</a-tabs>
</div>
</div>
</template>
<script setup>
import {
FireOutlined,
EditOutlined,
QuestionOutlined,
} from "@ant-design/icons-vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
definePageMeta({
layout: "custom",
});
const activeKey = ref("1");
const editorRef = shallowRef();
const mode = "default";
// 内容 HTML
const valueHtml = ref("<p>hello</p>");
// 模拟 ajax 异步获取内容
onMounted(() => {
setTimeout(() => {
valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
}, 1500);
});
const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
const handleCreated = (editor) => {
editorRef.value = editor; // 记录 editor 实例，重要！
};
useHead({
titleTemplate: `MoneyBoxs`,
});
</script>What is expected?
it can be work
What is actually happening?
[nuxt] [request error] window.cancelAnimationFrame is not a function
at caf (D:\nuxt3-demo\node_modules\ant-design-vue\lib_util\raf.js:22:19)
at Function.wrapperRaf.cancel (D:\nuxt3-demo\node_modules\ant-design-vue\lib_util\raf.js:61:10)
at immediate (D:\nuxt3-demo\node_modules\ant-design-vue\lib\menu\src\PopupTrigger.js:78:20)
at callWithErrorHandling (D:\nuxt3-demo\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:157:22)
at callWithAsyncErrorHandling (D:\nuxt3-demo\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:166:21)
at doWatch (D:\nuxt3-demo\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:1744:13)
at watch (D:\nuxt3-demo\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:1656:12)
at setup (D:\nuxt3-demo\node_modules\ant-design-vue\lib\menu\src\PopupTrigger.js:75:20)
at callWithErrorHandling (D:\nuxt3-demo\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:157:22)
at setupStatefulComponent (D:\nuxt3-demo\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:7027:29)