Broken source-maps

[JannikGM]

I believe this plugin corrupts source-maps.

Chrome devtools will not point at debugger statements; I believe this plugin is causing the misalignment in the source-maps.

See vite-plugin/vite-plugin-utils#8 for my speculation as to why that is.

[JannikGM]

I've realized that we were using @originjs/vite-plugin-commonjs and not this repository.

However, I believe the argument still stands.

[yejimeiming]

Thanks for your feedback, I'm not sure exactly where the problem you describe is occurring.
I did currently find one that was breaking the sourcemap and I fixed it.

---

vite-plugin-commonjs will not break the line number of the source code, it will only insert the corresponding runtime code in the first line or after the source code.

https://github.com/vite-plugin/vite-plugin-commonjs/blob/v0.8.0/test/fixtures/src/dynamic.tsx

https://github.com/vite-plugin/vite-plugin-commonjs/blob/v0.8.0/test/fixtures/__snapshots__/dynamic.tsx

[JannikGM]

That's quite a hack to avoid source-maps.

I'm not sure exactly where the problem you describe is occurring.

Yes, this report is invalid then.

As I was mentioning: I accidentally reported the bug here while I was using a different plugin with a similar name (vite-plugin/vite-plugin-commonjs vs. originjs/vite-plugins/vite-plugin-commonjs).
Initially I thought you had the same bug as the other plugin, but your hack (only putting things in first line after the comment + after original code) avoids the need for sourcemaps.

[yejimeiming]

Yes, this report is invalid then.

Yeah! I'm not very clear on sourcemap, and I think blindly generating sourcemap would break it, because Vite has already converted the .js or .ts file once and generated sourcemap, so if I generate sourcemap again, which is essentially based on Vite's converted code, it's obviously wrong to do so.

So, I think we should keep the original sourcemap generated by Vite and not generate it again.

[JannikGM]

[...] so if I generate sourcemap again, which is essentially based on Vite's converted code, it's obviously wrong to do so.

I've limited experience with this, but - I think - I have successfully patched that originjs plugin I mentioned to generate proper source-maps (because they add new lines, instead of your hack).

I believe, Vite expects plugins to return the transformed code + a new source-map for the transformed-code (vs. the code it gave you).
Vite will then merge your source-map, with the source-map of the code it gave you.

So if you modify code, then you should generate and return a source-map for your changes only; Vite appears to deal with the rest.

Your hack avoids the need for this in most cases (because you abuse that the first line is a comment).

[yejimeiming]

Thanks for your persistence! I think I may have found the answer in the Vite source code.

1. https://github.com/vitejs/vite/blob/v4.3.9/packages/vite/src/node/server/pluginContainer.ts#L728
2. https://github.com/vitejs/vite/blob/v4.3.9/packages/vite/src/node/server/pluginContainer.ts#L738
3. https://github.com/vitejs/vite/blob/v4.3.9/packages/vite/src/node/server/pluginContainer.ts#L519
4. https://github.com/vitejs/vite/blob/v4.3.9/packages/vite/src/node/utils.ts#L732-L790

I'll try to fix this in the next release(v0.8.1 #30) using magic-string.
BTW, explain vite-plugin-utils/function(MagicString), it makes sense because it's very small!