fix(nuxt): support component auto-imports as arguments of `h()` #33509

danielroe · 2025-10-17T19:21:19Z

🔗 Linked issue

📚 Description

this addresses a long-standing issue with JSX support on webpack

bolt-new-by-stackblitz · 2025-10-17T19:21:23Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-10-17T19:24:10Z

Walkthrough

The pull request introduces JSX auto-import support for Nuxt components. The loader plugin's regex pattern is expanded to match both Vue's _resolveComponent(...) and JSX h(...) calls with PascalCase identifiers. The replacement logic extracts and unifies arguments from both patterns to generate appropriate direct import paths. Supporting tests validate JSX auto-import functionality across various contexts, including component detection in h() calls, lazy components, and case-sensitivity rules. A test condition is also updated to remove platform-specific gating, allowing JSX tests to run unconditionally.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

The changes span three files with heterogeneous modifications: regex logic with conditional group extraction in the loader, comprehensive test suite additions covering multiple scenarios, and a simple test condition removal. The complexity stems from verifying the regex pattern correctly handles both Vue and JSX patterns without regressions, ensuring test cases comprehensively cover edge cases (lowercase components, multiple components, lazy variants), and confirming the unconditional test execution does not introduce platform-specific failures.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title "fix(nuxt): support component auto-imports as arguments of `h()`" directly and clearly summarizes the main change. The raw summary confirms the core modification is the expansion of the regex pattern to handle JSX `h()` calls with PascalCase component identifiers, alongside comprehensive test additions validating this auto-import behaviour. The title is concise, specific, and accurately represents the primary objective without ambiguity or irrelevant details.
Description Check	✅ Passed	The description "this addresses a long-standing issue with JSX support on webpack" is related to the changeset, as the modifications indeed address JSX component auto-import functionality. Whilst the description is minimal and lacks specific implementation details, the check criteria emphasise that level of detail is not important for passing, only that the description relates to the changeset in some way. The description successfully connects to the general area being addressed without being entirely off-topic.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ 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 fix/webpack-jsx

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1f69d1e and 18a2c5f.

📒 Files selected for processing (3)

packages/nuxt/src/components/plugins/loader.ts (2 hunks)
packages/nuxt/test/component-loader.test.ts (1 hunks)
test/basic.test.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Follow standard TypeScript conventions and best practices

Files:

packages/nuxt/src/components/plugins/loader.ts
test/basic.test.ts
packages/nuxt/test/component-loader.test.ts

**/*.{test,spec}.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Write unit tests for core functionality using vitest

Files:

test/basic.test.ts
packages/nuxt/test/component-loader.test.ts

🧠 Learnings (1)

📚 Learning: 2024-11-05T15:22:54.759Z

Learnt from: GalacticHypernova
PR: nuxt/nuxt#26468
File: packages/nuxt/src/components/plugins/loader.ts:24-24
Timestamp: 2024-11-05T15:22:54.759Z
Learning: In `packages/nuxt/src/components/plugins/loader.ts`, the references to `resolve` and `distDir` are legacy code from before Nuxt used the new unplugin VFS and will be removed.

Applied to files:

packages/nuxt/src/components/plugins/loader.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: build
GitHub Check: code

🔇 Additional comments (4)

test/basic.test.ts (1)

150-150: LGTM! Test gate removal aligns with the fix.

The test now runs unconditionally since the PR addresses the long-standing JSX issue with webpack. This change correctly reflects that JSX auto-imports should work across all bundlers.

packages/nuxt/src/components/plugins/loader.ts (2)

24-27: Well-structured regex pattern with clear documentation.

The expanded regex correctly handles both Vue's _resolveComponent(...) and JSX h(...) patterns. The PascalCase requirement ([A-Z][\w$]*) for h() calls appropriately filters out native HTML elements and prevents false positives.

55-58: Clean group unification preserves backward compatibility.

The fallback pattern groups.hLazy || groups.lazy elegantly handles both matching modes whilst maintaining the existing resolveComponent behaviour.

packages/nuxt/test/component-loader.test.ts (1)

115-209: Excellent test coverage for JSX auto-import functionality.

The test suite comprehensively validates:

Basic h() call replacement with auto-imports

Multiple usage contexts (defineComponent, setup functions)

Handling of multiple distinct components

Correct exclusion of lowercase identifiers (preventing false positives)

Lazy component support in JSX

The negative test case at lines 175-192 is particularly valuable for ensuring the regex pattern doesn't over-match.

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

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

pkg-pr-new · 2025-10-17T19:33:35Z

Open in StackBlitz

@nuxt/kit

npm i https://pkg.pr.new/@nuxt/kit@33509

nuxt

npm i https://pkg.pr.new/nuxt@33509

@nuxt/rspack-builder

npm i https://pkg.pr.new/@nuxt/rspack-builder@33509

@nuxt/schema

npm i https://pkg.pr.new/@nuxt/schema@33509

@nuxt/vite-builder

npm i https://pkg.pr.new/@nuxt/vite-builder@33509

@nuxt/webpack-builder

npm i https://pkg.pr.new/@nuxt/webpack-builder@33509

commit: 18a2c5f

codspeed-hq · 2025-10-17T19:41:17Z

CodSpeed Performance Report

Merging #33509 will not alter performance

_{Comparing fix/webpack-jsx (18a2c5f) with main (1f69d1e)}

Summary

✅ 10 untouched

danielroe added 2 commits October 17, 2025 21:17

fix(nuxt): support component auto-imports as arguments of h()

53ae3cc

chore: lint

18a2c5f

github-actions bot added 4.x bug labels Oct 17, 2025

danielroe merged commit 934dc00 into main Oct 17, 2025
143 of 146 checks passed

danielroe deleted the fix/webpack-jsx branch October 17, 2025 20:33

This was referenced Oct 17, 2025

v4.2.0 #33425

Merged

v5.0.0 #33548

Closed

danielroe added a commit that referenced this pull request Oct 25, 2025

fix(nuxt): support component auto-imports as arguments of h() (#33509)

a06ed1c

github-actions bot mentioned this pull request Oct 25, 2025

v3.20.0 #33566

Merged

coderabbitai bot mentioned this pull request Dec 15, 2025

Improve TypeScript auto-import ergonomics for h3 types (e.g. H3Event) in Nuxt 4 server code #33889

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(nuxt): support component auto-imports as arguments of `h()` #33509

fix(nuxt): support component auto-imports as arguments of `h()` #33509

Uh oh!

danielroe commented Oct 17, 2025

Uh oh!

bolt-new-by-stackblitz bot commented Oct 17, 2025

Uh oh!

coderabbitai bot commented Oct 17, 2025

Uh oh!

pkg-pr-new bot commented Oct 17, 2025

Uh oh!

codspeed-hq bot commented Oct 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

fix(nuxt): support component auto-imports as arguments of h() #33509

fix(nuxt): support component auto-imports as arguments of h() #33509

Uh oh!

Conversation

danielroe commented Oct 17, 2025

🔗 Linked issue

📚 Description

Uh oh!

bolt-new-by-stackblitz bot commented Oct 17, 2025

Uh oh!

coderabbitai bot commented Oct 17, 2025

Walkthrough

Estimated code review effort

Pre-merge checks and finishing touches

Uh oh!

pkg-pr-new bot commented Oct 17, 2025

Uh oh!

codspeed-hq bot commented Oct 17, 2025

CodSpeed Performance Report

Merging #33509 will not alter performance

Summary

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix(nuxt): support component auto-imports as arguments of `h()` #33509

fix(nuxt): support component auto-imports as arguments of `h()` #33509