Misleading warning and incorrect sourcemap behavior

[benmccann]

Describe the bug

This bug was introduced in #2904

Here's the warning I get:

Sourcemap for "src/routes/index.svelte" points to missing source files
Sourcemap for ".svelte-kit/dev/components/layout.svelte" points to missing source files

Here are the sourcemap definitions:

SourceMap {
  version: 3,
  mappings: ';;;;;;;;',
  names: [],
  sources: [ 'src/routes/index.svelte' ]
}
SourceMap {
  version: 3,
  mappings: ';;;;;;;',
  names: [],
  sources: [ '.svelte-kit/dev/components/layout.svelte' ]
}

Those files definitely exist

It's strange that Vite is even trying to read the source maps upon starting my app. They shouldn't be required unless an exception is thrown

Anyway, those files do exist. I see that #2904 says the path must be absolute. I strongly disagree with that and think that's the wrong behavior. If I build on my local machine or CI and then deploy the app to a production machine then the path I deploy to in production likely won't be the path where I built the app. That makes absolute paths broken. I reviewed some PRs for Svelte source map support and remember this question coming up there. When I'd looked at what was generally being done, I saw the majority of libraries use relative paths, which was what we had decided on as well. Rollup and other build tools are perfectly happy with relative paths

Even if Vite were going to keep this behavior the warning message is quite misleading. The files do exist. As far as I can tell, Vite simply isn't looking for them and a better warning would be about the paths being relative vs absolute. It'd also have been helpful for the warning message to include the location being pointed to. It was a little tricky to trackdown because these are virtual files, so I had to hack the source code to print out the source map since it didn't exist anywhere on disk

All that being said, I'm extremely grateful for #2904 because the previous behavior of throwing an exception instead of logging a warning was much worse 😄

Reproduction

This happens on newly created SvelteKit projects

npm init svelte@next my-app - choose Skeleton app and defaults for all others

System Info

npx envinfo --npmPackages @sveltejs/kit,vite,@vitejs/plugin-vue 

  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.138

Vite version is 2.4.4

### Used Package Manager

npm

### Logs

```shell
>Sourcemap for "src/routes/index.svelte" points to missing source files
Sourcemap for ".svelte-kit/dev/components/layout.svelte" points to missing source files

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 https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[aleclarson]

It was a little tricky to trackdown because these are virtual files, so I had to hack the source code to print out the source map since it didn't exist anywhere on disk

If you do DEBUG="vite:sourcemap" yarn dev, the missing source files will be logged.

These are the missing sources according to Vite:

• my-app/src/routes/src/routes/index.svelte
• my-app/.svelte-kit/dev/components/.svelte-kit/dev/components/layout.svelte

It looks like SvelteKit is generating broken sourcemaps, where the sources array contains file paths relative to the project root instead of the sourcemap's original module.

I see that #2904 says the path must be absolute

That's only for virtual modules (ie: a generated module without a 1-to-1 file association).

It's strange that Vite is even trying to read the source maps upon starting my app. They shouldn't be required unless an exception is thrown

Vite needs to inject source code into the sourcesContent property of the sourcemap immediately after the original module is transformed. If Vite waited until the sourcemap was requested, it would risk reading a source file after it's been changed, resulting in an incorrect sourcemap.

[benmccann]

If you do DEBUG="vite:sourcemap" yarn dev, the missing source files will be logged.

Aha! Thanks! I had been trying to figure out how to do this with various incantations like DEBUG="true", DEBUG="vite", etc. Is there some docs somewhere or anything I can reference to see what other debug commands are available? I was also trying to track down some SSR issues and it would be helpful to have more details there as well

I appreciate the explanation! I'll sync up with the Svelte folks and see if we can get it fixed there

[aleclarson]

You can always try DEBUG="vite:*" but it gets pretty noisy.

Here's the full undocumented list found by searching for createDebugger( in VS Code:

vite:config
vite:deps
vite:css
vite:esbuild
vite:rewrite
vite:resolve-details
vite:hmr
vite:spa-fallback
vite:resolve
vite:plugin-resolve
vite:plugin-transform
vite:sourcemap
vite:load
vite:transform
vite:cache
vite:proxy
vite:time