fix(nuxt): add sourcemap path transformation for client builds #32313
Conversation
|
|
There was a problem hiding this comment.
Pull Request Overview
This PR ensures client build source maps point to the final output directory by transforming their paths.
- Added
sourcemapPathTransformto adjust source map paths from the temp build directory to.output/public. - Imported
dirnameandrelativefrompatheto compute the correct relative paths. - Used
ctx.config.root!andctx.nuxt.options.app.buildAssetsDirto locate the public assets directory.
Comments suppressed due to low confidence (3)
packages/vite/src/client.ts:181
- [nitpick] The variable name
newRelativePathis generic; consider renaming tooutputRelativePathto clarify that this path targets the final output directory.
const newRelativePath = relative(
packages/vite/src/client.ts:175
- Add unit tests covering
sourcemapPathTransformfor both relative and non-relative source paths to ensure correct behavior across different build scenarios.
sourcemapPathTransform (relativeSourcePath, sourcemapPath) {
packages/vite/src/client.ts:175
- [nitpick] Include a JSDoc comment above
sourcemapPathTransformdescribing its purpose, parameters, and return value to aid future maintainers.
sourcemapPathTransform (relativeSourcePath, sourcemapPath) {
| if (relativeSourcePath.startsWith('..')) { | ||
| const absoluteSourcePath = resolve(dirname(sourcemapPath), relativeSourcePath) | ||
| const newRelativePath = relative( | ||
| join(ctx.config.root!, '.output/public', ctx.nuxt.options.app.buildAssetsDir), |
There was a problem hiding this comment.
Avoid hardcoding '.output/public'; derive the public output path from Nuxt config or extract it into a shared constant to prevent divergence if the output directory structure changes.
| join(ctx.config.root!, '.output/public', ctx.nuxt.options.app.buildAssetsDir), | |
| join(ctx.config.root!, getPublicOutputPath(ctx.nuxt.options), ctx.nuxt.options.app.buildAssetsDir), |
Copilot uses AI. Check for mistakes.
| if (relativeSourcePath.startsWith('..')) { | ||
| const absoluteSourcePath = resolve(dirname(sourcemapPath), relativeSourcePath) | ||
| const newRelativePath = relative( | ||
| join(ctx.config.root!, '.output/public', ctx.nuxt.options.app.buildAssetsDir), |
There was a problem hiding this comment.
Avoid using the non-null assertion (!) on ctx.config.root; consider validating or providing a fallback to prevent potential runtime errors if root is ever undefined.
| join(ctx.config.root!, '.output/public', ctx.nuxt.options.app.buildAssetsDir), | |
| join(ctx.config.root ?? '', '.output/public', ctx.nuxt.options.app.buildAssetsDir), |
Copilot uses AI. Check for mistakes.
@nuxt/kit
nuxt
@nuxt/rspack-builder
@nuxt/schema
@nuxt/vite-builder
@nuxt/webpack-builder
commit: |
WalkthroughA new function, sourcemapPathTransform, has been added to the Rollup output options within the client build configuration. This function modifies source map paths during the client build by recalculating paths that start with ".." to be relative to the final public build directory, ensuring correct mapping from the output location. The implementation uses dirname and relative functions from the pathe module, with the import statement updated accordingly. No changes were made to exported or public entity declarations; all modifications are internal to the buildClient function. ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/vite/src/client.ts(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: code
🔇 Additional comments (1)
packages/vite/src/client.ts (1)
2-2: LGTM! Import statement correctly updated.The import statement appropriately adds
dirnameandrelativefunctions from thepathemodule, which are used in the new sourcemap transformation logic below.
| sourcemapPathTransform (relativeSourcePath, sourcemapPath) { | ||
| // client build is running in a temporary build directory, like `.nuxt/dist/client` | ||
| // so we need to transform the sourcemap path to be relative to the final build directory | ||
| // which is normally `.output/public` | ||
| if (relativeSourcePath.startsWith('..')) { | ||
| const absoluteSourcePath = resolve(dirname(sourcemapPath), relativeSourcePath) | ||
| const newRelativePath = relative( | ||
| join(ctx.config.root!, '.output/public', ctx.nuxt.options.app.buildAssetsDir), | ||
| absoluteSourcePath, | ||
| ) | ||
| return newRelativePath | ||
| } | ||
| return relativeSourcePath | ||
| }, |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify ctx.config.root availability and consider path construction robustness.
The sourcemap path transformation logic is well-implemented and addresses the core issue of ensuring source maps point to correct locations relative to the final build directory. However, there's a potential safety concern with the non-null assertion operator.
The path construction logic correctly handles the transformation from temporary build directories to final output locations. The conditional check for paths starting with ".." appropriately identifies source paths that need transformation, whilst preserving paths that are already correctly relative to the build directory.
🏁 Script executed:
#!/bin/bash
# Description: Verify that ctx.config.root is always defined in the buildClient context
# Expected: ctx.config.root should be consistently available, otherwise the non-null assertion could cause runtime errors
ast-grep --pattern $'buildClient($$$) {
$$$
ctx.config.root
$$$
}'Length of output: 73
I wasn’t able to confirm that ctx.config.root is always set from the first grep. Let’s locate the buildClient definition and see how ctx is typed and where config.root comes from:
🏁 Script executed:
#!/bin/bash
# Locate and inspect buildClient and config.root usage in client.ts
rg -n "function buildClient" -n packages/vite/src/client.ts
rg -n "ctx.config.root" -n packages/vite/src/client.tsLength of output: 274
Let’s inspect the top of client.ts to see where ViteBuildContext comes from and find its definition:
🏁 Script executed:
#!/bin/bash
# Show imports and type of buildClient
sed -n '1,50p' packages/vite/src/client.ts
# Locate ViteBuildContext definition across the repo
rg -n "ViteBuildContext" -n .Length of output: 3644
Let’s inspect the ViteBuildContext interface and its instantiation to see how config.root is set:
🏁 Script executed:
#!/bin/bash
# Show the ViteBuildContext interface
rg -n "export interface ViteBuildContext" -n packages/vite/src/vite.ts
sed -n '23,80p' packages/vite/src/vite.ts
# Find where ctx is created and how config.root is assigned
rg -n "const ctx: ViteBuildContext" -n packages/vite/src/vite.ts
sed -n '61,150p' packages/vite/src/vite.tsLength of output: 5733
Add a safe default for config.root to avoid runtime errors
The ctx.config.root! non-null assertion may be undefined since we never set root in the base Vite config. Please either inject a default root when creating the context or use a fallback in the path transform.
– File: packages/vite/src/client.ts
Lines: 175–188
Suggested changes:
sourcemapPathTransform (relativeSourcePath, sourcemapPath) {
if (relativeSourcePath.startsWith('..')) {
const absoluteSourcePath = resolve(dirname(sourcemapPath), relativeSourcePath)
- const newRelativePath = relative(
- join(ctx.config.root!, '.output/public', ctx.nuxt.options.app.buildAssetsDir),
- absoluteSourcePath,
- )
+ // Use config.root if set, otherwise fall back to Nuxt’s rootDir
+ const buildRoot = ctx.config.root ?? ctx.nuxt.options.rootDir
+ const newRelativePath = relative(
+ join(buildRoot, '.output/public', ctx.nuxt.options.app.buildAssetsDir),
+ absoluteSourcePath,
+ )
return newRelativePath
}
return relativeSourcePath
},Alternatively, in packages/vite/src/vite.ts add root: nuxt.options.rootDir to the default config passed to vite.mergeConfig.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| sourcemapPathTransform (relativeSourcePath, sourcemapPath) { | |
| // client build is running in a temporary build directory, like `.nuxt/dist/client` | |
| // so we need to transform the sourcemap path to be relative to the final build directory | |
| // which is normally `.output/public` | |
| if (relativeSourcePath.startsWith('..')) { | |
| const absoluteSourcePath = resolve(dirname(sourcemapPath), relativeSourcePath) | |
| const newRelativePath = relative( | |
| join(ctx.config.root!, '.output/public', ctx.nuxt.options.app.buildAssetsDir), | |
| absoluteSourcePath, | |
| ) | |
| return newRelativePath | |
| } | |
| return relativeSourcePath | |
| }, | |
| sourcemapPathTransform (relativeSourcePath, sourcemapPath) { | |
| // client build is running in a temporary build directory, like `.nuxt/dist/client` | |
| // so we need to transform the sourcemap path to be relative to the final build directory | |
| // which is normally `.output/public` | |
| if (relativeSourcePath.startsWith('..')) { | |
| const absoluteSourcePath = resolve(dirname(sourcemapPath), relativeSourcePath) | |
| // Use config.root if set, otherwise fall back to Nuxt’s rootDir | |
| const buildRoot = ctx.config.root ?? ctx.nuxt.options.rootDir | |
| const newRelativePath = relative( | |
| join(buildRoot, '.output/public', ctx.nuxt.options.app.buildAssetsDir), | |
| absoluteSourcePath, | |
| ) | |
| return newRelativePath | |
| } | |
| return relativeSourcePath | |
| }, |
🤖 Prompt for AI Agents
In packages/vite/src/client.ts around lines 175 to 188, the code uses a non-null
assertion on ctx.config.root which may be undefined and cause runtime errors. To
fix this, ensure ctx.config.root is always defined by either injecting a default
root value when creating the context or by adding a safe fallback in the
sourcemapPathTransform function before using ctx.config.root. Alternatively, set
root: nuxt.options.rootDir in the default config passed to vite.mergeConfig in
packages/vite/src/vite.ts to guarantee root is always present.
CodSpeed Performance ReportMerging #32313 will not alter performanceComparing Summary
|
🔗 Linked issue
Resolves #32009
📚 Description
This change fixes the source map paths in client builds, to point them to the right sourcemaps.
My first contribution to this repo, pls check if I used the
nuxtconfig dirs properly.Question: should I add a test for checking the generated sourcemap content? I have seen that all fixtures have disabled sourcemaps, so maybe I need to add a new fixture? LMK!