Confusing error message when using misconfigured or nested .babelrc #7821

Open
namuol opened this Issue May 29, 2016 · 12 comments

Projects

None yet

7 participants

@namuol
namuol commented May 29, 2016 edited

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
Member

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
namuol commented May 29, 2016

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

:)

@janicduplessis
Member

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

@gutenye
gutenye commented May 29, 2016

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

@satya164
Contributor

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
namuol commented May 29, 2016

@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
Member

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
fab1an commented Jun 9, 2016

I opened a bug for this: #7850

@fab1an
fab1an commented Jun 11, 2016

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

@bestander
Contributor

@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
fab1an commented Jul 2, 2016

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

@tgoldenberg
Contributor

I just commented on @namuol's PR (link). Basically, I think the idea of a default .babelrc is a good one, and it can be done without a peer dependency if RN requires a minimum version of NPM (3+). Curious what everyone thinks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment