fix(hydration): update hydration mismatch checks for asset URL SSR/CSR differences by edison1105 · Pull Request #14377 · vuejs/core

edison1105 · 2026-01-30T02:27:41Z

const imgUrl = new URL('./img.png', import.meta.url).href
- server: './img.png'
- client: 'http://host/img.png'

SSR/CSR differences because import.meta.url has different semantics in browsers vs. Node.js. The server bundle also cannot determine the client host URL ahead of time.
https://vite.dev/guide/assets#new-url-url-import-meta-url

Summary by CodeRabbit

Release Notes

New Features
- Improved SSR hydration mismatch detection to intelligently handle asset URL attributes, reducing false-positive warnings when server and client URLs are compatible.
Tests
- Added tests for asset URL hydration scenarios with enhanced mismatch detection.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

…R differences

…tter clarity

coderabbitai · 2026-01-30T02:28:01Z

📝 Walkthrough

Walkthrough

This PR adds asset URL-aware comparison logic to SSR hydration mismatch detection. It introduces helper functions to compare asset URLs, handle srcset attributes, and detect asset URL attributes. When hydration mismatches occur on asset URLs and a feature flag is enabled, URLs are compared intelligently to avoid false positives from relative/absolute URL differences.

Changes

Cohort / File(s)	Summary
Hydration Tests `packages/runtime-core/__tests__/hydration.spec.ts`	Adds two test cases for SSR hydration with asset URL attributes when production mismatch details flag is enabled, validating compatible and incompatible asset URL scenarios.
Hydration Core Logic `packages/runtime-core/src/hydration.ts`	Implements asset URL-aware comparison with helper functions (`isSameAssetUrl`, `isSameSrcSet`, `parseSrcSet`, `matchUrl`) to intelligently compare server/client asset URLs, treating relative and absolute URL variations as equivalent.
DOM Attribute Configuration `packages/shared/src/domAttrConfig.ts`	Exports new `isAssetUrlAttr` helper to identify asset URL attributes (src, href, xlink:href, poster, data, srcset). Note: Helper appears duplicated in file.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

PR #13339: Also modifies hydration mismatch detection in propHasMismatch — related through shared hydration mismatch handling infrastructure.

Suggested labels

scope:hydration, scope:ssr, :hammer: p3-minor-bug

Suggested reviewers

KazariEX
johnsoncodehk
LittleSound

Poem

🐰 A hydration hop so fine and bright,
Asset URLs now match, both left and right!
Relative meets absolute in harmony,
No false alarms for SSR to see! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 14.29% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Out of Scope Changes check	❓ Inconclusive	The PR introduces duplicate isAssetUrlAttr declarations in domAttrConfig.ts, raising concerns about whether this duplication is intentional or represents an out-of-scope change.	Verify the duplicate isAssetUrlAttr exports and remove one if unintentional; confirm if duplication is necessary for the hydration fix.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: updating hydration mismatch checks to handle asset URL differences between SSR and CSR contexts.
Linked Issues check	✅ Passed	The PR addresses the core requirement from issue `#14370`: preventing hydration mismatches when asset URLs differ between SSR and CSR due to import.meta.url semantics.

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

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch edison/fix/14370_

Tip

🧪 Unit Test Generation v2 is now available!

We have significantly improved our unit test generation capabilities.

To enable: Add this to your .coderabbit.yaml configuration:

reviews:
  finishing_touches:
    unit_tests:
      enabled: true

Try it out by using the @coderabbitai generate unit tests command on your code files or under ✨ Finishing Touches on the walkthrough!

Have feedback? Share your thoughts on our Discord thread!

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-01-30T02:28:45Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	103 kB	39.1 kB	35.2 kB
vue.global.prod.js	161 kB	59.1 kB	52.6 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47 kB	18.3 kB	16.8 kB
createApp	55.1 kB	21.4 kB	19.6 kB
createSSRApp	59.4 kB	23.2 kB	21.1 kB
defineCustomElement	60.8 kB	23.1 kB	21.1 kB
overall	69.5 kB	26.7 kB	24.3 kB

pkg-pr-new · 2026-01-30T02:28:57Z

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14377

npm i https://pkg.pr.new/@vue/compiler-core@14377

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14377

npm i https://pkg.pr.new/@vue/compiler-dom@14377

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14377

npm i https://pkg.pr.new/@vue/compiler-sfc@14377

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14377

npm i https://pkg.pr.new/@vue/compiler-ssr@14377

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14377

npm i https://pkg.pr.new/@vue/reactivity@14377

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14377

npm i https://pkg.pr.new/@vue/runtime-core@14377

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14377

npm i https://pkg.pr.new/@vue/runtime-dom@14377

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14377

npm i https://pkg.pr.new/@vue/server-renderer@14377

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14377

npm i https://pkg.pr.new/@vue/shared@14377

yarn add https://pkg.pr.new/@vue/[email protected]

vue

pnpm add https://pkg.pr.new/vue@14377

npm i https://pkg.pr.new/vue@14377

yarn add https://pkg.pr.new/[email protected]

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14377

npm i https://pkg.pr.new/@vue/compat@14377

yarn add https://pkg.pr.new/@vue/[email protected]

commit: 9c6e0b5

edison1105 added 2 commits January 30, 2026 10:12

fix(hydration): update hydration mismatch checks for asset URL SSR/CS…

000425b

…R differences

fix(hydration): replace isAssetUrlLikeAttr with isAssetUrlAttr for be…

9c6e0b5

…tter clarity

edison1105 added ready for review This PR requires more reviews scope:hydration labels Jan 30, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(hydration): update hydration mismatch checks for asset URL SSR/CSR differences#14377

fix(hydration): update hydration mismatch checks for asset URL SSR/CSR differences#14377
edison1105 wants to merge 2 commits intomainfrom
edison/fix/14370_

edison1105 commented Jan 30, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jan 30, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Uh oh!

github-actions bot commented Jan 30, 2026

Uh oh!

pkg-pr-new bot commented Jan 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

edison1105 commented Jan 30, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Uh oh!

github-actions bot commented Jan 30, 2026

Size Report

Bundles

Usages

Uh oh!

pkg-pr-new bot commented Jan 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

edison1105 commented Jan 30, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 30, 2026 •

edited

Loading