Moves babel config out of package.json.

[skellock]

Heyo! Captain corner-case reporting in.

On React Native 0.40 for the Android platform, the environment doesn't uhh... do well with having node_modules with babel inside their package.json.

By moving to an external .babelrc file (and also .npmignore'ing that), all is well and just in the world.

Thanks for your consideration! Thanks for mitt!

[developit]

Hmm, that's super odd. Is there somewhere I can get details on why that's the case? Seems like a bug in RN.

I'm not dead against moving it into a .babelrc, but it's a shame to add a dotfile that is only used for testing. Another way to work around that might be to bundle the Babel config into the test runner, or switch it to Bublé. Currently Bublé is used to actually build the lib, Babel just as a test hook.

[skellock]

I feel the same way. Almost didn't do this PR. It's not your bug, but React Native's.

It exists on other repos as well (e.g acdlite/change-emitter#2 <-- a dep of recompose).

It's not just Android (like I originally said, it's iOS as well).

What I See

When we run our mobile apps, here's the error that spits out.

{"message":"TransformError: /Users/steve/src/ir/reactotron/packages/demo-react-native/node_modules/mitt/dist/mitt.js: Couldn't find preset \"es2015\" relative to directory \"/Users/steve/src/ir/reactotron/packages/demo-react-native/node_modules/mitt\"","type":"TransformError","errors":[{}]}

Why? No clue.

And it's true that we don't have that babel-preset-es2015 installed with React Native. React Native comes with babel-preset-es2015-node.

So the error itself makes sense, I just question why the presence of babel somehow activates the react-native-packager into reading it. I've looked but can't seem to make sense of what's going on. Perhaps I need to look into how babel reads it's configuration.

Work Arounds

An alternate ending is to ensure the babel-preset-es2015 exists in the host project, but I don't wanna do that. Kinda on principal (which is a terrible reason).

You can also simply open up node_modules/mitt/package.json, remove the babel key & value, and reset a bunch of RN caches:

watchman watch-del-all
./node_modules/react-native/packager/packager.sh start --reset-cache

But that's gloriously hacky to expect each developer to do that.

To Reproduce

npm i -g react-native-cli
react-native init DoomAndGloom
cd DoomAndGloom
npm i --save mitt

Then edit your index.ios.js or index.android.js to include import mitt from 'mitt'. Then launch the app (react-native run-android or react-native run-ios).

Thanks for listening.

[skellock]

Update:

React Native works like this by design. They're looking at changing it.

[developit]

Ah, that's an interesting problem & discussion. We actually transpile (certain) dependencies within node_modules where I work, but are looking to move away from it for similar reasons (it's slow, and the configuration is brittle when used across module boundaries). Let me see about getting rid of the babel config altogether - if that can't be done, then I'm fine splitting it into the babelrc until that issue is fixed.

[tunnckoCore]

@developit consider using Buble? No config and no fancy thing. Just not "es2050+one ton proposals". :) Such problems are the reason that we still not use Babel and too fancy things. Things in javascript moves too fast, so we should slow down a bit. I tried Rollup + Buble and it is pleasure - you should not think for such problems and in bonus you get awesome and correct tree shaking (even if you not do frontend). And I'm integrating it in my workflow.

[developit]

It's already using Bublé :)
Babel was just for the require hook for mocha tests.

[tunnckoCore]

Oh omg.. yea. Hahhaha.

[developit]

Let's merge this for the time being to fix RN. I'm going to nix the .npmignore since "files" in the package.json should already ignore babelrc.

[skellock]

Thx! Super appreciate this.

[developit]

Released as 1.0.1!