`vite serve` sourcemap `sources` resolution differs from `vite build`/rollup

[luxaritas]

Describe the bug

I initially discovered this issue due to my usage of rollup-plugin-typescript2 (which I'm using to get typedefs, experimentalDecorators support, etc). It runs the typescript compiler in a temporary directory in node_modules/.cache, such that the sourcemap generated by typescript has a sources array that looks like ["../../../../src/main.ts"]. When running vite build, which uses rollup's sourcemap collapsing it properly points to ["../src/main.ts"], but vite serve uses the original souremap path. It seems like rollup doesn't actually rely on just the sourcemap information, but also the source filename it derives from the module info, and then resolves what the sources array should contain ultimately based on that.

Note that this issue is not able to be completely resolved by the plugin as in order to provide a correct relative address in the sources array, it would need to know what the output directory is - but that isn't known until Rollup's bundling hooks, which vite serve doesn't run. Additionally, providing absolute source locations in that array results in them still being absolute in the final sourcemap, which has the result of failing to resolve in an environment where the sourcemaps are on a different machine than the browser.

The workaround in this case is to configure a relative sourceRoot to typescript which is correct for what I know the source/output directories should be, but that isn't particularly robust.

"Misbehaving" function:

vite/packages/vite/src/node/utils.ts

Line 688 in e66cf69

export function combineSourcemaps(

For more context see ezolenko/rollup-plugin-typescript2#407

Reproduction

https://stackblitz.com/edit/vitejs-vite-rjjhlb?file=vite.config.js

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    vite: ^3.0.2 => 3.0.4

Used Package Manager

npm

Logs

Click to expand

❯ vite --debug
  vite:config bundled config file loaded in 1850.14ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'rpt2',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:optimized-deps',
  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:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     esbuildOptions: { preserveSymlinks: undefined }
  vite:config   },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   configFile: '/home/projects/vitejs-vite-rjjhlb/vite.config.js',
  vite:config   configFileDependencies: [ '/home/projects/vitejs-vite-rjjhlb/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     optimizeDeps: { force: undefined },
  vite:config     server: {}
  vite:config   },
  vite:config   root: '/home/projects/vitejs-vite-rjjhlb',
  vite:config   base: '/',
  vite:config   resolve: { alias: [ [Object], [Object] ] },
  vite:config   publicDir: '/home/projects/vitejs-vite-rjjhlb/public',
  vite:config   cacheDir: '/home/projects/vitejs-vite-rjjhlb/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: 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   },
  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   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  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(0) {},
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object]
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }
  vite:config } +10ms

  VITE v3.0.4  ready in 4531 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  vite:deps scanning for dependencies... +0ms
  vite:deps Crawling dependencies using entries:
  vite:deps   /home/projects/vitejs-vite-rjjhlb/index.html +0ms
  vite:resolve 1.04ms /src/main.ts -> /home/projects/vitejs-vite-rjjhlb/src/main.ts +0ms
  vite:resolve 9.88ms ./counter -> /home/projects/vitejs-vite-rjjhlb/src/counter.ts +53ms
  vite:deps Scan completed in 680.32ms: {} +663ms
  vite:deps no dependencies found by scanner +682ms
  vite:spa-fallback Rewriting GET / to /index.html +0ms
  vite:time 277.42ms /index.html +0ms
  vite:resolve 3.30ms /@vite/client -> /home/projects/vitejs-vite-rjjhlb/node_modules/vite/dist/client/client.mjs +0ms
  vite:load 4.18ms [fs] /@vite/client +0ms
  vite:resolve 1.78ms @vite/env -> /home/projects/vitejs-vite-rjjhlb/node_modules/vite/dist/client/env.mjs +21ms
  vite:resolve 1.02ms /node_modules/vite/dist/client/env.mjs -> /home/projects/vitejs-vite-rjjhlb/node_modules/vite/dist/client/env.mjs +2ms
  vite:import-analysis 8.76ms [1 imports rewritten] node_modules/vite/dist/client/client.mjs +0ms
  vite:transform 14.62ms /@vite/client +0ms
  vite:time 43.76ms /@vite/client +94ms
  vite:resolve 1.46ms /src/main.ts -> /home/projects/vitejs-vite-rjjhlb/src/main.ts +30ms
  vite:load 8.74ms [fs] /node_modules/vite/dist/client/env.mjs +50ms
  vite:load 3.76ms [fs] /src/main.ts +2ms
  vite:import-analysis 0.16ms [no imports] node_modules/vite/dist/client/env.mjs +186ms
  vite:transform 149.68ms /node_modules/vite/dist/client/env.mjs +185ms
  vite:cache [memory] /node_modules/vite/dist/client/env.mjs +0ms
  vite:time 2.84ms /node_modules/vite/dist/client/env.mjs +181ms
  vite:resolve 1.32ms ./style.css -> /home/projects/vitejs-vite-rjjhlb/src/style.css +173ms
  vite:resolve 0.66ms /src/style.css -> /home/projects/vitejs-vite-rjjhlb/src/style.css +1ms
  vite:resolve 1.30ms ./typescript.svg -> /home/projects/vitejs-vite-rjjhlb/src/typescript.svg +2ms
  vite:resolve 0.68ms /src/typescript.svg -> /home/projects/vitejs-vite-rjjhlb/src/typescript.svg +1ms
  vite:resolve 0.54ms ./counter -> /home/projects/vitejs-vite-rjjhlb/src/counter.ts +2ms
  vite:resolve 0.44ms /src/counter.ts -> /home/projects/vitejs-vite-rjjhlb/src/counter.ts +0ms
  vite:import-analysis 11.12ms [3 imports rewritten] src/main.ts +23ms
  vite:transform 176.88ms /src/main.ts +29ms
  vite:load 1.26ms [plugin] /src/typescript.svg +187ms
  vite:import-analysis 0.06ms [no imports] src/typescript.svg +15ms
  vite:transform 1.38ms /src/typescript.svg +10ms
Sourcemap for "/home/projects/vitejs-vite-rjjhlb/src/main.ts" points to missing source files
  vite:time 202.26ms /src/main.ts +33ms
  vite:load 9.92ms [fs] /src/style.css +9ms
  vite:load 10.20ms [fs] /src/counter.ts +0ms
  vite:hmr [self-accepts] src/style.css +0ms
  vite:import-analysis 0.80ms [0 imports rewritten] src/style.css +80ms
  vite:transform 71.22ms /src/style.css +79ms
  vite:cache [memory] /src/style.css +115ms
  vite:time 2.04ms /src/style.css +81ms
  vite:import-analysis 0.10ms [no imports] src/counter.ts +7ms
  vite:transform 79.84ms /src/counter.ts +9ms
  vite:cache [memory] /src/typescript.svg +9ms
  vite:time 1.92ms /src/typescript.svg?import +9ms
Sourcemap for "/home/projects/vitejs-vite-rjjhlb/src/counter.ts" points to missing source files
  vite:cache [memory] /src/counter.ts +5ms
  vite:time 2.50ms /src/counter.ts +5ms
  vite:time 9.44ms /vite.svg +41ms
  vite:time 8.10ms /src/typescript.svg +2ms
  vite:deps ✨ static imports crawl ended +897ms
  vite:deps ✨ no dependencies found by the scanner or crawling static imports +1

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.

[i-am-the-slime]

What's the workaround for PureScript?

I am running some tests that were compiled from PureScript.
The compiled file lives in: output/Test.ExampleTest/index.js
The file ends in this line: //# sourceMappingURL=index.js.map
Which points to a file right next to it of that very name which contains the sourcemapping back to the original .purs file.

However, when my test fails, vitest shows content of the js instead of the purs file.
I've played with a few settings that seem to mention sourcemap but nothing worked.

[shellscape]

I really wish there was an option to disable this particular warning:

vite/packages/vite/src/node/server/sourcemap.ts

Line 63 in 1414207

logger.warnOnce(`Sourcemap for "${file}" points to missing source files`)

You can find issues around this sourcemap message going back at least 3 years. It frequently breaks and the algorithm consistently runs into edge cases. @patak-dev @sapphi-red

[sapphi-red]

@i-am-the-slime We need a reproduction to answer that question.

@shellscape I think setting customLogger would work.
https://vitejs.dev/config/shared-options.html#customlogger:~:text=Use%20a%20custom%20logger%20to%20log%20messages.%20You%20can%20use%20Vite%27s%20createLogger%20API%20to%20get%20the%20default%20logger%20and%20customize%20it%20to%2C%20for%20example%2C%20change%20the%20message%20or%20filter%20out%20certain%20warnings

[shellscape]

@sapphi-red thanks, that's actually what I'm using now. given how prolific that has been over the years, and how there's a dedicated block to that warning, I think an option to suppress would still be wise.