Deactivate Console.log and Logger or the Redux store in ReactJs production Mode

Question

I am in the process of deploying my first ReacctJs application and I will like to deactivate any data from my application that shows in the console of the browser. This includes the redux store Logger, console.logs code etc.

I have tried out several approaches as I can find on google.

My store code looks as follows

const loggerMiddleware = createLogger({
                        predicate: (getState, action) => process.env.NODE_ENV !== 'production'
            });

export const store = createStore(
    rootReducer,
    applyMiddleware(
        thunkMiddleware,
        loggerMiddleware
    )
);

I have installed the transform-remove-console package and created a .babelrc in my root folder with the following content

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

None of above codes removes things in the console. Please any ideas around this will be highly appreciated.

for console.logs, I'm terrible for removing them. If you're on mac or linux-based system, you could set up an alias like this `findlogs='grep resources/js/* -e '\''console\.log'\'' -rn'` - I always use Laravel/ReactJS hence the `resources/js/*` but you can change this to your path or just use `./*` to search in the current directory — Jamie - Fenrir Digital Ltd, May 14 '19 at 12:22
Jamie, What if am switching back to development ??. it wont be efficient. Besides its actually a big project and i am not the only programmer there t — Nges Brian, May 14 '19 at 12:27

score 0 · Answer 1 · answered May 17 '19 at 16:27

If you use terser-webpack-plugin or uglify-webpack-plugin you may use drop_console option https://github.com/mishoo/UglifyJS2#compress-options

Some code sample from webpack.config.js

module.exports = {
  // ... other options
  optimization: {
    minimize: !DEV,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          // ... other terser options
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },  
}

Some discussion here Can uglify-js remove the console.log statements?

Deactivate Console.log and Logger or the Redux store in ReactJs production Mode

1 Answers1