Make internal transforms source-map compliant

[FredKSchott]

Now that #1048 has merged, we can add full sourcemap support. All that's needed is to convert our current dev/build string modifications to use https://www.npmjs.com/package/magic-string.

• wrapImportMeta (all other proxy files are okay / out of scope for now, since those were not JS to begin with)
• createImportResolver (will need to use the magic string s.overwrite API).
• audit all official plugins to make sure that they use new source-map API in transform() methods

Also, now that we support source maps with transforms we can log a warning when sourceMap: true but a transform function isn't returning source maps, causing no maps to be created.

[alex-saunders]

Hey @FredKSchott ! I'm interested in picking this up, I've got some experience using magic-string with creating rollup plugins so I should have some idea of the work involved here.
Looking forward to contributing to snowpack again!

[AlonMiz]

I think it's pretty important.
We've tried snowpack in our project and eventually reverted cause it didn't generate source-maps while working with React (or Typescript).
I've seen you several times wondering why source-maps are important in dev mode. But, and i think it's crucial
let's consider that piece of code:

transpiled into this code:

a react developer will not be able to work with those outputs.

[David-Else]

@FredKSchott I have been messing around with the Chrome devtools and getting nowhere, can I enable sourcemaps somehow right now even with errors? I would dearly love to stay in VS Code for debugging. I am not using any snowpack plugins, only the default TypeScript blank template. Thanks!

[gr2m]

Hey @alex-saunders thanks for picking it up! Let us know if there is anything we can help you with. Please feel free to start a work-in-progress pull request as early as you like

[Gregoor]

Also happy to help with this, @alex-saunders lmk if you need eyes/ears/brains for review or I can also take a stab at it if you don't have the time right now (though it sounds like you're more experienced with the subject matter).

[adam-beck]

I don't have a lot of experience with building any sort of tooling but this seems like such an important feature to include. So, as a beginner what sort of things would help me get started implementing this? I know a couple people have offered help but it seems the issue isn't making much progress.

I want to help. I just don't know what I'm doing.

[FredKSchott]

Discussion/Proposal created to intentionally remove sourcemap support from dev in v3.0 (while keeping it for bundled/optimized/minfied build output)
#1876

[AlonMiz]

just pointing out that the #1876 discussion resulted to actually implement source maps in dev mode.
I'm waiting for this feature for migrating all of my projects to Snowpack. really, this is the most important missing feature.

[jonlepage]

just pointing out that the #1876 discussion resulted to actually implement source maps in dev mode.
I'm waiting for this feature for migrating all of my projects to Snowpack. really, this is the most important missing feature.

After investigate, and to my surprise Vite support this very well! I can debug a nwjs and electron app without problem with Vscode., too bad I loved snowpack for several months, but this missing feature was a pain for dev !

Maybe look a Vite source code to try understand how to correctly implement a sourcemaps in dev mode, it might help.

[lukejacksonn]

Some work has been done on this recent in #3271 it is an initial attempt but would love to hear if the changes there helped anyone (or hindered 😅)! You should see "out of the box" source maps for any JSX/TSX, svelte files and vue templates in development mode.

[sant123]

Hey @lukejacksonn, thank you for this work. However it only works for a single file.

This is the template I'm currently using:

npx create-snowpack-app testing-sourcemaps --template @snowpack/app-template-react-typescript

And the config

[limulus]

I noticed the same thing as @sant123 in a TypeScript and React project.

Another issue I noticed with the new experimental support is that the sourceMappingURL comment is getting appended to modules coming from node_modules, but there is no corresponding .map file to load, which results in a bunch of 404 error messages for the .map files in the console when you open dev tools.

This is great progress though! I feel like it’s almost there! 😄

[ghry5]

@sant123 Setting devOptions.hmr = false makes it work with more than index.ts.

[sant123]

You are right @ghry5! Going to follow this workaround for now.

Thank you!

[melink14]

@limulus There's a specific bug about those node_modules based maps here: #3381

You can essentially fix it with sourcemap: 'inline' but that also led to some test failures when enabling coverage for me. 🤷🏾

[Paosder]

Hi team, is there any progress about this? I'm really looking forward to it. 😀

[fredDesign]

PLease, help devs , we need the sourcemap ... My team is pushing for Vite and I cant defend snowpack without that feature
(we use "@snowpack/plugin-sass": "^1.4.0" without succes, after many test for configuration)

[jonlepage]

PLease, help devs , we need the sourcemap ... My team is pushing for Vite and I cant defend snowpack without that feature
(we use "@snowpack/plugin-sass": "^1.4.0" without succes, after many test for configuration)

too late , we all migrate to ViteJs 😉

[AlonMiz]

we migrated to vite as well