search

vitejs / vite

Next generation frontend tooling. It's fast!
http://vitejs.dev
MIT License
67.17k stars 6.04k forks source link

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

Open luxaritas opened 2 years ago

luxaritas commented 2 years ago

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: https://github.com/vitejs/vite/blob/e66cf69cc27b8a8900f14af746ed6925c8af8fdc/packages/vite/src/node/utils.ts#L688

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 ```shell ❯ 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

i-am-the-slime commented 1 year ago

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 commented 11 months ago

I really wish there was an option to disable this particular warning: https://github.com/vitejs/vite/blob/14142076f91601b78b60d96631abdbf55dfab09e/packages/vite/src/node/server/sourcemap.ts#L63

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 commented 11 months ago

@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 commented 11 months ago

@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.