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

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).

Answer 3

You can try :
{
"presets": ["react-native"],
"plugins": ["dev-expression", "babel-plugin-dev-expression"]
}
Hope this help.

Answer 4

module.exports = {
presets: ["#vue/cli-plugin-babel/preset"],
env: {
development: {},
production: {
plugins: ["transform-remove-console"]
}
}
}