How can remove console.log in the production build of a React application created using create-react-app?

Question

How can remove console.log in the production build of a React application created using create-react-app CRA?

Answer 1

I am using this approach to avoid ejecting react-scripts

if (process.env.NODE_ENV === 'production') {
  console.log = () => {}
  console.error = () => {}
  console.debug = () => {}
}

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './styles/main.scss'

// replace console.* for disable log on production
if (process.env.NODE_ENV === 'production') {
  console.log = () => {}
  console.error = () => {}
  console.debug = () => {}
}

ReactDOM.render(<App />, document.getElementById('root'))

Answer 2

I created a helper folder with a file called ConsoleHelper.js

const ConsoleHelper = (data) => {
  if (process.env.NODE_ENV === 'production') return;
  console.log(data);
}

export default ConsoleHelper;

So, instead of console.log(data) do ConsoleHelper(data);

Answer 3

This is my solution using craco.

"@craco/craco": "^6.0.0",
"react-scripts": "4.0.1",

craco.config.js

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      if (process.env.NODE_ENV === 'production') {
        // remove console in production
        const TerserPlugin = webpackConfig.optimization.minimizer.find((i) => i.constructor.name === 'TerserPlugin');
        if (TerserPlugin) {
          TerserPlugin.options.terserOptions.compress['drop_console'] = true;
        }
      }

      return webpackConfig;
    },
  },
};

Answer 4

This is my solution using craco

install https://babeljs.io/docs/en/babel-plugin-transform-remove-console/

and update craco.config.js like

module.exports = {
  plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
  babel: {
    // ...
  plugins: process.env.NODE_ENV === "production" ? [["transform-remove-console", { "exclude": ["error"] }]] : []
  }
}

Answer 5

The simple way is to create a new file in root named logger.js

In logger.js

var logger = function logger(...messages){
    if(process.env.NODE_ENV === 'development'){
        console.log(messages);
    }
}
exports.logger = logger;

Now import this logger.js file to your components. For example my component file is demo.jsx

import React from 'react';
var logger = require('../logger.js').logger;

class Demo extends React.Component{
    constructor(props){
    }

    render(){
        return(
            <p>Hello i am demo component</p>
        );
    }

    componentDidMount(){
        logger('I am printing only in developmet')
    }
}
export default Demo;

Answer 6

For those not wanting to make changes to their webpack config, this expression does the job as well and without the need of importing a helper function:

process.env.NODE_ENV !== "production" && console.log(data);

For larger or more verbosely logging applications, changing the webpack config is a more elegant solution of course.

For VS Code users i want point out the possibility to set log points and omit the statement altogether if that serves your need.

Answer 7

The simple solution to the question is to help others who are facing the same issue.

Ref: https://stackoverflow.com/a/41041580/3574669

The suggestion in the reference, it needs to do a change in the file "webpack.config.js". The create-react-app uses the webpack and the config file internally but it is not possible to add webpack.config.js in my application root for applying the change. This would need to leave the create-react-app setup and build own setup for webpack and configuration. It does not find easy for me after exploring a lot and writing sample code.

Since I am very much satisfied with create-react-app so also don't want to keep aside its benefits.

Finally, I did a simple change in the node_modules/react-scripts/config/webpack.config.js by adding a line drop_console: true, as mentioned in the reference. The suggested code in the reference is as below,

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true, // << this needs only to remove console.log //
          },
        },
      }),
    ],
  },
};

This works fine to me and there is no console log in my production build application by the simple change.

I am using "react-scripts": "3.0.1",

Note: This new line will be cleaned whenever you reinstall "react-scripts" later. So it would need to again do the same change in such an event.

IMPORTANT: Don't use this approach if using CI/CD