fix: TDZ violation in lazy-hydration plugin with .client components

[huang-julien]

🔗 Linked issue

📚 Description

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/hints@265

commit: 5723708

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4fb5d464-f4f3-4ae6-902e-d7e2b1a8e346

📥 Commits

Reviewing files that changed from the base of the PR and between 432e5e0 and 7ece8ae.

📒 Files selected for processing (1)

• src/plugins/lazy-load.ts

---

📝 Walkthrough

Walkthrough

The pull request changes src/plugins/lazy-load.ts to insert wrapper statements immediately after each individual component import (per-import append) instead of aggregating wrappers and appending them once after imports. Existing logic for renaming original imports, injecting tracking imports, and applying component-specific wrappers in setups is unchanged. Tests were added to test/unit/hydration/lazy-hydration-plugin.test.ts to validate TDZ safety and wrapper placement across single/multiple imports, auto-imported components, and .client.vue variants; the test additions include duplicated blocks in the patch.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description contains only the pull request template boilerplate with no actual details about the changes, rationale, or implementation, making it empty of meaningful information about the changeset.	Add a description explaining the TDZ problem, how the per-import wrapper approach resolves it, and why this change was necessary for .client components.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main fix: addressing a TDZ (Temporal Dead Zone) violation in the lazy-hydration plugin specifically with .client components, which aligns with the changeset modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/tdzviolation

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

test/unit/hydration/lazy-hydration-plugin.test.ts (1)

214-237: Consider adding assertion for non-overlapping wrapper positions.

The test verifies each wrapper is between its import and usage, but doesn't explicitly verify wrapperALine !== wrapperBLine or that wrappers don't overlap. This is likely fine since the string comparison is implicit, but an explicit assertion could catch edge cases where both wrappers accidentally get inserted at the same position.

🔧 Optional: Add non-overlap assertion

       expect(wrapperBLine).toBeGreaterThan(importBLine)
       expect(wrapperBLine).toBeLessThan(someWrapperBLine)
+      // Ensure wrappers are in import order (A before B)
+      expect(wrapperALine).toBeLessThan(wrapperBLine)
     })

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@test/unit/hydration/lazy-hydration-plugin.test.ts` around lines 214 - 237,
Add an explicit non-overlap assertion to ensure the inserted wrappers don't
occupy the same line: assert that wrapperALine !== wrapperBLine; additionally,
if you want to guarantee preserved order, assert the wrappers follow the import
order (e.g., if importALine < importBLine then
expect(wrapperALine).toBeLessThan(wrapperBLine)). Use the existing variables
importALine, importBLine, wrapperALine and wrapperBLine to implement these
checks.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@test/unit/hydration/lazy-hydration-plugin.test.ts`:
- Around line 214-237: Add an explicit non-overlap assertion to ensure the
inserted wrappers don't occupy the same line: assert that wrapperALine !==
wrapperBLine; additionally, if you want to guarantee preserved order, assert the
wrappers follow the import order (e.g., if importALine < importBLine then
expect(wrapperALine).toBeLessThan(wrapperBLine)). Use the existing variables
importALine, importBLine, wrapperALine and wrapperBLine to implement these
checks.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9f4b8aaf-5808-49ee-8063-b9c51372ebd1

📥 Commits

Reviewing files that changed from the base of the PR and between 02fc7ca and 432e5e0.

📒 Files selected for processing (2)

• src/plugins/lazy-load.ts
• test/unit/hydration/lazy-hydration-plugin.test.ts