39

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!

Community
  • 1
  • 1
Jbarget
  • 549
  • 1
  • 4
  • 15

6 Answers6

31

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

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

enter image description here

Everettss
  • 15,475
  • 9
  • 72
  • 98
  • 5
    Right, but why does Chrome keep pestering you that a Source Map was detected, if it shows it already? – Dan Dascalescu Oct 19 '16 at 05:01
  • There are currently issues with Chrome, if this answer does not solve the issue, then take a look here: https://github.com/webpack/webpack/issues/3165 – lanoxx May 15 '17 at 18:26
  • 2
    @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 – Aswin K Mar 25 '19 at 17:38
15

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.

enter image description here

karel
  • 5,489
  • 46
  • 45
  • 50
Kostya Harutyunyan
  • 199
  • 1
  • 3
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
    }
}
Praveen
  • 1,791
  • 3
  • 20
  • 33
GEOFFREY DRYER
  • 39
  • 1
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";
}
joseph
  • 940
  • 10
  • 19
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&szlig;e 22, 76131 Karlsruhe" and the source map is working again.

Stefan
  • 10,010
  • 7
  • 61
  • 117
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].*')
})

],

Tuấn Dương
  • 1
  • 1