Missing sourcemaps in Typescript + Webpack project

Question

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?

I don't see a problem here, I cloned your repo: npm install && typings install && npm run dev -> opened chrome -> F12 -> navigate to localhost:8080/webpack-dev-server (or localhost:8080/build - both works) and I'm seeing a log from ReactDOM.js:66 and app.tsx:14, so sourceMaps seem to be working - maybe your issue is to FIRST open the dev-tools before entering the url (or hit F5 after opening the dev-tools) - but your config seems to work. - Running Node v4.2.6 (>=4.x.x is required for Webpack i think) — Olaf Horstmann
– Olaf Horstmann, Commented Mar 22, 2016 at 21:00
@olsn when I initially posed this question, I was wondering if I could see the source maps when I'm just using webpack and not webpack-dev-server. Seems like in order to see source maps, I'll need to use webpack-dev-server, right? — wmock
– wmock, Commented Mar 22, 2016 at 22:14
no, the source-maps will be generated with both webpack as well as webpack-dev-server - since it is basically the same thing, with the addition of the dev-server automatically serving the stuff that webpack packaged. - So you can use npm run build or npm run dev and both will generate a source-map. — Olaf Horstmann
– Olaf Horstmann, Commented Mar 25, 2016 at 13:22
@olsn unfortunately, that's not the case for me when i'm using webpack and not webpack-dev-server :( — wmock
– wmock, Commented Mar 26, 2016 at 6:58
You used ’npm run build’? Make sure there is no global version of webpack installed. Are there any errors or warnings in the log? I tested it again before my last comment and it works. What system? What node version? Where are you looking for the map? (Its generated into ’build/bundle.js.map’ you might want to clear the build folder before. — Olaf Horstmann
– Olaf Horstmann, Commented Mar 26, 2016 at 9:26

Matthias · Accepted Answer · 2016-03-14 13:58:55Z

4

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.

answered Mar 14, 2016 at 13:58

Matthias

9281 gold badge7 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wmock Over a year ago

Hm I tried both of your suggestions and neither solve it for me :(

Nicklas Pouey-Winger · Accepted Answer · 2016-03-15 05:58:53Z

1

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

answered Mar 15, 2016 at 5:58

Nicklas Pouey-Winger

3,0337 gold badges48 silver badges76 bronze badges

2 Comments

wmock Over a year ago

Out of curiosity, were you able to see sourcemaps after running webpack or webpack-dev-server?

Nicklas Pouey-Winger Over a year ago

Yes, the sourcemaps were available in chrome dev. console :)

Collectives™ on Stack Overflow

Missing sourcemaps in Typescript + Webpack project

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related