Sourcemaps are detected in chrome but original source is not loaded, using webpack-2

Question

When running an application that is built using webpack 2, sourcemaps are detected in chrome but original source is not loaded. I'm using webpack beta21.

These files used to be detected automatically, ie when a breakpoint was put in the the output from webpack js file, the source view would jump to the original source input to webpack. But now I am stuck with this screen:

config:

var path = require("path");
var webpack = require("webpack");
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');


const PATHS = {
  app: path.join(__dirname, '../client'),
  build: path.join(__dirname, '../public')
};

module.exports = {


  entry: {
    app: PATHS.app + '/app.js'
  },
  output: {
    path: PATHS.build,
    filename: '[name].js'
  },


  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'client'),
        ],
        exclude: /node_modules/

      },

      {
        test: /\.css/,
        loader: "style!css"
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  } ,
  plugins: [
    new WebpackBuildNotifierPlugin()
  ]

};

Answer 1

Generated files with source maps won't automatically redirect to their original files, because there's potentially a 1-to-many relationship.

If you see the message Source Map Detected, the original file should already appear on the side file tree or the file explorer via Crl + P. If you don't know the original file name, you can open the source map file itself.

1. The source map path can be identified by a //# sourceMappingURL= comment or the X-SourceMap header:

   

2. Open up the source map via url and look for the sources property for the original file name:

   

3. The original file should be visible in the sources panel:

   

If you don't see the message Source Map Detected

You can manually add an external source map by right clicking and selecting Add Source Map:

Additional Resources

• If that still doesn't work, you can try a Source Map Validator
• For webpack specifically, you can configure the devtool property