vite-plugin-singlefile makes sourcemaps useless

[demike]

using viteSingleFile() makes sourcemaps useless.

export default defineConfig({
  root: "./src",
  plugins: [react(), viteSingleFile()], 
  build: {
    target: "esnext",
    sourcemap: true, // sourcemap: "inline",
    assetsInlineLimit: 100000000,
    chunkSizeWarningLimit: 100000000,
    cssCodeSplit: false,
    outDir: "../dist",
  }, 
});

Setting a breakpoint is not possible anymore, as the sourcemaps point to the wrong position. This is the case for sourcemap: "inline" and sourcemap: true.

When removing viteSingleFile the breakpoints work as expected.

This is a problem when trying to debug a figma plugin. It is only allowed to have one html file

[richardtallent]

Yup, that's a problem! Not sure what can be done about it, though. This plugin strings together all assets in order after they've been built, so we don't have the opportunity to impact how sourcemaps are generated.

My only suggestion would be to try using a non-minified build for testing by adding this to your vite.config.js, then turn off sourcemaps:

build: {
    minify: false,
},

I googled this syntax, didn't try it.

That won't give you the full experience of a sourcemap, but at least the code will be more readable.