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

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

Answer 2

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 3

this is what i did. create 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;

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

hope this helps. i console log alot :)