React-native: babel-plugin-transform-remove-console doesn't work with RN

[stovmascript]

Issue Description

I tried using babel-plugin-transform-remove-console as specified in the performance docs in my RN project (v0.34.1) and also in a newly initialized AwesomeProject (v0.35.0), but it looks like the RN packager (or JavaScriptCore?) doesn't like the transformed code. Both throw the same error when running assembleRelease with gradle:

:app:bundleReleaseJsAndAssets
[2016-10-14 14:51:37] <START> Building Dependency Graph
[2016-10-14 14:51:37] <START> Crawling File System
[2016-10-14 14:51:37] <START> Finding dependencies
[2016-10-14 14:51:41] <END>   Crawling File System (3999ms)
[2016-10-14 14:51:41] <START> Building in-memory fs for JavaScript
[2016-10-14 14:51:41] <END>   Building in-memory fs for JavaScript (218ms)
[2016-10-14 14:51:41] <START> Building in-memory fs for Assets
[2016-10-14 14:51:41] <END>   Building in-memory fs for Assets (165ms)
[2016-10-14 14:51:41] <START> Building Haste Map
[2016-10-14 14:51:41] <START> Building (deprecated) Asset Map
[2016-10-14 14:51:41] <END>   Building (deprecated) Asset Map (59ms)
[2016-10-14 14:51:42] <END>   Building Haste Map (298ms)
[2016-10-14 14:51:42] <END>   Building Dependency Graph (4691ms)

TransformError: /Users/foo/AwesomeProject/node_modules/react-native/Libraries/JavaScriptAppEngine/Initialization/ExceptionsManager.js: /Users/foo/AwesomeProject/node_modules/react-native/Libraries/JavaScriptAppEngine/Initialization/ExceptionsManager.js: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null

:app:bundleReleaseJsAndAssets FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:bundleReleaseJsAndAssets'.
> Process 'command 'node'' finished with non-zero exit value 1

I also tested it on another project for the web, which is bundled with webpack and works as expected, so I didn't open an issue at the babel repo yet because it might be RN related.

Note: In #8337, there was effort to integrate this functionality directly into RN, but adding the transform plugin guide into the docs was chosen instead.

Steps to Reproduce / Code Snippets

1. Configure .babelrc according to the perf docs
2. Add a console.log('blah') somewhere into one of the root index files

Expected Results

Transformed code without console.* calls.

Additional Information

• React Native version: 0.35.0
• Platform(s) (iOS, Android, or both?): Android
  
  
  
  • haven't tested iOS, but suspect it's not a platform issue
  
  
• Operating System (macOS, Linux, or Windows?): macOS

[rpereira]

I do have the same problem when bundling an iOS app.

[xcarpentier]

I do have the same on RN ^0.31.0.

[lacker]

I bet this is related to https://github.com/facebook/react-native/commit/3137ba993dbc3645832283ab683d18950c4246ed (submitted by @javache , reviewed by @davidaurelio ) because that has some odd "declare var console: typeof console &" stuff going on in it. IMO if we're going to support this transform we need some sort of test that ensures it actually works - otherwise I don't see how to avoid breaking the functionality in the future. Actually since the code works this might be a bug with the babel transform itself. Could you try just running this babel transform on the ExceptionsManager file independently and see what's going wrong?

[note89]

Is there a alternative solution to removing console statements for now ?
can i add some other build step or something ?
Cheers!

[lacker]

@note89 As a workaround I would just write a log function that only writes to console.log when it's in development mode and use the custom log function.

[note89]

Tnx ! i did this.

if(!__DEV__) {
    console = {};
    console.log = () => {};
    console.error = () => {};
}

[xwartz]

I have the same problem, any progress on this at all？

[jsdario]

I'd like to note that it worked the expected way on both:

1. development mode (no ./gradlew assembleRelease) ✅
2. compiling without any babel configuration (no .babelrc) ✅

By the moment I am using @note89 solution, but I guess it is not the ideal.

Also to try with different .babelrc configurations I am running the packager with --reset-cache args. I was not perceiving any changes and I guess this tip can be useful to many arriving to this threat or related ones.

[Richard-Cao]

I have the same problem too.

[mp31415]

+1

[M1chaelTran]

It didn't throw any error for Android when i run react-native bundle, but the console.log* are still there.
Yes, same error here when bundle for iOS

[Ehesp]

For those using redux-logger, make sure you don't have it it your production build or you'll have a bad time.

Check your iOS/Android log for the tag ReactNativeJS to see what's being pumped out and slowing your app down.

[mp31415]

The original plugin code is probably too broad in detecting what nodes to remove.
If in addition to the object.name (which is 'console') we also check for the property.name (which may be 'log', 'error', warn', etc.) then the problem reported is resolved. Below is the code that removes all console.log statements (but not console.warn, console.error, etc), which was sufficient for my purposes. You can further modify the code if you need to remove all kind of console statements.

/*istanbul ignore next*/"use strict";

exports.__esModule = true;

exports.default = function () {
  return {
    visitor: { /*istanbul ignore next*/
      CallExpression: function CallExpression(path) {
        var c = path.get("callee");
        if (c.matchesPattern("console", true)) {
          var prop = c.node.property;
          if (prop && prop.name === 'log') {        
            path.remove();
          }
        }
      }
    }
  };
};

/*istanbul ignore next*/module.exports = exports["default"];

[M1chaelTran]

thank you for sharing that code @mp31415
if you don't mind, could you please share the raw code (before it being transformed)?
would like to put it in as part of production build task.

thank you in advance.

[mp31415]

I never developed any babel transform plugins, so I'm not sure what "raw code" is. I just modified index.js file in the already installed node module (hoping that at some point the issue will be fixed and my changes will be overwritten with the update). So the code above is all that I have. This code lets me to assemble JS code without any console.log statements (without breaking RN build).
I started with the workaround suggested by @note89, but was not happy that all console.log statements are still in the release build. So I tweaked the plugin a bit and shared the code hoping it will help others until a better fix is available.

[navdove]

+1

[dgruseck]

+1

[indivisable]

Does anyone know if this works with RN Version 0.38.0+?

[lacker]

OK so in conclusion this plugin either does not work on React Native or at least there is no real guarantee that this plugin will continue to work. I think the best thing to do here is to just remove the advice that people use this plugin - it's sort of out of scope for React Native itself. I have a PR up to fix the docs at https://github.com/facebook/react-native/pull/12315 so I am going to close this issue. Thanks everyone for pointing this problem out and offering workarounds!

[jhen0409]

Just let everyone know it has been fixed by https://github.com/babel/babili/pull/421, the main problem is ExceptionsManager.js#L103-L104, we can waiting for new release of transform-remove-console.

[indivisable]

@jhen0409 Thanks I hope this functionality gets brought into RN, they really should considering this as an optimization step for final binary generation.

[Ashoat]

@jhen0409 - are you sure it's been fixed? The latest version of babel-plugin-transform-remove-console (6.8.1 as of this date) was cut on March 3rd, and that commit was merged on February 20th, so ostensibly the fix should be in the latest package, but unfortunately it still doesn't seem to work.

[jhen0409]

@Ashoat I have used it in production, so I think it should works with JS source code of RN, I guess it might be your app code lead, catch it and file new issue to babili would be a good idea.

[Ashoat]

Before I do that, just to make sure I'm testing this correctly:

react-native bundle --entry-file app.react.js --platform ios --dev false --bundle-output dist/ios.prod.js

The resultant file at dist/ios.prod.js has console.log lines in its contents.

The relevant parts of my package.json:

{
  "dependencies": {
    ...
    "react-native": "^0.43.3",
    ...
  },
  "devDependencies": {
    ...
    "babel-plugin-transform-remove-console": "^6.8.1",
    "babel-preset-react-native": "1.9.1",
    ...
  },
}

Is anybody else experiencing this issue? Am I running react-native bundle correctly? Should I file an issue to babili?

[danez]

@Ashoat Did you also add the transform-remove-console-plugin in your babel config? Otherwise do you use console.log in an uncommon way?

[Ashoat]

@danez: Sorry for forgetting to include .babelrc.

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

I'm using console.log in the basic way (eg. console.log("hello"), console.log(var), etc.).

[oximer]

@Ashoat
you mention

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

but it seems to me that it will remove the log even on development mode. How to do it, only on release? Documentation suggest something like this, but it did work.

{
"env": {
"production": {
"plugins": ["transform-remove-console"]
}
}
}

I'm also running straight from the react-native packager.

react-native bundle --entry-file app.react.js --platform ios --dev false --bundle-output dist/ios.prod.js

[ricardosasilva]

@oximer

Do you got an "unexpected keyword import" error? Try this:

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

[raghuureddy]

@ricardosasilva after building the app for production with above settings, its crashing when there is a warning. [Like defined proptype is different than the actual etc.]

trace log:

com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError ExceptionsManagerModule.java - line 56 com.facebook.react.common.JavascriptException: TypeError: undefined is not an object (evaluating 'console.ignoredYellowBox.push') This error is located at: in t in RCTView in RCTView in Unknown in r in Connect(r) in r in RCTView in RCTScrollView in ScrollView in RCTView in t in Form(t) in Connect(Form(t)) in t in Connect(t) in t in RCTView in RCTView in RCTView in n in t in n in RCTView in RCTView in t in RCTView in e in r in Unknown in n in n in t in t in withCachedChildNavigation(t) in Unknown in n in RCTView in AndroidDrawerLayout in DrawerLayoutAndroid in t in Unknown in n in n in t in RCTView in n in t in n in RCTView in RCTView in t in RCTView in e in r in Unknown in n in n in t in Connect(t) in RCTView in n in Unknown in RCTView in RCTView in t com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError ExceptionsManagerModule.java:56 com.facebook.react.modules.core.ExceptionsManagerModule.reportFatalException ExceptionsManagerModule.java:40 java.lang.reflect.Method.invoke Method.java com.facebook.react.bridge.JavaMethodWrapper.invoke JavaMethodWrapper.java:374 com.facebook.react.bridge.JavaModuleWrapper.invoke JavaModuleWrapper.java:162 com.facebook.react.bridge.queue.NativeRunnable.run NativeRunnable.java android.os.Handler.handleCallback Handler.java:751