ESLint loader breaks devtool options in webpack

[marharyta]

After searching around a lot, I came to realization that eslint-loader in webpack breaks source map output.
If I use eslint in my webpack file as a loader for .js, this is the output that I get in chrome devtools when I make an error:

The error is shown in a bundles file.
My webpack config looks like this:
module: {

    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader' },
          {
            loader: 'eslint-loader',
            options: { formatter: require('eslint/lib/formatters/stylish') }
          }
        ]
      }
    ]
  },

If I delete eslint loader from the config, them my output in the console is correct and the error is shown in the right place:

My webpack config looks like:

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{ loader: 'babel-loader' }]
      }
    ]
  },

I believe it is a bug, so this might need further investigation.
I used:
"webpack": "^4.6.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.3"
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.9.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.7.0",

Chrome Version 66.0.3359.139 (Official Build) (64-bit)

You can find more explanation of this error in a StackOverflow question here: https://stackoverflow.com/questions/50105741/webpack-4-devtool-option-does-not-work-with-webpack-dev-server

and a description of my experience here:
https://medium.com/p/79fb676417f4/edit

[nothingismagick]

I can confirm a similar experience. Thanks for the detailed write-up! I have also noticed a very strange warning during a yarn install, not sure if it is related:

warning " > eslint-loader@2.0.0" has unmet peer dependency "webpack@>=2.0.0 <5.0.0".

[Mykybo]

I just run into this as well. This is pretty important, why are you ignoring this issue? :(