feat: allow client-side sourcemaps in production (#7313)

packages/nuxt/src/components/module.ts

@@ -9,7 +9,7 @@ import { TreeShakeTemplatePlugin } from './tree-shake'
 
 const isPureObjectOrString = (val: any) => (!Array.isArray(val) && typeof val === 'object') || typeof val === 'string'
 const isDirectory = (p: string) => { try { return statSync(p).isDirectory() } catch (_e) { return false } }
-function compareDirByPathLength ({ path: pathA }: { path: string}, { path: pathB }: { path: string}) {
+function compareDirByPathLength ({ path: pathA }: { path: string }, { path: pathB }: { path: string }) {
   return pathB.split(/[\\/]/).filter(Boolean).length - pathA.split(/[\\/]/).filter(Boolean).length
 }
 
@@ -165,31 +165,34 @@ export default defineNuxtModule<ComponentsOptions>({
       }
     })
 
-    nuxt.hook('vite:extendConfig', (config, { isClient }) => {
+    nuxt.hook('vite:extendConfig', (config, { isClient, isServer }) => {
+      const mode = isClient ? 'client' : 'server'
+
       config.plugins = config.plugins || []
       config.plugins.push(loaderPlugin.vite({
-        sourcemap: nuxt.options.sourcemap,
+        sourcemap: nuxt.options.sourcemap[mode],
         getComponents,
-        mode: isClient ? 'client' : 'server'
+        mode
       }))
-      if (nuxt.options.experimental.treeshakeClientOnly) {
+      if (nuxt.options.experimental.treeshakeClientOnly && isServer) {
         config.plugins.push(TreeShakeTemplatePlugin.vite({
-          sourcemap: nuxt.options.sourcemap,
+          sourcemap: nuxt.options.sourcemap[mode],
           getComponents
         }))
       }
     })
     nuxt.hook('webpack:config', (configs) => {
       configs.forEach((config) => {
+        const mode = config.name === 'client' ? 'client' : 'server'
         config.plugins = config.plugins || []
         config.plugins.push(loaderPlugin.webpack({
-          sourcemap: nuxt.options.sourcemap,
+          sourcemap: nuxt.options.sourcemap[mode],
           getComponents,
-          mode: config.name === 'client' ? 'client' : 'server'
+          mode
         }))
-        if (nuxt.options.experimental.treeshakeClientOnly) {
+        if (nuxt.options.experimental.treeshakeClientOnly && mode === 'server') {
           config.plugins.push(TreeShakeTemplatePlugin.webpack({
-            sourcemap: nuxt.options.sourcemap,
+            sourcemap: nuxt.options.sourcemap[mode],
             getComponents
           }))
         }

packages/nuxt/src/core/nitro.ts

@@ -58,7 +58,7 @@ export async function initNitro (nuxt: Nuxt) {
         .concat(nuxt.options._generate ? ['/', ...nuxt.options.generate.routes] : [])
         .concat(nuxt.options.ssr === false ? ['/', '/200.html', '/404.html'] : [])
     },
-    sourcemap: nuxt.options.sourcemap,
+    sourceMap: nuxt.options.sourcemap.server,
     externals: {
       inline: [
         ...(nuxt.options.dev

packages/nuxt/src/core/nuxt.ts

@@ -68,18 +68,18 @@ async function initNuxt (nuxt: Nuxt) {
   addWebpackPlugin(ImportProtectionPlugin.webpack(config))
 
   // Add unctx transform
-  addVitePlugin(UnctxTransformPlugin(nuxt).vite({ sourcemap: nuxt.options.sourcemap }))
+  addVitePlugin(UnctxTransformPlugin(nuxt).vite({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
-  addWebpackPlugin(UnctxTransformPlugin(nuxt).webpack({ sourcemap: nuxt.options.sourcemap }))
+  addWebpackPlugin(UnctxTransformPlugin(nuxt).webpack({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
 
   if (!nuxt.options.dev) {
     const removeFromServer = ['onBeforeMount', 'onMounted', 'onBeforeUpdate', 'onRenderTracked', 'onRenderTriggered', 'onActivated', 'onDeactivated', 'onBeforeUnmount']
     const removeFromClient = ['onServerPrefetch', 'onRenderTracked', 'onRenderTriggered']
 
     // Add tree-shaking optimisations for SSR - build time only
-    addVitePlugin(TreeShakePlugin.vite({ sourcemap: nuxt.options.sourcemap, treeShake: removeFromServer }), { client: false })
+    addVitePlugin(TreeShakePlugin.vite({ sourcemap: nuxt.options.sourcemap.server, treeShake: removeFromServer }), { client: false })
-    addVitePlugin(TreeShakePlugin.vite({ sourcemap: nuxt.options.sourcemap, treeShake: removeFromClient }), { server: false })
+    addVitePlugin(TreeShakePlugin.vite({ sourcemap: nuxt.options.sourcemap.client, treeShake: removeFromClient }), { server: false })
-    addWebpackPlugin(TreeShakePlugin.webpack({ sourcemap: nuxt.options.sourcemap, treeShake: removeFromServer }), { client: false })
+    addWebpackPlugin(TreeShakePlugin.webpack({ sourcemap: nuxt.options.sourcemap.server, treeShake: removeFromServer }), { client: false })
-    addWebpackPlugin(TreeShakePlugin.webpack({ sourcemap: nuxt.options.sourcemap, treeShake: removeFromClient }), { server: false })
+    addWebpackPlugin(TreeShakePlugin.webpack({ sourcemap: nuxt.options.sourcemap.client, treeShake: removeFromClient }), { server: false })
   }
 
   // TODO: [Experimental] Avoid emitting assets when flag is enabled

packages/nuxt/src/imports/module.ts

@@ -91,8 +91,8 @@ export default defineNuxtModule<Partial<ImportsOptions>>({
       })
     } else {
       // Transform to inject imports in production mode
-      addVitePlugin(TransformPlugin.vite({ ctx, options, sourcemap: nuxt.options.sourcemap }))
+      addVitePlugin(TransformPlugin.vite({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
-      addWebpackPlugin(TransformPlugin.webpack({ ctx, options, sourcemap: nuxt.options.sourcemap }))
+      addWebpackPlugin(TransformPlugin.webpack({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
     }
 
     const regenerateImports = async () => {

packages/nuxt/src/pages/module.ts

@@ -88,7 +88,7 @@ export default defineNuxtModule({
     // Extract macros from pages
     const macroOptions: TransformMacroPluginOptions = {
       dev: nuxt.options.dev,
-      sourcemap: nuxt.options.sourcemap,
+      sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client,
       macros: {
         definePageMeta: 'meta'
       }

packages/schema/src/config/build.ts

@@ -26,9 +26,20 @@ export default defineUntypedSchema({
   /**
    * Whether to generate sourcemaps.
    *
+   * @type {boolean | { server?: boolean, client?: boolean }}
    * @version 3
    */
-  sourcemap: true,
+  sourcemap: {
+    $resolve: (val, get) => {
+      if (typeof val === 'boolean') {
+        return { server: val, client: val }
+      }
+      return defu(val, {
+        server: true,
+        client: get('dev')
+      })
+    },
+  },
   /**
    * Shared build configuration.
    * @version 2

packages/schema/src/types/config.ts

@@ -26,6 +26,7 @@ export type NuxtConfigLayer = ConfigLayer<NuxtConfig & {
 
 /** Normalized Nuxt options available as `nuxt.options.*` */
 export interface NuxtOptions extends ConfigSchema {
+  sourcemap: Required<Exclude<ConfigSchema['sourcemap'], boolean>>
   _layers: NuxtConfigLayer[]
 }
 
@@ -58,11 +59,11 @@ export interface ViteConfig extends ViteUserConfig {
 
 type RuntimeConfigNamespace = Record<string, any>
 
-export interface PublicRuntimeConfig extends RuntimeConfigNamespace { }
+export interface PublicRuntimeConfig extends RuntimeConfigNamespace {}
 
 // TODO: remove before release of 3.0.0
 /** @deprecated use RuntimeConfig interface */
-export interface PrivateRuntimeConfig extends RuntimeConfigNamespace { }
+export interface PrivateRuntimeConfig extends RuntimeConfigNamespace {}
 
 export interface RuntimeConfig extends PrivateRuntimeConfig, RuntimeConfigNamespace {
   public: PublicRuntimeConfig
@@ -85,4 +86,4 @@ export interface NuxtAppConfig {
   keepalive: boolean | KeepAliveProps
 }
 
-export interface AppConfig { }
+export interface AppConfig {}

packages/vite/src/client.ts

@@ -51,6 +51,7 @@ export async function buildClient (ctx: ViteBuildContext) {
       dedupe: ['vue']
     },
     build: {
+      sourcemap: ctx.nuxt.options.sourcemap.client,
       manifest: true,
       outDir: resolve(ctx.nuxt.options.buildDir, 'dist/client'),
       rollupOptions: {

packages/vite/src/server.ts

@@ -81,6 +81,7 @@ export async function buildServer (ctx: ViteBuildContext) {
       ]
     },
     build: {
+      sourcemap: ctx.nuxt.options.sourcemap.server,
       outDir: resolve(ctx.nuxt.options.buildDir, 'dist/server'),
       ssr: ctx.nuxt.options.ssr ?? true,
       rollupOptions: {

packages/vite/src/vite.ts

@@ -59,7 +59,7 @@ export async function bundle (nuxt: Nuxt) {
           }
         },
         plugins: [
-          composableKeysPlugin.vite({ sourcemap: nuxt.options.sourcemap, rootDir: nuxt.options.rootDir }),
+          composableKeysPlugin.vite({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client, rootDir: nuxt.options.rootDir }),
           replace({
             ...Object.fromEntries([';', '(', '{', '}', ' ', '\t', '\n'].map(d => [`${d}global.`, `${d}globalThis.`])),
             preventAssignment: true

packages/webpack/src/configs/client.ts

@@ -22,11 +22,16 @@ export function client (ctx: WebpackConfigContext) {
 }
 
 function clientDevtool (ctx: WebpackConfigContext) {
-  if (!ctx.isDev) {
+  if (!ctx.nuxt.options.sourcemap.client) {
     ctx.config.devtool = false
     return
   }
 
+  if (!ctx.isDev) {
+    ctx.config.devtool = 'source-map'
+    return
+  }
+
   const scriptPolicy = getCspScriptPolicy(ctx)
   const noUnsafeEval = scriptPolicy && !scriptPolicy.includes('\'unsafe-eval\'')
   ctx.config.devtool = noUnsafeEval

packages/webpack/src/configs/server.ts

@@ -27,7 +27,8 @@ function serverPreset (ctx: WebpackConfigContext) {
   const { config } = ctx
 
   config.output!.filename = 'server.mjs'
-  config.devtool = 'cheap-module-source-map'
+
+  config.devtool = ctx.nuxt.options.sourcemap.server ? ctx.isDev ? 'cheap-module-source-map' : 'source-map' : false
 
   config.optimization = {
     splitChunks: false,

packages/webpack/src/webpack.ts

@@ -36,10 +36,10 @@ export async function bundle (nuxt: Nuxt) {
   // Configure compilers
   const compilers = webpackConfigs.map((config) => {
     config.plugins!.push(DynamicBasePlugin.webpack({
-      sourcemap: nuxt.options.sourcemap
+      sourcemap: nuxt.options.sourcemap[config.name as 'client' | 'server']
     }))
     config.plugins!.push(composableKeysPlugin.webpack({
-      sourcemap: nuxt.options.sourcemap,
+      sourcemap: nuxt.options.sourcemap[config.name as 'client' | 'server'],
       rootDir: nuxt.options.rootDir
     }))