Menu
I've created a Github repo that has all the source code related to this question. I'm able to load build/index.html in the browser after running npm install. However, when I view the sources tab in Chrome, I don't see the source maps associated with the .tsx files.
Here's a screenshot of what I see: 
I've added sourceMap: true in my tsconfig.json as well as debug: true and devtool: "source-map" in my webpack.config.json. Any thoughts on what I'm missing here?
EDIT:
This might be a silly question, but do you have to use webpack-dev-server in order to see the sourcemaps?
596
In a sense, source maps are the decoder ring to your secret (minified) code. Using Webpack, specifying devtool: "source-map" in your Webpack config will enable source maps, and Webpack will output a sourceMappingURL directive in your final, minified file.
Webpack bundles multiple source files to one single bundle file. In some cases, there can be multiple bundle files. But in both cases, if there is an error in one of the source files, it is difficult to track it down from browser console. Source maps connect the bundle file with corresponding source files.
Explanation: TypeScript Map files are source map files that let tools map between the emitted JavaScript code and the TypeScript source files that created it. And these Source Map files will then help to debug the Typescript file instead of debugging the emitted JavaScript file.
Your tsconfig.json might be well.
Try in your webpack.config.js either devtool: "inline-source-map" or remove the two options od debug and devtool complete.
In my case I don't need them.
84
I had to add a filepath for the sourcemap file. Take a look at the output part of this webpack.config.js: https://github.com/nwinger/reactreduxtodo/blob/master/webpack.config.js
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
