CODEWITHSUNDEEP
javascriptreactjsconsolebabeljsconsole.log
Vigneshwaran Markandan
Vigneshwaran Markandan

Reputation: 945

Remove console log statements in react production build?

I have a basic react app (created using create react app)
I have gone through a few links related such as babel plugin installation npm i babel-plugin-transform-remove-console --save Guide to remove console log using babel plugin

 {
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

I have included the above config to babel.rc file but still, it doesn't solve my problem. I am able to see the logs in the production build. Kindly let me know where I am going wrong.

Upvotes: 7

Views: 7939

Answers (4)

sangeetha kannan
sangeetha kannan

Reputation: 11

you can add the this Below lines in App.js

console.log = () => { }; console.debug = () => { }; console.info = () => { }; console.warn = () => { };

Upvotes: 1

pmiranda
pmiranda

Reputation: 8420

You could try this, in src/App.js, the root component of your app:

if (process.env.NODE_ENV === "production")
  console.log = function no_console() {};

Just before the return.

edit: thanks to @Youngmu Yang for the correction. It's weird but in my case was the .env that I put before, the complete answer should be:

if (process.env['The_env_of_your_project_that_defines_environment'] === "production")
  console.log = function no_console() {};

Upvotes: 4

Youngmu Yang
Youngmu Yang

Reputation: 74

@pmiranda 's solution should be changed to:

if (process.env.NODE_ENV === "production")
    console.log = function no_console() {};

Upvotes: 1

Kaiwen Luo
Kaiwen Luo

Reputation: 513

You can try those packages to override the config:

Note: from the document of react-app-rewired, this would break the the "guarantees" that CRA provides. So you should be careful before using it.

npm i -D customize-cra react-app-rewired babel-plugin-transform-remove-console

Modify your package.json, replace react-scripts to react-app-rewired except the reject. Once complete, your scripts should look like this:

"scripts": {
 "start": "react-app-rewired start",
 "build": "react-app-rewired build",
 "test": "react-app-rewired test",
 "eject": "react-scripts eject"
}

Then create a file:

touch config-overrides.js

// config-overrides.js
const { override, addBabelPlugins } = require('customize-cra')

module.exports = override(
  addBabelPlugins(
    "transform-remove-console"
  )
)

Finally, after run npm run build, all console.log will be removed.

Also, I have another answer regarding this similar question, you can check out other answers as well.

Upvotes: 1

Related Questions