Babel-loader: Sourcemaps not mapping correctly when using babel-loader

[joshuaprior]

I'm trying to set up my project to work with Webpack, Babel, and React. However the source maps are not mapping correctly. I reduced my code to a simple example that demonstrates the problems I'm seeing.

In my chrome dev tools I can set a break point on line 17 but not on line 3.

In firefox the browser just ignores all of the break points.

I'm using chrome Version 47.0.2526.111 (64-bit) and firefox 43.0.4.
Here's a repo with my demo: https://github.com/joshuaprior/webpack-demo

And here are the important files:
demo.js

debugger;

[1,2,3,4,5]
    .map(n => n * 100)
    .forEach(n => console.log(n));

var foo = {
    func: () => {}
};

var bar = foo.func({
    baz: () => {
        var qux = Math.round(0);
    }
});

[1,2,3,4,5]
    .map(n => n * 100)
    .forEach(n => console.log(n));

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {

  },
  "devDependencies": {
    "babel-core": "6.4.5",
    "babel-loader": "6.2.1",
    "babel-preset-es2015": "6.3.13",
    "babel-preset-react": "6.3.13",
    "grunt": "^0.4.5",
    "grunt-contrib-connect": "^0.11.2",
    "react": "0.14.7",
    "react-dom": "0.14.0",
    "webpack": "1.12.12"
  }
}

webpack.config.js

module.exports = {
    context: __dirname + "/src",
    entry: "./demo",

    output: {
        path: __dirname + "/public/dist",
        filename: "bundle.js"
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {
                    presets: ['es2015']
                }
            }
        ]
    },

    devtool: "source-map"
};

[joshuaprior]

Ugh... source map issues are so hard to pin down. I just reviewed my demo again and found that chrome has trouble with source maps even if es2015 is removed from the presets. I have to remove babel-loader to get valid source maps. I renamed the issue to reflect this.

As for firefox, it seems that it's not working either way, so maybe firefox just isn't able to set break points in source maps?

[donaldpipowitch]

I have problems with source maps, too.

Say I have the files foo.es6 and bar.es6 which are transpiled internally to foo.js and bar.js by babel-loader and then bundled to app.js. It seems that the source maps from app.js only point to foo.js and bar.js, but not its *.es6 versions. Any idea why?

EDIT: Sorry. Problem doesn't seem to be babel-loader, but how I use it with https://github.com/jamesandersen/string-replace-webpack-plugin. Instead of using two separate loaders configs I need to call babel-loader as nextLoaders inside StringReplacePlugin config.

[TimMensch]

@donaldpipowitch I found this bug because I also am getting files processed with babel-loader as the source map (files already converted to ES5). But I'm only using the one loader.

So for clarification, does it actually work for you when babel-loader is your only loader? Or only when you use the string-replace plugin and connect the Babel loader there?

[TimMensch]

Never mind. Found it: debug:true apparently screws up the source maps. Of course. :)

[joshuaprior]

After playing with my build some more I found that the source maps are wrong even if I just use babel-cli with out involving webpack. So I'm moving this to a question on the Babel community forums. https://discuss.babeljs.io/t/how-do-i-get-source-maps-to-work-with-babel/200

[zzuligy]

i also find the same problem

[prochafilho]

I also have encountered this problem

[nurogenic]

This page worked for me to get source maps running. https://github.com/thaiat/webpack-babel-sourcemap. Needed to add retainLines=true to the query.

   {
        test: /\.js?$/,
        loaders: [
          'babel-loader?presets=es2015&retainLines=true',
          'ng-annotate-loader',
        ]
      },

[samal-rasmussen]

@nurogenic the retainLines babel config setting is a workaround for exactly when you cannot get source maps to work:

Retain line numbers. This will lead to wacky code but is handy for scenarios where you can’t use source maps. (NOTE: This will not retain the columns)

https://babeljs.io/docs/usage/options/

[sjatkins]

When the toolchains are the most complicated part of a project then something is badly wrong. Just saying. I have been googling around for hours on this.

In this snippet of my webpack config it is not obvious to me how to do this. The problem is that query subobject seems unhappy if I put the ?retainLines on loader: 'babel'.
And with source maps clearly specified anyway isn't it broken that we need to do this to have source maps be, well, source maps?

module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
           presets:['es2015','react', "stage-0"],
          plugins: ["transform-react-display-name", "transform-decorators-legacy"]
        }
      }, {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
      }
    ]
  },

[tconroy]

I'm running into a similar issue... My sourcemaps are generating, however they only contain references to .css and .scss files ( none of my JS modules ). I Noticed if I comment out extract-text-plugin which I use for style splitting, I get JS sourcemaps, but not sure what the problem is ( posted a SO question here, hopefully someone has some insight between here and there. )

[xiachaoxulu]

why closed。is the problem also exist？ i get a similar issue

[loganfsmyth]

If you have a specific problem, please create an example repository that reproduces the issue. It's impossible to debug sourcemap issues without something to test.

[xiachaoxulu]

yes， you are right. i just write a demo
https://github.com/xiachaoxulu/sourceMapDemo

[xiachaoxulu]

@loganfsmyth please have a look

[dylan-chong]

Did anyone find a solution

[tconroy]

The issue lies with the sourceMapFileName property set in webpack output.

Mine was:

sourceMapFilename: '[name]-[chunkhash].js.map',

which, coincidentally, would match both the CSS from extractTextPlugin as well as the app bundle. So one was overwriting the other.

Changing that line to:

sourceMapFilename: '[file].map',

allows a unique CSS map and JS map to be generated. Hope this helps someone.

[millsp]

@xiachaoxulu Just use this https://github.com/evanw/node-source-map-support
I use to use to have babel-register instead to log the errors properly
But since the upgrade to @babel/register (babel 7) it is not able to import files that are below the entry point (like importing from another project with ../)

[bbourn]

@pirix-gh Got past that issue in NextJS with this in my next.config.js:
config.module.rules.push({
test: /.js$/,
include: [
path.resolve(__dirname, '../lib/'),
path.resolve(__dirname, '../routes/')
],
use: [
babelLoader
]
})

You might find a syntax that works for you.

[zhalice2011]

i upgrade source-map-support and use babel-plugin-source-map-support, it resolve my problem

https://www.npmjs.com/package/babel-plugin-source-map-support