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?

wmock
  • 5,382
  • 4
  • 40
  • 62
  • 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) – olsn Mar 22 '16 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 Mar 22 '16 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. – olsn Mar 25 '16 at 13:22
  • @olsn unfortunately, that's not the case for me when i'm using `webpack` and not `webpack-dev-server` :( – wmock Mar 26 '16 at 06: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. – olsn Mar 26 '16 at 09:26

2 Answers2

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.

Matthias
  • 908
  • 1
  • 7
  • 22
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

Nicklas Pouey-Winger
  • 3,023
  • 6
  • 43
  • 75