app-scripts-react uses the babel cli for typescript instead of plugin-babel, and sourcemaps are not generated

[fredkschott]

app-scripts-react uses the babel cli for typescript instead of plugin-babel, and sourcemaps are not generated

[ervwalter]

I think sourcemap support is important for the unbundled development flows specifically for things like Typescript where, even though it's not bundled, the source code you are typing is being transformed before it's sent to the browser. It's really not practical to debug the transpiled Javascript without sourcemaps.

[Ciantic]

I modified the babel.config.json like this:

{
  "extends": "@snowpack/app-scripts-react/babel.config.json",
  "sourceMaps": "inline"
}

But the source maps are not in sync. If I add debugger; command it is not on right line number.

In my opinion the source maps should be enabled by default when doing:

npx create-snowpack-app new-dir2 --template @snowpack/app-template-react-typescript

Why would the template exist if it didn't include the basic minimal setup? Source maps surely are one of the first things you need when debugging. (IMO the developer experience should be made so good that you can just debug from VSCode too, the ideal end-goal.)

[FredKSchott]

Yup, our sourcemap support is limited right now, due to the fact that they provide less value in unbundled development. See previous discussion here: https://www.pika.dev/npm/snowpack/discuss/221#comment-6691

Right now we don't really support source maps outside of the bundle step. The idea is that because each build is single-file, no one file is ever that different from its source.

We will eventually support this for those who still want it, and if anyone else is willing to own the implementation of this then I'd consider pushing it up the roadmap and tacking it now. But my time is limited, it's a hard problem to solve.

[FredKSchott]

since it's just the babel CLI, you can enable them by adding --source-maps to the build script: https://babeljs.io/docs/en/babel-cli#compile-with-source-maps

Since your config gets merged with with the @snowpack/app-scripts-react config, you would just define a script with the same name in your own snowpack.config.js to overwrite the one provided by default.

[FredKSchott]

I think that we use the CLI because we needed to have the --config-file ${bundledConfig} support. But, eventually the plugin should support this.

[FredKSchott]

Snowpack now handles JS/JSX/TS/JSX compilation internally, by default. You can still add Babel if you'd like (with or without --source-maps) but CSA apps now ship without an additional Babel dependency by default.