loading...

How to disable in browser linter errors in an ejected create-react-app application

mcrowder65 profile image Matt Crowder ・1 min read

So, you've ejected your app that was created with create-react-app, and you're using your own linter, and now all of a sudden, when a linter error occurs, you get an error screen. This may be a good thing, but what if have no-console as error, and you want to log things while doing development, but not in production.

Open up config/webpack.config.js, and delete these lines 293-310:

// First, run the linter.
// It's important to do this before Babel processes the JS.
{
  test: /\.(js|mjs|jsx)$/,
  enforce: "pre",
  use: [
    {
      options: {
        formatter: require.resolve("react-dev-utils/eslintFormatter"),
        eslintPath: require.resolve("eslint"),
        failOnError: false,
        failOnWarning: false,
      },
      loader: require.resolve("eslint-loader")
    }
  ],
  include: paths.appSrc
},

We just removed the linter check that gets done when you run your application in development mode, and when your application gets built for production.
It doesn't make sense to run the linter for either of these scenarios.

It does, however, make sense to run the linter while running npm test or yarn test.

In package.json, change "test": "node scripts/test.js" to "test": "yarn linter && yarn jest".

And add the following scripts:

"linter": "eslint src --ext .js,.jsx",
"jest": "jest"

Now, when you run npm test or yarn test, it will run your linter and your jest unit tests!

Posted on by:

mcrowder65 profile

Matt Crowder

@mcrowder65

Software Engineer at Appian, previously at Walmart Labs. Co-organizer of novajavascript.com, public speaker, teacher, codementor.io/mcrowder65

Discussion

pic
Editor guide