webpack-contrib / eslint-loader Goto Github PK

I would like my webpack build to continue even though ESLint produces failing errors. This will allow me to quickly prototype code.

My webpack config is as follows:

eslint: {
    configFile: '.eslintrc',
    emitError: false,
}

    preLoaders: [{
            test: /\.(js|jsx)$/,
            loader: 'eslint-loader',
            exclude: /(node_modules|bower_components)/
        }]

/home/joe/www/frontend/app/modules/account/components/feeds/boxes/facebook-box/facebook-box.jsx
  18:63  error  Multiple spaces found before '}'  no-multi-spaces

✖ 1 problem (1 error, 0 warnings)

100% :

webpack remains on 100% but fails to 'emit'

I would prefer not to have to duplicate my ignore files inside the webpack module loader.

I tried the following to no avail.

  eslint: {
    configFile: '.eslintrc',
    ignoreFile: '.eslintignore',
  },
``

Is there any way to stop these errors being transmitted to the console?

I had this problem

Summarized:

Getting this:

WARNING in ./app/components/dev/custom.ignored.js

/Users/kentcdodds/Developer/alianza/atac5/app/components/dev/custom.ignored.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

✖ 1 problem (0 errors, 1 warning)

Any way I can silence that particular warning?
I'm explicitely ignoring that file, so I don't need/want a warning about it...
Just started getting this when I upgraded from 0.19.0 to the latest

Then later, someone mentioned the docs on the subject saying:

Documentation is stating that you shouldn't see this warning when you run eslint on a directory or multiple files, only when you run it on a single file that is being ignored
Is that not what you are seeing?

And, I explained that I'm using the eslint-loader, to which he responded:

All of the build systems usually do glob patterns first and then run eslint for each file separately
Grunt and Gulp do the same thing

Is there any way that we could get around this without having to quiet all of our warnings?

Hi.

When using eslint-loader either as preloader or as a loader, I am getting this error:
Module build failed: Maximum call stack size exceeded

I am sure it has to do with webpack's resolving stuff, but I have no idea how to resolve it.

If it's any help, this works fine on OSX, not on a Ubuntu system.

Thank you.

There's something going on with ESLint 2.10.1, eslint-loader, and babel-eslint combination. They had an issue in 2.10.0 that broken eslint-loader and babel-eslint. It was fixed in 2.10.1. It still fails with eslint-loader, though.

I set up an example illustrating this. If you execute npm run test:lint, the linting process completes successfully. If you run npm start, you'll start seeing errors like this:

ERROR in ./app/index.jsx

.../react-boilerplate/app/index.jsx
  1:1  error  Parsing error: The keyword 'import' is reserved

✖ 1 problem (1 error, 0 warnings)


ERROR in ./app/Notes.jsx

.../react-boilerplate/app/Notes.jsx
  1:1  error  Parsing error: The keyword 'import' is reserved

✖ 1 problem (1 error, 0 warnings)

It's not picking up the parser for some reason. I did try setting

  eslint: {
    configFile: path.join(__dirname, '.eslintrc')
  }

at my common configuration to make sure it really points to the configuration but this didn't have any effect.

It's possible this is ESLint core issue and that their fix missed some corner case breaking ESLint. I am opening the issue here to see if other users are seeing similar behavior with this particular combination.

I have a large app that will be transitioning to es6 over the next few months. Which means I need a different .eslintrc configuration for the new es6 javascript and the old es5 scripts. I also have a test directory which has a different configuration. Using eslint from the command line the proper configurations are derived according to the directory structure.

Here is a mockup directory structure:

|--- src
    |--- content
        |--- scripts
            |--- es6
                |--- .eslintrc
                |--- **/*.js               <-- (es6 javascript)
            |--- test
                |--- .eslintrc
                |--- **/*Spec.js       <-- (javascript unit tests)
            |--- **/*.js                   <-- (es5 javascript)
        |--- styles
            |--- **/*.less
    |--- *.cs (C# files)
|--- .eslintrc

What seems to be happening is that the .eslintrc file at the root of my repo is the only one getting picked up. Thoughts?

Package limits eslint version to 0.21.
Would be great to see that updated.

Thanks

I'm trying to use 2 loaders: babel and eslint
It's ok when i only use babel
Webpack.config.js

...
module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader?presets[]=react,presets[]=es2015"
      }
    ]
  },
...

But when i use 2 loaders

...
module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ["babel-loader?presets[]=react,presets[]=es2015", "eslint-loader"]
      }
    ]
  },
...

i got an error in index.js file
5:17 error Parsing error: Unexpected token <

index.js

var ReactDOM = require('react-dom')
var App = require('./App')

ReactDOM.render(<App />, document.getElementById('root'))

I have failOnError and failOnWarning set to false, but when the eslint loader detects errors/warnings, my bundle.js never gets created. My loaders look like this:

{ test: /.jsx$/, exclude: /node_modules|bower_components/, loaders: ["react-hot", "jsx-loader", "babel-loader", "eslint-loader"]}

Maybe this is not possible but at the moment whenever eslint throws a warning or error, webpack proceeds to output the whole file list and then shows the errors at the bottom.

Is there anyway to only see eslint's info without webpack's file list dump?

Thanks!

At the moment you cannot change eslint to for example babel-eslint.
I can make a pull-request to support it.

Attempting to run webpack-dev-server --inline results in:

ERROR in /usr/local/lib//webpack-dev-server/client?http://localhost:8080
Module not found: Error: Cannot resolve module 'eslint' in /usr/local/lib/node_modules/webpack-dev-server/client
@ /usr/local/lib//webpack-dev-server/client?http://localhost:8080 1:10-24

ERROR in /usr/local/lib//webpack-dev-server/client?http://localhost:8080
Module not found: Error: Cannot resolve module 'eslint' in /usr/local/lib/node_modules/webpack-dev-server/client
@ /usr/local/lib//webpack-dev-server/client?http://localhost:8080 3:16-37

ERROR in /usr/local/lib//webpack-dev-server/client?http://localhost:8080
Module not found: Error: Cannot resolve module 'eslint' in /usr/local/lib/node_modules/webpack-dev-server/client
@ /usr/local/lib//webpack-dev-server/client?http://localhost:8080 2:9-36

Works without --inline or without the eslint preloader

It would be great to support auto fix :)

http://eslint.org/blog/2015/09/eslint-v1.4.0-released/

At the moment eslint v1.x is imminent: https://github.com/eslint/eslint/releases which contain various fixes I'm interested in.

At the moment eslint v0.24 is supported: https://github.com/MoOx/eslint-loader/blob/7a73a4c377cc874245da457e389356b058abcd67/package.json#L28

I'm hoping this loader will work with eslint v1.x without any drastic changes.

/home/sergey/Documents/work/dashboard/node_modules/webpack-core/lib/NormalModuleMixin.js:163
            if(isError) throw e;
                        ^

Error: callback(): The callback was already called.
    at context.callback (/home/sergey/Documents/work/dashboard/node_modules/webpack-core/lib/NormalModuleMixin.js:143:11)
    at Object.module.exports (/home/sergey/Documents/work/dashboard/node_modules/eslint-loader/index.js:130:7)
    at WEBPACK_CORE_LOADER_EXECUTION (/home/sergey/Documents/work/dashboard/node_modules/webpack-core/lib/NormalModuleMixin.js:155:71)
    at runSyncOrAsync (/home/sergey/Documents/work/dashboard/node_modules/webpack-core/lib/NormalModuleMixin.js:155:93)
    at nextLoader (/home/sergey/Documents/work/dashboard/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /home/sergey/Documents/work/dashboard/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/home/sergey/Documents/work/dashboard/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /home/sergey/Documents/work/dashboard/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:404:3)

Instead of showing js errors in the console, eslint just crashes. What other logs are needed to help resolve this issue?

Ref babel/babel-loader#46 (comment)

I stumbled upon #21 (and #40) while using an older version of eslint-loader (something circa v0.13 / 0.14, right when these features hit).

I've updated both eslint-loader and eslint to the latest releases, but it seems webpack is still spewing out warnings for files that eslint proper does not warn about (as it should not warn about, due to .eslintrc files in the directory tree).

Should this be working as I expect, or is there still some work to be done? The sentiment I got from #21 is that this should be working.

I didn't want to comment on the old issue as I'm not sure how that works out with closed issues.

npm ERR! peerinvalid The package eslint does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected] - 0.22

i'm not sure if this is an issue with the loader or my whole setup. when watching, if you do a code change that is only a style change, it does not recompile.

http://cl.ly/3K2j3C0j0D15

using [email protected]

loader setup is:

[
      // babel + jsx loader
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: [
          'babel'
        ]
      },
      // eslint loader - needs to be below babel
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      },
      // json loader
      {
        test: /\.json$/,
        loaders: [
          'json'
        ]
      },
      // sass loader
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
      },
      // css loader
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
      },
      // added specifically for svg images in css, this will inline them as base64 strings
      {
        test: /\.(svg)$/,
        loader: 'url-loader?limit=100000'
      }
    ],

has anyone else experienced this problem?

Because of how npm3 puts all modules at the root level unless there's a versioning conflict, peerDependencies can be moved in the dependencies section, so that they'll install if they're not already available, but skipped if already installed (matching what the original peer dependency in npm2 and below did)

Hi, is it possible to specify location of eslint configuration file from eslint options in webpack?

We have two different eslint configuration files. One is intended for production and final builds and the other one is for development purposes and thus less strict (allows console.log for example). The configFile option doesn't seem to work for me.

folder structure:

/
  .dev.eslintrc
  webpack.config.js

My webpack config

...
module: {
  preLoaders: [
    {test: /\.js$/, loader: 'eslint-loader', exclued: /node_modules/}
  ],
  loaders: [
    {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/}
  ],
  eslint: {
    configFile: path.join(__dirname, '.dev.eslintrc')
  }
}

Using eslint-loader with babel-loader and strict ES6 validation rules fails with lots of errors, since it tries to check code which is transpiled by babel.

To avoid any confusion in loaders ordering, suggest to use preLoaders section instead.

Looks like peer dependency is up to 0.23 and it's not compatible with recently released 0.24.

The one missing feature that makes this unusable for me is that it doesn't respect my project's .eslintignore file :(. Could we fix that? I may do it myself and send a PR if I have time in the next couple weeks :).

I'm using this with HMR right now and noticed a couple of things.

In my console, I see things like:

�[90m18:4�[39m  �[31merror�[39m  'x' is not defined  �[90mno-undef�[39m

In the root of my project some files keep getting made like \033[22m\033[39m.

I'm guessing these are the terminal colors being sent through and WDS is goofing up? I can try to look into it more later. This is great otherwise, thanks!

https://github.com/webpack/jshint-loader/blob/1d7c29f5d238e8318f178d57bd7b8b406e80cbc3/index.js#L131-L134

Hi,

I am using my loader like this:
loaders: ['babel', 'eslint-loader']

However when the lint has errors it stops babel from running, I'd like to prevent this during dev mode using hot reload and allow the errors though, the devs can use console.log etc during dev but in production I would want the build to actually fail.

Thanks

Using of "preLoaders+loaders" causes "Module parse failed":

module.exports = {
  module: {
    preLoaders: [
      {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
    ],
    loaders: [
      {test: /\.js$/, loader: "babel-loader", exclude: /node_modules/}
    ]
  }
}

ERROR in ./index.js
Module parse failed: ./node_modules/babel-loader/index.js!./node_modules/eslint-loader/index.js!./index.js Line 3: Unexpected token
You may need an appropriate loader to handle this file type.

Not sure if my config is wrong, but I cannot get eslint-loader to output any errors when running webpack-dev-server. I am able to confirm eslint is properly linting by running node_modules/.bin/eslint src/components/Footer/index.js for example, and I get back results as expected.

Do you see anything here that I'm misconfiguring?

webpack.config.js

  , module:
    { preloaders:
      [
        { test: /\.css$/
        , loader: 'stylelint'
        }
      ,
        { test: /\.jsx?$/
        , loader: 'eslint-loader'
        , exclude: /node_modules/
        }
      ]

.eslintrc

{
  "parserOptions": {
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true,
    "commonjs": true,
    "es6": true
  },
  "plugins": [ "react" ],
  "extends": [ "eslint:recommended", "plugin:react/recommended" ],
  "rules": { "no-console": 2 }
}

package.json

    "eslint": "^2.6.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-react": "^4.2.3",
    "webpack": "^2.1.0-beta.4",
    "webpack-dev-server": "^2.0.0-beta"
    "react": "^15.0.0-rc.2",

Hi id like to activate the ecma feature experimentalObjectRestSpread. It works with my ide atom, it works when i run eslint. Though it does not work with the webpack loader.

I want something like this to work:

let {first, ...rest} = props;

Sadly only the webpack eslint-loader does not like it..

The following command shows no errors

./node_modules/.bin/eslint --ext .jsx ./src

though my preloader does:

    module: {
        preLoaders: [
            {
                test: /\.jsx?$/,
                loaders: ['eslint-loader'],
                include: APP_DIR
            }
        ], ...

this is my .eslintrc config:

{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    },
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "no-console": 0,
    "new-cap": 0,
    "strict": 0,
    "no-underscore-dangle": 0,
    "no-use-before-define": 0,
    "eol-last": 0,
    "quotes": [2, "single"],
    "jsx-quotes": 1,
    "react/jsx-no-undef": 1,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/prefer-es6-class": 2,
    "react/no-deprecated": 1
  }
}

please help me out!

The current version of eslint is 0.15.0. eslint-loader can't use it because the peer dependency is set to: ^0.14.1.

eslint 0.15.0 release notes here: http://eslint.org/blog/2015/02/eslint-0.15.0-released/

2.0.0 was just released. Good time to bump. 👍

To be consistent with eslint.
Should be done before 1.0.

eslint-loader takes about 10s to run through 5k lines of js files. This appears to be a combination of:

• initializing eslint once per file
• using executeOnText instead of executeOnFile, which means users can't take advantage of the eslint cache feature.

Is there anything which can be done for these?

In my webpack.config.js:

  eslint: {
    configFile: '.eslintrc',
    emitError: true,
    emitWarning: true
  },

No output is rendered when i purposefully introduce an error.

However, I can see there are indeed errors to report by going against the README:

  eslint: {
    configFile: '.eslintrc',
    emitError: true,
    emitWarning: true,
    reporter: function(results) {
      console.log(stylish.call(this, results));
      return stylish.call(this, results);
    }
  },

webpack: bundle is now INVALID.

<text>
  14:0  error  'return' outside of function

✖ 1 problem (1 error, 0 warnings)

Peculiar, eh?

Is it possible to generate HTML output of the eslint errors and warnings ? Something similar to eslint-html-reporter which works well with the gulp.

Minor nitpick.

When using webpack with watch: true, and editing .eslintrc, I'd have to restart webpack for the new .eslintrc changes to take effect.

This is probably not the correct place to be placing this issue but I don't know where to start because there are so many tools involved. Upon updating to Eslint 2 and Webpack 2 I get an error in espree shown below. With Webpack 1 I don't get this error, and with Webpack 2.0.7.-beta and Eslint 1.x I don't get the error as well. If you have any ideas and cold point me in the right direction I'd appreciate it.

{
  "parser": "babel-eslint",
  "plugins": [
    "react"
  ],
  "env": {
    "browser": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "arrowFunctions": true,
      "blockBindings": true,
      "experimentalObjectRestSpread": true,
      "generators": true,
      "jsx": true,
      "module": true,
      "modules": true,
      "restParams": true,
      "spread": true,
      "jsx": true
    }
  }
}

ERROR in ./src/js/index.js
Module parse failed: /Users/davidfox-powell/dev/frontend-boilerplate/node_modules/babel-loader/index.js?{"presets":["react","es2015","stage-0"],"plugins":["transform-runtime","transform-decorators-legacy","typecheck",["react-transform",{"transforms":[{"transform":"react-transform-hmr","imports":["react"],"locals":["module"]},{"transform":"react-transform-catch-errors","imports":["react","redbox-react"]}]}]]}!/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/eslint-loader/index.js!/Users/davidfox-powell/dev/frontend-boilerplate/src/js/index.js 
Cannot read property 'ecmaFeatures' of undefined
You may need an appropriate loader to handle this file type.
TypeError: Cannot read property 'ecmaFeatures' of undefined
    at Parser.parseTopLevel (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/espree/espree.js:271:18)
    at Parser.parse (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/acorn/dist/acorn.js:1636:17)
    at Object.parse (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/acorn/dist/acorn.js:905:44)
    at Parser.parse (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/webpack/lib/Parser.js:960:18)
    at Module.<anonymous> (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/webpack/lib/NormalModule.js:192:16)
    at /Users/davidfox-powell/dev/frontend-boilerplate/node_modules/webpack/lib/NormalModule.js:160:10
    at /Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:334:3
    at iterateNormalLoaders (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:182:10)
    at iterateNormalLoaders (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:189:10)
    at /Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:204:3
    at Object.context.callback (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:87:13)
    at Object.module.exports (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/babel-loader/index.js:89:8)
    at LOADER_EXECUTION (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:95:14)
    at runSyncOrAsync (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:96:4)
    at iterateNormalLoaders (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:200:2)
    at iterateNormalLoaders (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:189:10)
    at /Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:204:3
    at Object.context.callback (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:87:13)
    at Object.module.exports (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/eslint-loader/index.js:113:8)
    at LOADER_EXECUTION (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:95:14)
    at runSyncOrAsync (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:96:4)
    at iterateNormalLoaders (/Users/davidfox-powell/dev/frontend-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:200:2)
 @ multi main

Possible to have custom reporter support like https://github.com/webpack/jshint-loader does?

Getting peerInvalid error while using eslint-loader v0.14.2 with eslint v 1.1.0

This doesn't seem to be working for me. I have a lot of shared code between client and server and various .eslintrc files throughout my project, but I need to disable no-console warnings in the server build only. Any idea how to do that?

The way eslint is handling reporter is pretty nice since reporters just use strings (and not directly console.log()).
I found a simple way to use stylish by default by removing the line where the filename is (since we use executeOnText() method, we always have <text>.

https://github.com/MoOx/eslint-loader/blob/0532fe3ac1af4554c20ef83fcce810048add3b7e/index.js#L34-L37

We can probably (by just using a few lines) add a reporter option that allow us to choose the reporter to make this loader works with all eslint reporters :)

Hi, first of all, thanks for the great work you did on this useful loader!

I have a project that depends on eslint 0.20.0 and eslint-loader 0.11.0 (see my package.json).

When I do npm install, I get this error:

npm ERR! peerinvalid The package eslint does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants eslint@>= 0.17 <=0.20

Is it a bug, or am I doing it wrong?

Cheers,
Patrick

I'm a newbie to webpack and loaders, so forgive me if my terminology is off or this is a question that has already been answered somewhere else.

I would like to use this loader in conjunction with Travis CI to produce passing/failing builds. So, if there are no lint errors, the build passes. Otherwise it should fail. I can get it to fail by adding the following plugin to my webpack config:

plugins: [
    function () {
      this.plugin('done', function (stats) {
        if (stats.compilation.errors && stats.compilation.errors.length) {
          console.log(stats.compilation.errors[0].error);
          process.exit(1);
        }
      });
    }
  ]

This works great, and the Travis build fails. The problem is that it fails after the first file it finds lint errors in. I'd like it to fail after it lints ALL of the files. So that leads me to 2 questions:

1. Is there a way to have this loader exit with a code of 1 after it lints all the files and displays the error messages?
2. Is there a way within a webpack plugin to capture all the errors from the linter, print them to the terminal, then exit with a code of 1?

Could we add a configuration option to only output eslint errors so that the output is essentially the same as calling eslint --quiet?