Babel error with custom .babelrc since 0.26

I integrate react-native in a existing application.
I created a subfolder js with the javascript and start it with this activity:

mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setBundleAssetName("index.android.bundle")
            .setJSMainModuleName("js/index.android")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();

In the js folder I have a .babelrc containing:

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

In my root folder (which also contains node_modules) I have another .babelrc which I need for other build-steps:

{
    "presets": ["es2015"]
}

Since 0.26 react-native complains when I have this file with "es2015" in it. When I delete it, it works:

> SyntaxError: <project>/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js: Unexpected token (56:13)
>   54 |    */
>   55 |   addListener(
> > 56 |     eventType: String, listener, context: ?Object): EmitterSubscription {
>      |              ^
>   57 |     return this._subscriber.addSubscription(
>   58 |       eventType,
>   59 |       new EmitterSubscription(this._subscriber, listener, context));

This is expected, since files under node_modules get transpiled with the config at the project root. I don't think this is a new behaviour with 0.26

It might have to do with babel, but I don't think so. I tried several older babel version before 6.9 and they didn't work either. It seems to me that the react-native-preset changed with 0.26?

@facebook-github-bot

It's been always like that with Babel. No idea how it ever worked for you. May be earlier it worked because of some caching issue.

@facebook-github-bot expected

Webpack starts looking for your babelrc from the point of entry. once it finds it will use that one so it never gets to your second one i dont think. You might consider multiple entry points. https://webpack.github.io/docs/configuration.html

I don't have a webpack config in this project.

A followup question: Why isn't react-native precompiled through babel?

@fab1an

@fab1an Mostly because no one has set it up yet. It'd be awesome if you could send a PR for it.

I can check it out, but I guess a simple babel src -d lib step won't do, at the size of this project. :D

The packager caches files that haven't been modified, so precompilation doesn't help that much and adds more complexity to source maps and the build. For RN I've found it's much better not to publish compiled files to npm -- the subset of JS defined by babel-preset-react-native is the language of RN, not ES5.

@ide

@ide I'd say that not pre-compiling has actually resulted in tons of issues with Babel config and such,

It's quite problematic to use with other code which is pre-compiled with Babel
Sourcemaps are screwed up when you've dependency that has a .babelrc with different config, sometimes it even breaks the code
It's kinda difficult to use different configs for the other code when the project has different types of code mixed, so you're pretty much locked to use RN's preset for everything
Since the packager transpiles node_modules, we've to be careful about which transforms we enable not to affect third party code, for example, enabling strict mode breaks many third party modules

Though it's not really RN not being pre-compiled, but packager transpiling code it's not supposed to, the simplest solution is to pre-compile RN code. I personally had lots of issues with it which wouldn't exist if RN was pre-compiled.

I think @cpojer also wanted to do this to improve Jest's performance. @davidaurelio also said that he wanted to do this.

Well, the same language (es2015 + jsx + some extensions) is used by quite a few other projects as well.

The problem with not pre-compiling is that it's really hard to write any code that depends on react-native.

I just published a styling module (https://github.com/fab1an/react-native-tachyons) and couldn't use react-native's StyleSheet because I would have to somehow transpile react-native's code in my plugin. I couldn't depend on react-native-extended-stylesheet either, which also doesn't transpile before publishing. This is a gigantic source for potential errors.

Common opinion seems to be that code in npm should be published as es5:
cloverfield-tools/universal-react-boilerplate#41
http://stackoverflow.com/questions/31822593/import-a-module-from-node-modules-with-babel-but-failed

Addendum: Issues like this might also go away with precompilation: #7679

I can try to help out here, but I need some support:

Everything seems to be imported from "react-native/Libaries/react-native". So possibilities:

a) Move all Javascript out from there into a separate src folder with the same structure and compile it into the place it was before or
b) Compile javascript into a different dist directory and change package.json to reference that.

I think a) would be easier.

Does some of the javascript code in Libraries/ rely on non-js files being in the same directory?

Ok, what I did so far:

copied the whole Libaries folder and cleaned out any non-js files:

cp -R Libraries/ src/
find src -type f -not -name "*js" -print0 | xargs -0 rm

created a .babelrc in src and installed the presets and plugins:

{
  "presets": ["es2015", "react"],
  "plugins": [
    "transform-object-rest-spread",
    "transform-class-properties",
    "syntax-trailing-function-commas",
    "babel-plugin-syntax-async-functions"
  ]
}

compiled everything from src back into Libraries

node_modules/.bin/babel src/ -d Libraries

replaced require('React') with require('react') to clear the warnings

One warning still appearing is:

You or one of the Babel plugins you are using are using Flow declarations as bindings.
Support for this will be removed in version 6.8. To find out the caller, grep for this
message and change it to a `console.trace()`.

linked this using npm link into an existing project and tried running the packager:
(./node_modules/react-native/packager/packager.sh start --reset-cache)

This gives me an error about files being duplicated:

[12:47:16 PM] <END>   Building (deprecated) Asset Map (68ms)
Failed to build DependencyGraph: @providesModule naming collision:
Duplicate module name: NavigationTreeNode
Paths: /Users/fabian/dev/forks/react-native/Libraries/CustomComponents/Navigator/Navigation/NavigationTreeNode.js 
collides with /Users/fabian/dev/forks/react-native/src/CustomComponents/Navigator/Navigation/NavigationTreeNode.js

For testing purposes I just moved the src folder (the original source) elsewhere and ran the packager again.

Now I don't get warnings by the packager but a 404 on the phone:

(my react-native entry is in js/index.android.js)

I don't know anything about haste or the packager, so any clues on how to proceed?

Ok, the next thing I will try is trying to serve everything from webpack directly and circumvent the packager.

What is the packager used for besides compiling from babel?

@fab1an

@fab1an module bundling, hot reload, serving and bundling assets etc.

Mhm, but all of that are things that webpack can do, can't it?

Anyway, I tried serving things from webpack-dev-server now, which needs https://github.com/yuanyan/haste-resolver-webpack-plugin to be able to resolve react-native's files.

I get a ton of errors, especially from files in Libraries/CustomComponents/NavigationExperimental/ which do require("react-native") themselves.

I think i'll stop my efforts now, because I just don't know enough about haste.

I hope we'll see precompiled react-native sometime anyway ;)

Is it __DEV__ or DEV? If it's DEV, it's certainly a typo, and you can try changing it to __DEV__.

__DEV__

@fab1an

@fab1an Looks like a typo somewhere. try changing it to __DEV__.

@satya164

@satya164 Look at the line 15 in the bug that is linked:

../node_modules/react-native/Libraries/react-native/react-native.js:15

it says __DEV__ there. It is not a typo, it's some weirdness by node-haste (I guess).

@fab1an

@fab1an Hmm... Got confused by Markdown changing the __.

It's weird. I've been using 0.26 and never had this issue. One quick workaround can be to set it global.__DEV__ = true until we figure out the issue.

Also, are you on master? Is this a clean install? If your example is reproducible, will be great if you can push it to GH and link to it in that issue.

I'm on a custom project using react-native master, like stated earlier in this thread. When I set __DEV__ like you said the next thing I get is

[node-haste] Encountered an error while persisting cache:
> Error: Cannot find module 'ReactNative'
>     at Function.Module._resolveFilename (module.js:440:15)
>     at Function.Module._load (module.js:388:25)
>     at Module.require (module.js:468:17)
>     at require (internal/module.js:20:19)
>     at Object.<anonymous> (/Users/fabian/dev/react-native/Libraries/react-native/react-native.js:177:27)
>     at Module._compile (module.js:541:32)
>     at Object.Module._extensions..js (module.js:550:10)
>     at Module.load (module.js:458:32)
>     at tryModuleLoad (module.js:417:12)

Unfortunately I don't have any more time to look into this, I already spent hours here.

I know how to work with "normal" es6, babel and node-requires, but since react-native seems to have it's own package manager and module resolving it's just a depressing hunt for invalid path for me, so good look to the next person :).

@fab1an

@fab1an It'll be great if you can push what you already have.

@satya164

@satya164 This is my branch. Contrary to what I said in this thread I know compiled from Libraries to dist and not the other way round now, to get a nicer diff.

https://github.com/fab1an/react-native/tree/precompile-babel

@fab1an

@fab1an Thanks. Will check it out when I've time.

Great, I'm sure it's worth it.

Building, transpiling and packaging is always a pain, so better stick with how everybody else is using babel, webpack etc… IMHO.

I opened a proper bug for that, closing this.

Navigation Menu

Repository navigation

Babel error with custom .babelrc since 0.26 #7666

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Babel error with custom .babelrc since 0.26 #7666

Description

Activity

satya164 commented on May 21, 2016

fab1an commented on May 21, 2016

satya164 commented on May 22, 2016

idkjs commented on May 22, 2016

fab1an commented on May 22, 2016

satya164 commented on May 23, 2016

fab1an commented on May 23, 2016

ide commented on May 23, 2016

satya164 commented on May 23, 2016

fab1an commented on May 23, 2016

fab1an commented on May 24, 2016

fab1an commented on May 25, 2016

fab1an commented on May 26, 2016

satya164 commented on May 28, 2016

fab1an commented on May 29, 2016

4 remaining items

satya164 commented on May 29, 2016

fab1an commented on May 29, 2016

satya164 commented on May 29, 2016

fab1an commented on May 29, 2016

satya164 commented on May 29, 2016

satya164 commented on May 29, 2016

fab1an commented on May 29, 2016

satya164 commented on May 29, 2016

fab1an commented on May 29, 2016

satya164 commented on May 29, 2016

fab1an commented on May 29, 2016

fab1an commented on May 31, 2016

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions