14

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: no-source-map

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?

5
  • 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) 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
    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. 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
    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. Commented Mar 26, 2016 at 9:26

2 Answers 2

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.

1
  • Hm I tried both of your suggestions and neither solve it for me :(
    – wmock
    Commented Mar 14, 2016 at 16:53
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

2
  • Out of curiosity, were you able to see sourcemaps after running webpack or webpack-dev-server?
    – wmock
    Commented Mar 15, 2016 at 6:22
  • Yes, the sourcemaps were available in chrome dev. console :) Commented Mar 15, 2016 at 7:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.