Confusing error message when using misconfigured or nested .babelrc

[namuol]

When nesting a new React Native project in a project with its own .babelrc file, the React Native build fails with this error message:

The problem unfortunately continues even when carefully following the suggestions in the error message.

Closer examination via adb logcat reveals that there is actually a connection being made to the development server, but there's an error running the app's JS bundle:

$ adb logcat

# Scroll up, find topmost error:

E ReactNativeJS: Error: undefined is not a function (evaluating 'babelHelpers.typeof(global)')

It turns out this was caused by a misconfigured .babelrc which looked like this:

{
  "presets": ["es2015", "stage-0"]
}

In my case the problematic .babelrc was in a parent directory, making this particularly difficult to track down. It actually took me a few days before I realized what was going on! 😞

Platform info

OS: Ubuntu 15.10
Node: v5.10.1
NPM: v3.8.3
Mobile Platform: Android (iOS untested but likely also affected)
React Native CLI version: 0.2.0
React Native version: ^0.27.0-rc2

Potentially related issues

#6542
#7336 (comment)
#7009 (comment)

/cc @Giszmo

Steps to reproduce

I created a repo to make reproduction easier.

Clone the example project repo and install NPM deps at the root and in the nested React Native project:

git clone git@github.com:namuol/react-native-nested-babelrc-issue.git
cd react-native-nested-babelrc-issue
npm install
cd NestedReactNativeProject
npm install

Start your android emulator.

Run the RN development server:

react-native start

Run the Android build:

react-native run-android

Observe the error in the emulator and the true error adb logcat:

adb logcat

# Scroll up to the topmost "ReactNativeJS" error

Workaround

Add the following .babelrc to the root directory of your React Native project:

{
  "presets": ["react-native"]
}

This should be included with the default React Native project to prevent this issue from cropping up, and if possible there should be a different error message displayed in the emulator, since there isn't really a connection issue with the development server.

[janicduplessis]

I think including the .babelrc file in the project template would solve this nicely. If someone wants to send a PR for that it would be great :)

[namuol]

@janicduplessis Working on that right now: namuol@59e8721

:)

[janicduplessis]

Thanks a lot! Let me know if you need help with anything

[gutenye]

@janicduplessis It's still a problem if require a third-party node module which contains .babelrc itself.

[satya164]

The real solution is to pre-compile RN and allowing whatever babel transforms people want to use. No matter what else we do, if a subdirectory has a .babelrc, babel will try to merge the configs and it'll screw things up.

[namuol]

@gutenye @satya164 - True, good point. I'm not familiar enough with the details of RN's implementation to know whether its feasible to distribute it pre-transpiled.

@janicduplessis What do you think?

[janicduplessis]

Yes the long term solution to babel issues is to precompile everything but I don't think we are quite there yet :). As for this specific issue I think including the .babelrc file by default should help prevent some of these cases.

[fab1an]

I opened a bug for this: #7850

[fab1an]

I would really like to help out precompiling, like mentioned here (#7666 (comment)), but especially haste is giving me headaches.

[bestander]

@fab1an that is great.
We are making a 6 months plan for React Native build infra tools and some coordination and help from the community could be very useful.
Still on board for this?
In short we thought of having an npm prepublish script that would precompile all code to ES5.

[fab1an]

@bestander I'm working on a react-native project for the next half year plus I'm maintaining my own little library (https://github.com/fab1an/react-native-tachyons).

So just tell me if you need something and i'll see if I can make time.