fix(maps): render renderless map components as null - #914
Merged
Merged
Conversation
Eight map components had a template with only a comment or nothing. The server rendered no node while the client expected a comment, so hydration reported a mismatch. The five Google Maps components had empty templates, which mismatch even in `nuxt dev`. A `render` returning `null` yields a comment on both sides, the shape the MapLibre controls adopted in #910. The new e2e fixture builds with `comments: false`, because the Vitest worker loads Vue's development compiler, which keeps template comments.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
commit: |
📦 Package Size✅ No notable size changes 📚 22 runtime dependencies (no change) All tracked output (25)
Runtime dependencies (22)
Baseline: main_@_c9d0bcc5___2026-09-16 · gzip is the comparison metric · changes below 16 B gzip are ignored |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (17)
Included review availability: Your plan provides up to 4 included reviews per hour; 1 remains after this review. 📝 WalkthroughWalkthroughMap layer components for Google Maps, Leaflet, and MapLibre now use Priority: ➖ Normal Estimated code review effort: 3 (Moderate) | ~20 minutes Severity of issue fixed: Medium Merge Risk: ⚪ Minimal · up to The map hydration changes include fixture coverage across all three map integrations, with no actionable issue identified. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
harlan-zw
added
harlan-agent-running
Collaborator
Author
🤖 MERGED
GitHub merged this pull request. No material findings were recorded. 8312c038-94f6-4183-b421-0c82bcc5af36 |
harlan-zw
added
harlan-agent-ready
harlan-zw
removed
the
harlan-agent-ready
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔗 Linked issue
Papercut PC-18. Follow-up to #910, which fixed the same bug in the five MapLibre controls.
❓ Type of change
📚 Description
nuxt devtooScriptGoogleMapsPolygon,Polyline,Circle,RectangleandGeoJsonhad an empty<template>. An empty template compiles to an emptyssrRenderon the server andreturn nullon the client, even in development.Measured with
@nuxt/test-utilsindev: truemode, before this fix:Under
nuxt dev, the MapLibre and Leaflet pages logged no hydration message. After this fix, no page logs one.Production builds: all eight components
ScriptMapLibreGeoJson,ScriptLeafletGeoJsonandScriptLeafletTileLayerhad a template with only a comment. A production build strips template comments, so the server renders nothing. The client expects a comment node, and hydration reports a mismatch.Fix
Each component now has no
<template>and usesdefineOptions({ render: () => null }). This is the shape #910 proved for the MapLibre controls.nullto a comment vnode.ssrRender, the server callsrender(), normalizesnullthe same way, and writes<!---->.commentsoption.Test infrastructure finding
@nuxt/test-utilsbuilds inside the Vitest worker withNODE_ENV=test. The Vue compiler then loads its development build and keeps template comments. This repo's e2e tests therefore could never catch a production-only hydration bug.The new
test/e2e/map-hydration.test.tssetsvue.compilerOptions.comments: false. A probe test proves that each page's template comment is stripped from the server HTML. Without the probe, a silent fallback to development behaviour would make the hydration test pass for the wrong reason.The fixture
test/fixtures/map-hydrationloads no map SDK, tiles, glyphs or sprites. Hydration compares the server HTML with the client's first render, which happens before any script loads. The Google Maps page uses a placeholder string forapi-key. No real key is involved.✅ Verification
Production-mode hydration test, per library:
/maplibre(GeoJson)Hydration completed but contains mismatches.ScriptMapLibreGeoJson: fail/leaflet(GeoJson,TileLayer)ScriptLeafletTileLayer: fail/google-maps(5 components)ScriptGoogleMapsPolygon: failThe Google Maps mismatch reproduces without an API key.
pnpm lint: 0 errors.pnpm typecheck: exit 0.Tests 1206 passed | 22 skipped | 3 todo,Type Errors no errors. Two e2e files failed their fixture builds on CDN fetches (analytics.ahrefs.com,snap.licdn.com). A rerun of those two, with all map e2e files, passed:Test Files 5 passed,Tests 27 passed.Non-breaking.