Broken source-maps after MagicString

[JannikGM]

This particular issue was noticed with https://github.com/vite-plugin/vite-plugin-commonjs but it probably exists in multiple projects.
(Edit: Incorrect, we were using @originjs/vite-plugin-commonjs which is unrelated to this project)

---

When setting a breakpoint using debugger the Chrome devtools will point to a different line.
I speculate this particular plugin is causing this issue.

I believe the issue is that this class does not handle source-maps:

vite-plugin-utils/function/index.ts

Line 14 in 219a1e0

export class MagicString {

Similar projects do support source-maps:

• https://github.com/dumberjs/modify-code
• https://github.com/Rich-Harris/magic-string (named in source-code and does support source-maps)

Other vite plugins appear to use babel for example: https://babeljs.io/docs/options#sourcemaps

Note how a similar plugin (which does not work for us for other reasons) has explicit support for source-maps:

https://github.com/WarrenJones/vite-plugin-require-transform/blob/fb4b9c08b6cf9450ef55c3232b6d61152dfe4c42/src/index.ts#L200

Please integrate source-maps in @vite-plugin plugins by using one of the existing solutions / create fitting source-maps as part of the transform.

[JannikGM]

I believe this issue is still open, given what I explained in vite-plugin/vite-plugin-commonjs#28 (comment)

MagicString should generate a source-map (which, I believe, is the major idea behind MagicString in Rich-Harris/magic-string), and plugins using MagicString should return that source-map to Vite.