Source Maps not working with Webpack

Question

I'm pretty new to webpack and having some trouble configuring it to produce the necessary source maps. In the devtools it says

Source Map detected

but it shows the bundle and not the original code:

Here is my webpack.config.js:

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080/',
    'webpack/hot/dev-server',
    "./src/index.js"
  ],
  output: {
    filename: 'bundle.js',
    path: '/',
  },
  debug: true,
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.jsx', '.scss', '.js', '.json']
  },
  module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /node_modules/,
        loaders: ['react-hot','babel']
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ["style", "css?sourceMap", "sass?sourceMap"]
      }
    ]
  },
  devServer: { hot: true },
  plugins: [ new webpack.HotModuleReplacementPlugin() ],
  inline: true,
  progress: true,
  colors: true
};

And here is my package.json:

{
  "name": "react-template",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev:test": "./node_modules/.bin/webpack --config webpack.test.config.js",
    "test:bundle": "./node_modules/.bin/tape test/bundle.js",
    "dev:serve": "./node_modules/.bin/webpack-dev-server --config webpack.development.config.js"
  },
  "devDependencies": {
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "css-loader": "^0.23.1",
    "node-sass": "^3.8.0",
    "on-build-webpack": "^0.1.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-hot-loader": "^1.3.0",
    "sass-loader": "^3.2.1",
    "style-loader": "^0.13.0",
    "tape": "^4.4.0",
    "webpack": "^1.12.12",
    "webpack-dev-server": "^1.14.1"
  }
}

I've tried multiple variations of the devtool option and read this, this and this but no luck.

Any help would be great!

Harker

I can't get it to even say source map detected – Beamon

Answer 1

In bundle.js you will see original transpiled webpack bundle - this is normal behaviour.

Open webpack:// and you will see your project files.

Transship

Right, but why does Chrome keep pestering you that a Source Map was detected, if it shows it already? – Essen

There are currently issues with Chrome, if this answer does not solve the issue, then take a look here: github.com/webpack/webpack/issues/3165 – Selfpronouncing

@Transship Thanks for the answer. If I am seeing an error in console which shows the uglified trace, how can I find the original variable/function name? For example, I am seeing (index):27 Uncaught Error: [$injector:modulerr] Failed to instantiate module bolt due to: Error: [$injector:unpr] Unknown provider: e My app is compiling and working without minification, but fails when I run webpack in production mode because of above error. Any help is appreciated. Thanks – Stratosphere

Answer 2

Add the following in your webpack.config.js file:

devtool: "#inline-source-map",

You can find clear information about it from the webpack website: https://webpack.js.org/configuration/devtool/

Also please find attached screenshot of sourcemap part from the webpack website.

Primate

It should be devtool: "inline-source-map", in case of Webpack 5+ – Danaedanaher

Answer 3

Make sure you have --mode development in your npm build script,

{
 "name": "test",
 "version": "1.0.1",
 "description": "",
 "scripts": {
 "build": "webpack",
  "start": "webpack-dev-server --mode development --open"
   "test": "echo \"Error: no test specified\" && exit 1",
 },
  "author": "",
  "license": "",
  "devDependencies": {
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-preset-env": "^1.7.0",
  "webpack": "^4.19.1",
  "webpack-cli": "^3.1.0",
  "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {}
 }

webpack.config.js

const path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/web.js',
    devtool: 'inline-source-map',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["babel-preset-env"]
                }
            }
        }]
    },
    devServer: {
        inline: true,
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        watchOptions: {
            index: 'index.html',
            open: true,
            poll: true,
            watchContentBase: true
        }
    },
    watch: true,
    watchOptions: {
        aggregateTimeout: 500,
        ignored: /node_modules/,
        poll: 3000
    }
}

Lapidary

Answer 4

The issue I was facing was in my nginx configuration. My nginx configuration was throwing 404 for the source map files, because it couldn't identify the .map files where to look for. So added .map also in addition to .js|.css and it was fixed.

location ~* \.(?:css|js|map)$ {
  expires 1y;
  access_log off;
  add_header Cache-Control "public";
}

Agiotage

Answer 5

For me the issue was that I had a special character "ß" in my html:

<textarea
   id="start_location"
   defaultValue="Gerwigstraße 22, 76131 Karlsruhe"
/>

Changed the default value to "Gerwigstraße 22, 76131 Karlsruhe" and the source map is working again.

Cooney

Answer 6

If your 'source-map' is not working, you can try 'inline-source-map' instead:

devtool: 'inline-source-map',

Or if you still wana use 'source-map', you can try to add this line in your plugins:

  plugins: [
...
new webpack.SourceMapDevToolPlugin({
  test: new RegExp('\.[js|css|mjs].*')
})

],

Idealist