Next.js: Eslint in dev mode

[jedlikowski]

Hi, I'm setting up my first project with next. Is there a way to add eslint to automatically lint files as I edit them?

[HaNdTriX]

Did you check out eslint-loader?

⚠️ This is how it should work (Untested) .

1. Install eslint-loader

$ npm install eslint-loader --save-dev

1. Create a next.config.js file in the root of your project.
2. Insert:

module.exports = {
  webpack: (config, { dev }) => {
    if (dev) {
      config.module.rules.push({
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // eslint options (if necessary)
        }
      })
    }
    return config
  }
}

Please close this issue if the tutorial above works for you.

[arunoda]

Thanks @HaNdTriX
Yeah! Something like this would work.

[steida]

module.exports = {
  webpack: (config, { dev }) => {
    const eslintRule = {
      test: /\.js$/,
      enforce: 'pre',
      exclude: /node_modules/,
      loader: 'eslint-loader',
      options: {
        // Emit errors as warnings for dev to not break webpack build.
        // Eslint errors are shown in console for dev, yay :-)
        emitWarning: dev,
      },
    };

    const rules = [].concat(eslintRule, config.module.rules);
    return assocPath(['module', 'rules'], rules, config);
  },
};

[vinodronold]

@steida .. this might be a dumb question.. where is "assocPath" imported from.. I am getting following error..

yarn run dev
yarn run v0.27.5
$ node server.js
Using "webpack" config function defined in next.config.js.
(node:6156) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): ReferenceError: assocPath is not def
ined
(node:6156) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are
not handled will terminate the Node.js process with a non-zero exit code.

[steida]

@vinodronold https://github.com/este/este/blob/master/next.config.js