babel-plugin-transform-remove-console in dev mode?

Question

I needed to run babel-plugin-transform-remove-console for my dev build. What I did was:

npm i babel-plugin-transform-remove-console --save-dev

Then in .babelrc I changed it to this:

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

I also tried:

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

However console logging is still happening in my dev build. I am on Android.

Does anyone know how to get this to work in dev mode?

Answer 1

Maybe you are using new babel version 7, you need to change this file babel.config.js instead of .babelrc as the following:

module.exports = function override(api) {

  var env = api.cache(() => process.env.NODE_ENV);
  var isProd = api.cache(() => process.env.NODE_ENV === "production");

  if (!isProd) {
    config = {
      plugins: [
        ["transform-remove-console"]
      ],
      presets: ["@babel/preset-flow", "module:metro-react-native-babel-preset"]
    };
  }

  return config;
};

this should remove the console in the new babel versions

Answer 2

If you are using the version 0.62.x or newer, you can update your babel.config.js as follows:

module.exports = function(api) {
  if (api.env("production")) {
    return {
      "presets": ["module:metro-react-native-babel-preset"],
      "plugins": [
        "transform-flow-strip-types",
        "transform-remove-console"
      ]
    }
  }

  return {
    "presets": ["module:metro-react-native-babel-preset"],
    "plugins": [
      "transform-flow-strip-types",
    ]
  }
};

PS: make sure to restart bundler with cache reset like this npm start --reset-cache and note that this will not prevent logs from redux logger (tested that).