Confusing error message when using misconfigured or nested .babelrc

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

https://github.com/facebook/react-native/issues/6542 https://github.com/facebook/react-native/issues/7336#issuecomment-220440606 https://github.com/facebook/react-native/issues/7009#issuecomment-221131292

/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 [e-mail]: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.

[gutenye]

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

[fab1an]

I would really like to help out precompiling, like mentioned here (https://github.com/facebook/react-native/issues/7666#issuecomment-221539088), but especially haste is giving me headaches.