DEV Community

Matt Crowder
Matt Crowder

Posted on

3 1

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

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!

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay