50

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: enter image description here

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()
  ]

};
Nikos
  • 7,295
  • 7
  • 52
  • 88

3 Answers3

7

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:

    sourceMappingURL

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

    source map file

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

    original file in 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:

Add source map

Additional Resources

KyleMit
  • 30,350
  • 66
  • 462
  • 664
  • I have tried to add the source map, but it does nothing. The source map validator is not working as well. I have tried with the mozilla library and is parsing the source map correctly. – Matteo Dec 24 '20 at 04:09
1

If you're mapping to a workspace, that means you already have the source code. Including the source code in your source map is creating an unnecessary redundancy.

Use nosources-source-map instead.

ShortFuse
  • 5,970
  • 3
  • 36
  • 36
0

The issue with external source maps was fixed in Chrome 52 but it looks like you've got your devtool set differently from mine, I use:

devtool: '#source-maps'

How are you building your source? If you're running with -d it will switch to inline source maps

Thomas Grainger
  • 2,271
  • 27
  • 34
  • 2
    What's the difference when you add the #? – Andrei CACIO Dec 12 '16 at 07:54
  • The '#' controls the directive that does into the JS file. You can use '@' instead for older browsers:The original source map spec used '@', but this conflicted with 'conditional compilation' (which is activated with @cc_on) in IE<11, which runs code in comments, and would result in errors of the type: – Thomas Grainger Dec 13 '16 at 11:11
  • 7
    Not cryptic at all – Matt Oct 26 '18 at 21:29
  • 3
    @ThomasGrainger Where is that documented? There is no mention of hashes or at-signs in the official docs: https://webpack.js.org/configuration/devtool/ – Tim Oct 13 '21 at 01:42