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!

Answer 1

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

devtool: "inline-source-map",

You can find clear information about it from the webpack website:

A SourceMap is added as a DataUrl to the bundle.

Answer 2

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].*')
})

],

Answer 3

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.

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";
}

Answer 5

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
    }
}

Answer 6

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

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