Vite sourcemaps show in inspector, but loads different sourcemap in browser

Question

Vite doesn't serve my transform sourcemaps even though they are available in the pipeline,

I'm building a framework plugin and not able to get vite to correctly serve sourcemaps.

Using vite-plugin-inspect here is the pipeline:

The sourcemaps are working during the plugin transform step:

.

The only other step after this one is the vite-import-analysis that does not have a "sourcemap" button in the inspector. However, the browser has a file with a different source that appears to identical to the file itself. Here is the sourcemap embedded via sourceMappingURL=data:application/json loaded into sourcemap visualizer:

I set up a repo on StackBlitz and included the actual plugin code as I suspect it may be how I am using vite:

https://stackblitz.com/edit/vitejs-vite-kxfbbf?file=plugin.js

For comparison, here is a SolidJS Stackblitz that correctly serves the source file.

Answer 1

The problem turned out to be that directly passing the mozilla SourcMapGeneator instance as the return map "SourceMap" value. Perhaps because of my poor variable choice (sourceMap) my brain connected the two ‍♂️. But the generator is not the sourcemap (it produces the sourcemap). The solution is to use the .toJSON() method which returns a sourcemap v3 object:

return {
    code,
    map: smGenerator.toJSON(),
};