How can I use TypeScript with sourcemaps

[gilamran]

Hi,
I've been reading around, looking for solutions for the missing sourcemaps when using typescript template and all I've found is that doing multiple steps with sourcemaps is problematic at the moment.
But TypeScript supports sourcemaps and there's no need for multiple steps... Is it possible working with TypeScript and sourcemaps somehow? is it planned?

I want to move to full Snowpack dev env. and TypeScript sourcemaps are a must for me.

Thanks

[FredKSchott]

Our TS->JS builder supports source maps, but dev mode will make changes to the file after it's been built to JS that can break some source maps. That's what we're working to improve now.

fwiw, TS->JS is a very light compilation, the generated JS code will look almost identical. Since we build each file individually during development, source maps really don't buy you as much vs. the added complexity. If you haven't tried developing with Snowpack without source maps, I'd suggest giving it a try.

[gilamran]

I'm not sure that I understood what you said... you said "TS->JS builder supports source maps" and the rest I did not really understand... can you please clarify?

I gave a try, in react-typescript the code is not readable... especially the jsx => js part
Snowpack sounds promising! but without source maps, is a "deal-breaker" for me (And many other developers), hope this will be possible in some way, or soon.

Waiting for details.

[FredKSchott]

Our file build pipeline is creating source maps correctly for the most part, but small modifications that we do to each file end up breaking the source map that we do create. Or, some individual plugin in your build isn't returning a source map, which is required for them to work.

I created an issue here to track the remaining work: #1213

[Paosder]

I completely agree with @gilamran. Some frictions with sourcemap cause bad developer experience makes developers to hesitate to land snowpack in their project. It would be very great if we could remove these big frictions.

[David-Else]

Hi, I am totally confused.

I am trying to debug my TypeScript in VS Code, I am using the latest snowpack and the latest typescript-blank-template. I add a breakpoint on the TypeScript code and it says 'unbound breakpoint', I look in the public directory and there is no breakpoint file generated. If I can't add breakpoints to my TS then I can't use the debugger, if there is no sourcemap file how can the debugger link the compiled JS and the source TS?

esBuild should create sourcemaps, I am not using any plugins other than the supplied one that outputs the TSC info.

How am I meant to debug my TypeScript code? Surely this functionality is absolutely essential, or is everyone using a workaround that I am not seeing? Thanks!

[FredKSchott]

Are you seeing generated sourcemap files that are broken, or is there no sourcemap file at all?

Sourcemap support is still experimental during development, see here for the remaining work needed: #1213

Also copying (and slightly editing) my comment from above here:

fwiw, TS->JS is a very light compilation, the generated JS code will look almost identical. Since we build each file individually during development, you get a good amount of organization/clarity in your built code without source-maps. If you haven't tried developing with Snowpack without source maps, I'd suggest giving it a try.

[David-Else]

There are no sourcemap files generated at all.

Please could you explain how I debug my TypeScript using Snowpack? I am using the latest Code debugger which has Chrome support built-in. I just don't get what your quoted comment is saying, to edit the compiled .js code for debugging and copy/paste it back to the source file?

[FredKSchott]

I'm sorry, I'm not familiar with Code debugger. But in general, you can edit a TypeScript file, reload your page, and then see the compiled output with changes (JS) in your debugger / browser devtools. If you need to add breakpoints, you can add them to the compiled JS file directly.

[David-Else]

I think there is some problem with the new Code debugger, I can get it to pause, but not stop on a breakpoint. Also when I recompile and hit browser update it does not update the .js file from localhost _dist_, I have to pause again to generate a new .js file from the browser.

Basically, it is all super complex and I don't know if the problem is with Snowpack, Code or just me!

If you could test Snowpack and TS with Code/Chrome debugging at some point it would be super useful, I think many many people use this combination.

I will wait for the sourcemaps to get added to Snowpack and try again then. Cheers!

[Kleptine]

I can also attest that the default Snowpack React-Typescript template generates no sourcemaps in the dist folder. And neither browser finds any.

[jesuslpm]

I can also confirm that the default @snowpack/app-template-blank-typescript generates no sourcemaps. Changing tsconfig.json and setting "sourceMap": true or "inlineSourceMap": true doesn't help either.

To be honest, not having source maps is a show stopper that prevent TypeScript programmers to adopt Snowpack.

[ca0v]

I was thinking the inlineSourceMap would be the answer here...sounds like some processing is taking place on the transpiled javascript, which would break the sourcemap regardless of where it exists. I wonder if the typescript could be processed before the transpiler runs?

[darren-outdev]

Avid TypeScript developer here, new to Snowpack. Im struggling between the tradeoff of (truly faster) build speeds vs having a great debug environment.

I think the whole 'dealbreaker' attitude is incorrect, I've had zero issues debugging in JS (Where I need to, seriously, TS is meant to prevent debugging issues) - though it's a huge inconvenience to have to switch from a TS mindset to seeing the translated JS code

Really looking forward to seeing some maps shipped, especially if it can all be done in the blazing fast speed I've come to love.

Good luck team!

[Giveback007]

Based on my experience debugging TypeScript in VS Code is really a superior dev experience. Would love to see this working.

[thecodejack]

Hi Team

Is this fixed? I am still unable to use TS sourcemaps for app created via template

[piotrpawlik]

Any updates?

[salmenf]

Works in snowpack@3.8.8 for me with these settings:

In your snowpack.config.mjs:

  buildOptions: {
    sourcemap: true
  }

In your tsconfig.json:

  "compilerOptions": {
    "sourceMap": true
  }

Note: inlineSourceMap instead of sourceMap in the tsconfig also works.

The documentation doesn't mention the tsconfig setting which confused me at first.