webpack3 jshint-loader does not work

Question

I'm trying to follow this instruction https://webpack.js.org/loaders/jshint-loader/ and get an error:

My config file:

const path = require('path');

    module.exports = {
      entry: {
        app: './index.js'
      },
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      },

      module: {
        rules: [
          {
            test: /\.js$/, // include .js files
            enforce: "pre", // preload the jshint loader
            exclude: /node_modules/, // exclude any and all files in the node_modules folder
            use: [
              {
                loader: "jshint-loader"
              }
            ]
          }
        ]
      },

      // more options in the optional jshint object
      jshint: {
        // any jshint option http://www.jshint.com/docs/options/
        // i. e.
        camelcase: true,

        // jshint errors are displayed by default as warnings
        // set emitErrors to true to display them as errors
        emitErrors: false,

         // jshint to not interrupt the compilation
         // if you want any file with jshint errors to fail
         // set failOnHint to true
         failOnHint: false,

         // custom reporter function
         reporter: function(errors) { }
       }
    };

error text:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'jshint'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, prof ile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } For typos: please correct them. For loader options: webpack 2 no longer allows custom properties in configuration.

score 59 · Accepted Answer · edited Nov 02 '18 at 12:24

59

The instructions on their website seem to be outdated as this isn't working indeed. There's an open issue about this on Github.

This configuration should work:

const path = require('path');

module.exports = {
  entry: {
    app: './index.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  module: {
    rules: [{
      test: /\.js$/, // include .js files
      enforce: "pre", // preload the jshint loader
      exclude: /node_modules/, // exclude any and all files in the node_modules folder
      use: [{
        loader: "jshint-loader",
        // more options in the optional jshint object
        options: {  // ⬅ formally jshint property
          camelcase: true,
          emitErrors: false,
          failOnHint: false
        }
      }]
    }]
  },
};

edited Nov 02 '18 at 12:24

matharden

757
6
15

answered Jul 24 '17 at 07:32

Tom Van Rompaey

3,556
20
22

Yes this one is working. After searching some error syntax reference out there – Faris Rayhan Jun 28 '18 at 08:22
7

can anyone explain what has been fixed in the answer so its get working? – Dipesh Raichana Sep 29 '18 at 06:55
2

The `jshint` property is now a sub property of `use` as `options` under `jshint-loader`. – matharden Nov 02 '18 at 11:09

score -1 · Answer 2 · answered Jan 21 '19 at 21:46

The only thing that worked for me was changing the jshint-loader's file manually.

Go to [your project path]/node_modules/jshint-loader/index.js.
Look for the function "jsHint" (line 61) and then go to line 63.
Change "if(this.options.jshint)" for "if(options.jshint)".

After the change, the function will be looking like this:


function jsHint(input, options) {
    // copy options to own object
    if(options.jshint) {
        for(var name in this.options.jshint) {
            options[name] = this.options.jshint[name];
        }
    }
    //function goes on...
}

webpack3 jshint-loader does not work

2 Answers2

Linked