Create-react-app: Remove console.log calls from production build

[edevil]

Is there an option to remove all "console.log" calls when building the production artifact?

I know there are some webpack plugins that do this but I'm not sure I can use them without ejecting the project from this framework.

[gaearon]

No, it’s not supported. You’d need to eject to do this automatically.

[lany9527]

you can find answer in this page:
https://stackoverflow.com/questions/41040266/remove-console-logs-with-webpack-uglify

[glocore]

I know this is not what this issue is about, but if you're only looking for a way to prevent the console messages from showing up in the production build, but don't mind that the code staying as is (meaning it won't be stripped out of your production code), then you could just monkey-patch console.log() so that it only works in development.

Or a more elegant way of doing it would be using the debug module, which lets you display messages based on the name of the module calling it. This requires you to add a field to your localStorage as described here. You can simply not add this field for production and the debug messages won't show. I ended up creating a utility class to generate color-coded messages of different levels such as 'trace', 'info', 'warn', 'error', etc. The module name I passed was simply the name of my app, so I just needed to add this in my index.js:

if(env.process.NODE_ENV !== 'production') localStorage.set('debug', 'name_of_app:*')

[parkerdan]

I have disabled in prod by adding this at the root index.
Is this a bad approach??

function noop() {}

if (process.env.NODE_ENV !== 'development') {
  console.log = noop;
  console.warn = noop;
  console.error = noop;
}

[barbagallo]

@parkerdan that's not a bad solution tbh, but it also probably depends on what you're doing.

If someone wanted to be malicious and scan your code for key pieces of data that you use to debug with (i.e. user data, account data..), that'll still leak into the final output and may be found by searching for "console.".

You could probably obfuscate usage of console by renaming it, and the methods, and then hooking them up to noop functions. Again, it prob depends on what you're trying to protect / hide.

Or you could use something like this: https://www.npmjs.com/package/webpack-strip

[behnammodi]

@gaearon Do you plan to add this item?