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:

screen shot 2016-06-20 at 18 04 05

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!

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

Henry
– Henry

2017-09-19 00:32:38 +00:00
Commented Sep 19, 2017 at 0:32 — Henry
– Henry, Commented Sep 19, 2017 at 0:32

Everettss · Accepted Answer · 2016-06-20 17:28:02Z

33

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

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

answered Jun 20, 2016 at 17:28

Everettss

16.2k9 gold badges78 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dan Dascalescu Over a year ago

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

lanoxx Over a year ago

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

Aswin K Over a year ago

@Everettss 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

General Grievance · Accepted Answer · 2024-11-19 15:46:38Z

16

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.

edited Nov 19, 2024 at 15:46

General Grievance

5,12039 gold badges40 silver badges60 bronze badges

answered Dec 13, 2016 at 19:38

Kostya Harutyunyan

2092 silver badges3 bronze badges

Comments

Praveen · Accepted Answer · 2018-09-23 06:53:25Z

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

joseph · Accepted Answer · 2020-06-05 09:59:35Z

1

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

answered Jun 5, 2020 at 9:59

joseph

1,00812 silver badges19 bronze badges

Comments

Stefan · Accepted Answer · 2021-04-12 10:42:55Z

1

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.

edited Apr 12, 2021 at 10:42

answered Apr 12, 2021 at 10:31

Stefan

12.8k10 gold badges81 silver badges147 bronze badges

Comments

Tuấn Dương · Accepted Answer · 2023-06-23 21:51:27Z

0

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

],

answered Jun 23, 2023 at 21:51

Tuấn Dương

112 bronze badges

Collectives™ on Stack Overflow

Source Maps not working with Webpack

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related