9

I use lots of console.log() statements while developing Apps (and I mean LOTS). How exactly can I remove them without "ejecting" from a Create React App What I considered but not sure how exactly to implement:

In my package.json:

 "build": "react-scripts build && uglifyjs --compress drop_console build/static/js/main.xxxxx.js  -o build/static/js/main.xxxxx.js

However How exactly can I know the hash suffix on the main.js file so I can call this command and save the output js file with same filename

jasan
  • 11,475
  • 22
  • 57
  • 97

5 Answers5

13

Add this to index.js

if (process.env.NODE_ENV !== 'development') {
  console.log = () => {}
}

Note that this will only suppress the messages, it will not strip them from your deployed code.

Note Nov 2020

Don't do this for library modules, it will disable console.log for the parent project.

Update Sept 2020

There is some movement on this issue on the CRA repo... go give it support/thumbs up here https://github.com/facebook/create-react-app/pull/9222

References: How to quickly and conveniently disable all console.log statements in my code?

Simon Hutchison
  • 2,949
  • 1
  • 33
  • 32
  • As a beginner, I think this answer fits me better. :) – Asp Upload Aug 02 '19 at 01:25
  • 1
    I'd also override the other console methods like console.debug, console.warn, console.info depending on what your team uses. – widdy Dec 10 '19 at 14:39
  • couldn't a malicious user flip the runtime value of the variable and then see the logs? –  Mar 18 '20 at 21:36
  • 3
    If there are any security implications of leaving log messages for your web app then clearly you should strip logs in the build process. I personally use https://github.com/arackaf/customize-cra to do this with `addBabelPlugin('transform-remove-console')` in my config-overrides.js file. – Simon Hutchison Mar 18 '20 at 23:35
5

If you just want to suppress log output you could wrap console.log and use that instead

const log = (...msgs) => {
  if (process.env.NODE_ENV === 'development') console.log(...msgs)
}

You can import / export this, but that sounds like a pain. Seems like a good thing to add to global

global.log = log

global.log('will only log in dev')
azium
  • 20,056
  • 7
  • 57
  • 79
  • can you elaborate on using the global command to supress the console logs. – jasan Dec 27 '17 at 23:02
  • 1
    oh nothing special about `global` in this case.. could use `window` as well. I just mean you can write your own `log` function that only outputs in dev mode (which create-react-app uses when running `npm start`) and put that log function on something accessible without having to import it everywhere (like global / window) – azium Dec 28 '17 at 18:31
  • With this approach you'll have to make sure all devs on your team use this specific log function. And they won't because some of them will always forget to use it. – widdy Dec 10 '19 at 14:37
  • couldn't a malicious user flip the runtime value of the variable and then see the logs? –  Mar 18 '20 at 21:36
  • @AlexChannelmeter this is client side. a malicious user already has access to everything that's on the client – azium Mar 18 '20 at 21:43
  • @azium that is true, I agree –  Mar 18 '20 at 21:51
4

Do this in package.json scripts:

 "build": "./scripts/build.sh"

and then in your project:

scripts/build.sh looks like:

#!/usr/bin/env bash

set -e;
cd "$(dirname $(dirname "$BASH_SOURCE"))"  # cd to project root

react-scripts build 

for f in build/static/js/*.js; do

  uglifyjs --compress drop_console "$PWD/$f" -o "$PWD/$f"

done
0

You can try this combo of 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 under the root directory:

touch config-overrides.js

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

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

Finally, after running npm run build, all console.log gone.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Kaiwen Luo
  • 370
  • 4
  • 10
0

I use this setup. I still need console log while in dev.

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

module.exports = override(
  process.env.NODE_ENV !== 'development' && addBabelPlugins(
    "transform-remove-console"
  )
)
vinhhungle
  • 119
  • 1
  • 4