CODEWITHSUNDEEP
javascriptreactjswebpackeslintnext.js
Jeremy Bernier
Jeremy Bernier

Reputation: 2212

Next.js - Eslint is not linting any pages in dev mode (aside from pages/_app.js)

I'm having problems setting up eslint with Next.js. It actually properly lints all my files when I run next build, but when I run the application in dev mode (next), eslint only actually lints pages/_app.js, and totally ignores all my other files (eg. pages/index.js).

My next.config.js looks like this:

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (dev) {
      config.module.rules.push({
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      })
    }
    return config
  },
}

and .eslintrc.js looks like this:

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/prop-types": 0,
        "react/react-in-jsx-scope": 0
    }
};

Is there a sample project somewhere that demonstrates setting up eslint with Next.js? Eslint is pretty much the standard for any modern JS web application, so I'm surprised to find no mention of eslint in the docs or any of the demo projects.

Upvotes: 5

Views: 8521

Answers (2)

soykje
soykje

Reputation: 199

I was actually able to achieve the lint on dev mode using the npm concurrenly package with eslint-watch.

Doing this, my commands looks like (in package.json) :

"scripts": {
    "dev": "concurrently \"npm run lint-js:watch\" \"npm run lint-md:watch\" \"next dev\"",
    "build": "next build",
    "start": "next start",
    "lint-md": "remark .",
    "lint-md:watch": "remark --watch .",
    "lint-js": "eslint -c ./.eslintrc --ignore-path ./.eslintignore ./src",
    "lint-js:watch": "esw -w -c ./.eslintrc --ignore-path ./.eslintignore"
  }

Hope that will help!

Upvotes: 5

Jeremy Bernier
Jeremy Bernier

Reputation: 2212

Ok I figured out the problem, next.js in dev mode doesn't actually lint any pages until you try to load them in your browser. So if you have linting errors on pages/index.js, you won't actually see them until you load your homepage in the browser. https://github.com/zeit/next.js/issues/9904

Upvotes: 4

Related Questions