Skip to content

fix(ssr): dedupe inherited scope ids during vnode rendering#15005

Merged
edison1105 merged 1 commit into
mainfrom
edison/fix/ssr-scope-id-dedupe
Jun 25, 2026
Merged

fix(ssr): dedupe inherited scope ids during vnode rendering#15005
edison1105 merged 1 commit into
mainfrom
edison/fix/ssr-scope-id-dedupe

Conversation

@edison1105

@edison1105 edison1105 commented Jun 25, 2026

Copy link
Copy Markdown
Member

close #12159
close #12175

Summary by CodeRabbit

  • Bug Fixes
    • Fixed duplicate scope identifiers in server-rendered output for recursive component and root rendering cases.
    • Improved handling of inherited and slot-related scope IDs so they are only applied once, preventing repeated attributes in rendered HTML.
  • Tests
    • Added coverage for recursive SSR scenarios to verify scope IDs remain unique in the final output.

@coderabbitai

coderabbitai Bot commented Jun 25, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

SSR element rendering now avoids appending duplicate scope IDs, and the SSR scopeId spec adds recursive component-root cases that verify a single comp scopeId in the output.

Changes

SSR scopeId de-duplication

Layer / File(s) Summary
Renderer deduplication
packages/server-renderer/src/render.ts
renderElementVNode now appends scope IDs through a deduplicating path that skips IDs already present on props or already emitted.
Recursive scopeId tests
packages/server-renderer/__tests__/ssrScopeId.spec.ts
The SSR scopeId spec imports ssrRenderVNode and adds recursive ssrRenderComponent and render() cases that assert one comp scopeId in the output.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

:hammer: p3-minor-bug

Poem

A rabbit hopped through SSR rain,
and scopeIds danced, then settled կրկain.
One tag, one hop, no duplicates found,
just tidy paws on server ground.
(_/ )✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly describes the SSR scope-id deduplication fix introduced by the patch.
Linked Issues check ✅ Passed The render change and added recursion tests address the duplicate scoped attribute bug described in #12159 and #12175.
Out of Scope Changes check ✅ Passed The changes are focused on SSR scope-id deduplication and matching tests, with no unrelated code introduced.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch edison/fix/ssr-scope-id-dedupe

Comment @coderabbitai help to get the list of available commands.

@edison1105 edison1105 added ready to merge The PR is ready to be merged. scope: ssr labels Jun 25, 2026
@github-actions

Copy link
Copy Markdown

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 106 kB 40.2 kB 36.1 kB
vue.global.prod.js 164 kB 60.2 kB 53.5 kB

Usages

Name Size Gzip Brotli
createApp (CAPI only) 48.8 kB 19 kB 17.4 kB
createApp 56.9 kB 22 kB 20.1 kB
createSSRApp 61.2 kB 23.8 kB 21.7 kB
defineCustomElement 63.1 kB 23.9 kB 21.8 kB
overall 71.7 kB 27.4 kB 25 kB

@pkg-pr-new

pkg-pr-new Bot commented Jun 25, 2026

Copy link
Copy Markdown

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@15005
npm i https://pkg.pr.new/@vue/compiler-core@15005
yarn add https://pkg.pr.new/@vue/compiler-core@15005.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@15005
npm i https://pkg.pr.new/@vue/compiler-dom@15005
yarn add https://pkg.pr.new/@vue/compiler-dom@15005.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@15005
npm i https://pkg.pr.new/@vue/compiler-sfc@15005
yarn add https://pkg.pr.new/@vue/compiler-sfc@15005.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@15005
npm i https://pkg.pr.new/@vue/compiler-ssr@15005
yarn add https://pkg.pr.new/@vue/compiler-ssr@15005.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@15005
npm i https://pkg.pr.new/@vue/reactivity@15005
yarn add https://pkg.pr.new/@vue/reactivity@15005.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@15005
npm i https://pkg.pr.new/@vue/runtime-core@15005
yarn add https://pkg.pr.new/@vue/runtime-core@15005.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@15005
npm i https://pkg.pr.new/@vue/runtime-dom@15005
yarn add https://pkg.pr.new/@vue/runtime-dom@15005.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@15005
npm i https://pkg.pr.new/@vue/server-renderer@15005
yarn add https://pkg.pr.new/@vue/server-renderer@15005.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@15005
npm i https://pkg.pr.new/@vue/shared@15005
yarn add https://pkg.pr.new/@vue/shared@15005.tgz

vue

pnpm add https://pkg.pr.new/vue@15005
npm i https://pkg.pr.new/vue@15005
yarn add https://pkg.pr.new/vue@15005.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@15005
npm i https://pkg.pr.new/@vue/compat@15005
yarn add https://pkg.pr.new/@vue/compat@15005.tgz

commit: 695494d

@edison1105

Copy link
Copy Markdown
Member Author

/ecosystem-ci run

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/server-renderer/src/render.ts`:
- Around line 307-317: appendScopeId in render.ts is skipping scope IDs based
only on hasOwn(props, id), which does not match the SSR attr renderability rules
used by ssrRenderAttrs. Update the predicate to mirror the same check used for
rendering attrs so scope IDs are only skipped when the prop would actually be
rendered, and keep the existing renderedScopeIds de-duplication logic intact.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cdf5d28e-646a-46ea-a552-cabd7325d99d

📥 Commits

Reviewing files that changed from the base of the PR and between 325eb1d and 695494d.

📒 Files selected for processing (2)
  • packages/server-renderer/__tests__/ssrScopeId.spec.ts
  • packages/server-renderer/src/render.ts

Comment thread packages/server-renderer/src/render.ts
@vue-bot

vue-bot commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

📝 Ran ecosystem CI: Open

suite result latest scheduled
pinia success success
radix-vue failure failure
quasar success success
language-tools success success
primevue success success
vant success success
vue-i18n success success
nuxt success success
vue-macros success success
vitepress success failure
router success success
test-utils success success
vue-simple-compiler success failure
vite-plugin-vue success failure
vuetify success failure
vueuse success success

@edison1105 edison1105 merged commit 027da6b into main Jun 25, 2026
16 checks passed
@edison1105 edison1105 deleted the edison/fix/ssr-scope-id-dedupe branch June 25, 2026 08:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ready to merge The PR is ready to be merged. scope: ssr

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Scoped styles on a recursive component creates duplicate data-v- attribute

2 participants