React Native 0.60.3 babel-plugin-transform-remove-console not working

Question

I am trying to remove console.log outputs from my react-native application's output, but when I run

ENVFILE=.env.production react-native run-android --variant=release

and

adb logcat

I still see my app's data being logged to the console.

I used the following documentation: https://facebook.github.io/react-native/docs/performance.html#using-consolelog-statements .

Here is my .babelrc file:

{
  "presets": ["react-native"],
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

What am I missing ? Im on react-native 0.60.3 and using "babel-plugin-transform-remove-console": "^6.9.4",

Answer 1

I have "@babel/core": "^7.5.5" and "react-native": "^0.60.5"
The approach descibed in React Native Documentation was not working for me.

After many try and error and exploring issues on GitHub I got it working :

In babel.config.js add this -

module.exports = api => {
  const babelEnv = api.env();
  const plugins = [];
  //change to 'production' to check if this is working in 'development' mode
  if (babelEnv !== 'development') {
    plugins.push(['transform-remove-console', {exclude: ['error', 'warn']}]);
  }
  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins,
  };
};

To see changes run using npm start -- --reset-cache

More Info at

• https://github.com/babel/minify/issues/934

• https://github.com/babel/minify/issues/950#issuecomment-539590159

Answer 2

Using babel.config.js instead of .babelrc , it seems that process.env.BABEL_ENV is used to determine whether to include configs listed under env.production . However, process.env.BABEL_ENV is set to undefined during build.

To get around this, I'm returning a different object depending on if process.env.BABEL_ENV OR process.env.NODE_ENV indicate production build.

YMMV.

module.exports = function(api) {
  api.cache(true); // necessary
  if (process.env.NODE_ENV === 'production' || process.env.BABEL_ENV === 'production') {
    return {
      "presets": ["module:metro-react-native-babel-preset"],
      "plugins": ["react-native-paper/babel", "transform-remove-console"]
    }
  } else {
    return {
      "presets": ["module:metro-react-native-babel-preset"],
    }
  }
}

Answer 3

install babel-plugin-transform-remove-console

yarn add babel-plugin-transform-remove-console -D

then add follow code in babel.config.js like this

module.exports = function (api) {
  const babelEnv = api.env();
  api.cache(true);
  const plugins = [
    [];
  if (babelEnv === 'production') {
    plugins.push(['transform-remove-console', {exclude: ['error', 'warn']}]);
  }
  return {
    presets: ['babel-preset-expo'],
    plugins,
  };
};

then run this command

yarn start --reset-cache 

NOTE:

this will remove console.log in the production build. if you wanna a test in development you can pass development instead of production