[Bug Report] [Component] Element-plus & server side rendering - wrong hydration for the menu component (ID_INJECTION_KEY not provided)

[leozengtao]

Bug Type: Component

Environment

• Vue Version: 3.2.31
• Element Plus Version: 2.1.9
• Browser / OS: Version 1.37.111 Chromium: 100.0.4896.79 (Official Build) (arm64) / macOS 12.3.1
• Build Tool: Vite

Reproduction

Related Component

• el-menu
• el-menu-item
• el-sub-menu

Reproduction Link

Github Repo

Steps to reproduce

git clone https://github.com/Zeng95/vue-airbnb-ssr.git
cd vue-airbnb-ssr
yarn install
yarn dev:ssr
open http://localhost:9000

ElementPlusError: [IdInjection] Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
usage: app.provide(ID_INJECTION_KEY, {
  prefix: number,
  current: number,
})
    at Object.debugWarn (/Users/leozeng/Desktop/projects/airbnb-ssr/node_modules/element-plus/lib/utils/error2.js:19:44)
    at Object.useId (/Users/leozeng/Desktop/projects/airbnb-ssr/node_modules/element-plus/lib/hooks/use-id/index2.js:18:11)
    at setup (/Users/leozeng/Desktop/projects/airbnb-ssr/node_modules/element-plus/lib/components/tooltip/src/tooltip4.js:65:24)
    at callWithErrorHandling (/Users/leozeng/Desktop/projects/airbnb-ssr/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)
    at setupStatefulComponent (/Users/leozeng/Desktop/projects/airbnb-ssr/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7079:29)
    at setupComponent (/Users/leozeng/Desktop/projects/airbnb-ssr/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7034:11)
    at renderComponentVNode (/Users/leozeng/Desktop/projects/airbnb-ssr/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:172:17)
    at renderVNode (/Users/leozeng/Desktop/projects/airbnb-ssr/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:295:22)
    at renderVNodeChildren (/Users/leozeng/Desktop/projects/airbnb-ssr/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:310:9)
    at renderElementVNode (/Users/leozeng/Desktop/projects/airbnb-ssr/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:361:17)

What is Expected?

终端没有任何报错

What is actually happening?

终端出现一处报错

Additional comments

在组件 MainHeader.vue 中如果注销 el-menu 及所有子组件，报错提示消失

[tolking]

Server rendering needs to inject a ID.

reference

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

此 issue 已被自动锁定，因为关闭后没有任何近期活动。如果有相关 bug，请重新创建一个新 issue。