Empty - dummy sourcemap generation of components with setup directive

[onderceylan]

Related plugins

• plugin-vue

• plugin-vue-jsx

Describe the bug

I am using setup directive on SFCs which composes other components with module imports, and I generate builds with vite with sourcemaps enabled.

What I expect is to have sourcemaps generated for all the components I have in the project.

What happening is, vite ignores to generate sourcemaps for some components, depending on the content in the script tag with the setup directive. Inside the pages folder of the reproduction URL, there are various examples of single file components failing and succeeding generating sourcemaps.

Reproduction

https://stackblitz.com/edit/vitejs-vite-1qo3gs?file=README.md&view=editor

Steps to reproduce

• Run pnpm build to generate the dist folder.
• Run pnpm test to test the generated sourcemaps.
• Inspect the SourcemapFails-xxx.js.map files under dist/assets folder manually.

ℹ️ Stackblitz starter script on reproduction URL already runs both scripts.

System Info

*System info of the stackblitz env*

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
    @vitejs/plugin-vue: ^5.1.3 => 5.1.4 
    vite: ^5.4.6 => 5.4.6

Used Package Manager

pnpm

Logs

> [email protected] build /home/projects/vitejs-vite-m34k3b
> vite build "--debug"

  vite:config bundled config file loaded in 628.02ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:force-systemjs-wrap-complete',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: true,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     ssrEmitAssets: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true },
  vite:config     cssMinify: true
  vite:config   },
  vite:config   resolve: {
  vite:config     mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [ 'vue' ],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   define: {
  vite:config     __VUE_OPTIONS_API__: true,
  vite:config     __VUE_PROD_DEVTOOLS__: false,
  vite:config     __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
  vite:config   },
  vite:config   ssr: {
  vite:config     target: 'node',
  vite:config     external: [],
  vite:config     optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   configFile: '/home/projects/vitejs-vite-m34k3b/vite.config.js',
  vite:config   configFileDependencies: [ '/home/projects/vitejs-vite-m34k3b/vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/home/projects/vitejs-vite-m34k3b',
  vite:config   base: '/',
  vite:config   decodedBase: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: '/home/projects/vitejs-vite-m34k3b/public',
  vite:config   cacheDir: '/home/projects/vitejs-vite-m34k3b/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   bundleChain: [],
  vite:config   isProduction: true,
  vite:config   css: { lightningcss: undefined },
  vite:config   esbuild: { jsxDev: false },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     sourcemapIgnoreList: [Function: isInNodeModules$1],
  vite:config     middlewareMode: false,
  vite:config     fs: {
  vite:config       strict: true,
  vite:config       allow: [Array],
  vite:config       deny: [Array],
  vite:config       cachedChecks: undefined
  vite:config     }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   envDir: '/home/projects/vitejs-vite-m34k3b',
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(1) {
  vite:config     'fnpd_/home/projects/vitejs-vite-m34k3b' => {
  vite:config       dir: '/home/projects/vitejs-vite-m34k3b',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     set: [Function (anonymous)]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: {
  vite:config     holdUntilCrawlEnd: true,
  vite:config     esbuildOptions: { preserveSymlinks: false }
  vite:config   },
  vite:config   worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +4ms
vite v5.4.6 building for production...
✓ 40 modules transformed.
dist/index.html                           0.46 kB │ gzip:  0.30 kB
dist/assets/index-BEN3oO53.css            1.06 kB │ gzip:  0.58 kB
dist/assets/SourcemapFails4-B3JDh9Ej.js   0.38 kB │ gzip:  0.29 kB │ map:   0.11 kB
dist/assets/SourcemapWorks2-oE8Jj575.js   0.40 kB │ gzip:  0.30 kB │ map:   0.41 kB
dist/assets/SourcemapFails-CW90RCbq.js    0.50 kB │ gzip:  0.34 kB │ map:   0.11 kB
dist/assets/SourcemapFails2-DCnImS2G.js   0.51 kB │ gzip:  0.36 kB │ map:   0.11 kB
dist/assets/SourcemapWorks3-B4Gh-qAj.js   0.58 kB │ gzip:  0.38 kB │ map:   0.61 kB
dist/assets/SourcemapWorks5-NCeZxK0J.js   0.60 kB │ gzip:  0.40 kB │ map:   0.67 kB
dist/assets/SourcemapFails3-CMvLlTw9.js   0.61 kB │ gzip:  0.40 kB │ map:   0.11 kB
dist/assets/SourcemapWorks-lpmwCeGn.js    0.61 kB │ gzip:  0.41 kB │ map:   1.06 kB
dist/assets/SourcemapWorks4-DIP3uqNF.js   0.66 kB │ gzip:  0.43 kB │ map:   0.80 kB
dist/assets/index-DbbWcRrX.js            87.06 kB │ gzip: 34.11 kB │ map: 728.21 kB
✓ built in 1.44s

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[edison1105]

Not sure if it's a rollup problem. source.traceMappings() got empty mappings

[sapphi-red]

vite-plugin-vue/packages/plugin-vue/src/script.ts

Lines 72 to 85 in aad378e

	const resolved: SFCScriptBlock = options.compiler.compileScript(descriptor, {
	...options.script,
	id: descriptor.id,
	isProd: options.isProduction,
	inlineTemplate: isUseInlineTemplate(descriptor, options),
	templateOptions: resolveTemplateCompilerOptions(descriptor, options, ssr),
	sourceMap: options.sourceMap,
	genDefaultAs: canInlineMain(descriptor, options)
	? scriptIdentifier
	: undefined,
	customElement,
	propsDestructure:
	options.features?.propsDestructure ?? options.script?.propsDestructure,
	})

It seems the inlined template mappings are not included in the sourcemap returned from the vue sfc compiler.

So this is the same with #500 (vuejs/core#12682) and will be fixed by vuejs/core#12701.