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.

Marty Nelson · Accepted Answer · 2024-02-24 18:27:50Z

0

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(),
};

answered Feb 24, 2024 at 18:27

Marty Nelson

1031 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related