react-native throw Error when rxjs 5 is imported

[almeynman]

When I add this line of code: import { Observable } from 'rxjs' React Native throws:

Error while persisting cache: TransformError: /Users/almas/React/rnrx/node_modules/rxjs/util/SymbolShim.js: Property left of AssignmentExpression expected node to be a type ["LVal"] but instead got "ConditionalExpression"

Not sure whether the issue relates here or to rxjs 5, though. So the question is duplicated https://github.com/ReactiveX/RxJS/issues/1373

Thanks for help

[mkonicek]

Looks like rxjs uses some features unsupported by the RN transformer. Can you read the SymbolShim.js file and find out what these are?

[benlesh]

@mkonicek is there a list of what RN transformer does or doesn't support?

[mkonicek]

Good question! Right now I believe you have to look at https://github.com/facebook/react-native/tree/master/babel-preset

[almeynman]

@mkonicek I removed require('../transforms/transform-symbol-member'), line 39 from babel-preset-react-native and now everything is working. Not sure what can break because of it, though...

[mkonicek]

cc @skevy

[skevy]

Hmm, yah, this is happening because of the Symbol shim that we're using in RN, and it's conflicting with the RXJS Symbol shim that they include.

Would you do me afavor @almasakchabayev and replace the transform-symbol-member transform with this, and let me know if it works and doesn't error?

`````` javascript
/**

• Copyright 2004-present Facebook. All Rights Reserved.
  */

'use strict';

/eslint consistent-return: 0/

/**

• Transforms function properties of the Symbol into
• the presence check, and fallback string "@@".
  *
• Example:
  *
• Symbol.iterator;
  *
• Transformed to:
  *
• typeof Symbol.iterator === 'function' ? Symbol.iterator : '@@iterator';
  */
  module.exports = function symbolMember(babel) {
  const t = babel.types;

return {
visitor: {
MemberExpression(path) {
if (!isAppropriateMember(path)) {
return;
}

    let node = path.node;

    path.replaceWith(
      t.conditionalExpression(
        t.binaryExpression(
          '===',
          t.unaryExpression(
            'typeof',
            t.identifier('Symbol'),
            true
          ),
          t.stringLiteral('function')
        ),
        node,
        t.stringLiteral(`@@${node.property.name}`)
      )
    );

    // We should stop to avoid infinite recursion, since Babel
    // traverses replaced path, and again would hit our transform.
    path.stop();
  },
},

};
};

function isAppropriateMember(path) {
let node = path.node;

return path.parentPath.type !== 'AssignmentExpression' &&
node.object.type === 'Identifier' &&
node.object.name === 'Symbol' &&
node.property.type === 'Identifier';
}```
``````

[almeynman]

@skevy It does work without errors!

[PeterKow]

Works, the trick is that there are two files for for transform-symbol-member. So you need to update uder your root node_modules/babel-preset-react-native/

First one:

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/react-native-throw-error-when-rxjs-5-is-imported

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[benlesh]

@almasakchabayev this should be fixed in more recent versions of RxJS 5 anyhow. We stopped using the symbol shim and are now using a simpler ponyfill. Can you confirm?

[secretfader]

I just whipped up a demo, and this is still an issue as of rxjs-5.0.0.rc.2and 0.37.0-rc.4. cc @blesh

[secretfader]

Confirmed. @skevy's solution works, but we need a permanent fix. Rooting around in node_modules/ is a messy and error prone technique.

Can this be reopened?

[guilhermedecampo]

Any fix for that?

[cem2ran]

For anyone seeking an easier temporary fix, 5.0.0-rc.1 seems to work.

[guilhermedecampo]

awesome @cem2ran

[ainesophaur]

I'm still encountering this issue using react-native 0.38.0 and rxjs 5.0.0-rc.1 - 5.0.0-rc.4.

I encountered the issue when I moved a project from my mac to my ubuntu desktop. Removed node_modules and did a fresh install with the previous requirements of react-native 0.33.0 and rxjs 5.0.0-rc.1. I upgraded RN and rxjs after coming here but couldn't get past

node_modules/rxjs/symbol/iterator.js: Property left of AssignmentExpression expected node to be of a type [\"LVal\"] but instead got \"ConditionalExpression\"","type":"TransformError"

[secretfader]

@ainesophaur Upgrade to react-native 0.40.0-rc.0, which was released today, and try again? That release has the fix, I believe.

[benlesh]

FWIW: This is the complete contents of the file it's trying to process (I'm unfamiliar with the workings of your library or what's going on, but it appears it's trying to parse the JavaScript into an expression tree?)

from https://unpkg.com/[email protected]/symbol/iterator.js

"use strict";
var root_1 = require('../util/root');
function symbolIteratorPonyfill(root) {
    var Symbol = root.Symbol;
    if (typeof Symbol === 'function') {
        if (!Symbol.iterator) {
            Symbol.iterator = Symbol('iterator polyfill');
        }
        return Symbol.iterator;
    }
    else {
        // [for Mozilla Gecko 27-35:](https://mzl.la/2ewE1zC)
        var Set_1 = root.Set;
        if (Set_1 && typeof new Set_1()['@@iterator'] === 'function') {
            return '@@iterator';
        }
        var Map_1 = root.Map;
        // required for compatability with es6-shim
        if (Map_1) {
            var keys = Object.getOwnPropertyNames(Map_1.prototype);
            for (var i = 0; i < keys.length; ++i) {
                var key = keys[i];
                // according to spec, Map.prototype[@@iterator] and Map.orototype.entries must be equal.
                if (key !== 'entries' && key !== 'size' && Map_1.prototype[key] === Map_1.prototype['entries']) {
                    return key;
                }
            }
        }
        return '@@iterator';
    }
}
exports.symbolIteratorPonyfill = symbolIteratorPonyfill;
exports.$$iterator = symbolIteratorPonyfill(root_1.root);
//# sourceMappingURL=iterator.js.map

Looking at that, I don't see anywhere an assignment expression could have a left-hand that was a conditional expression. Perhaps the transform is confused about a particular token?

Specifically, here are all of the assignment expressions I can see:

var root_1 = require('../util/root');
var Symbol = root.Symbol;
Symbol.iterator = Symbol('iterator polyfill');
var Set_1 = root.Set;
var Map_1 = root.Map;
var keys = Object.getOwnPropertyNames(Map_1.prototype);
var i = 0;
var key = keys[i];
exports.symbolIteratorPonyfill = symbolIteratorPonyfill;
exports.$$iterator = symbolIteratorPonyfill(root_1.root);

The only other thing I could think of is that the parser is getting confused and tokenizing the sourceMapping at the bottom incorrectly. (//# sourceMappingURL=iterator.js.map)

(again, I know NOTHING about what this library is doing, I'm just assuming it's some sort of compiler based on the output I see in comments above).

Hopefully that helps someone.

[ainesophaur]

@nicholaswyoung You are absolutely correct -- [email protected] does resolve the packager TransformError -- thanks!

[grahamp]

Same issue I believe using react native, upgrading to "react-native": "0.40.0-rc.1",
didn't help, and removed all modules and did npm install. Trying to use redux-observable.

**

app/node_modules/rxjs/symbol/iterator.js: Property left of AssignmentExpression expected node to be of a type [\"LVal\"] but instead got \"ConditionalExpression\"","type":"TransformError","errors":[{}]}

**
Other dependencies : "react": "15.4.1", "react-native": "0.40.0-rc.1", "react-redux": "^4.4.6", "redux": "^3.6.0", "redux-logger": "^2.7.4", "redux-observable": "^0.12.2", "redux-promise": "^0.5.3", "redux-promise-middleware": "^4.2.0", "redux-storage": "^4.1.1", "redux-thunk": "^2.1.0",
"rxjs": "^5.0.0-rc.5", "tcomb-form-native": "^0.6.1", "typescript": "^2.0.10", "typings": "^2.0.0"

[ainesophaur]

@grahamp I'm currently using the trio of react-native, redux-observable and rxjs5

{
"react": "^15.4.1",
"react-native": "^0.40.0-rc.0",
"redux-observable": "^0.12.1",
"rxjs": "^5.0.0-rc.1"
}

When inspecting the package.json for each, the following ids were resolved

{
"react": "[email protected]",
"react-native": "[email protected]",
"redux-observable": "[email protected]",
"rxjs": "[email protected]"
}

[YannDeck]

I have updated rxjs to the newly shipped version today (5.0.1) and the issue is still there. No luck updating react-native (like @grahamp).

[benlesh]

Does anyone from the React Native team want me to pair with them on this? I'm happy to help fix this on which ever end needs fixing.

[tadeuzagallo]

The line that triggers the error is

Symbol.iterator = Symbol('iterator polyfill');

If you inline root.Symbol (i.e. delete var Symbol = root.Symbol and replace all the occurrences of Symbol with root.Symbol) it works. I know it's not ideal, but it could be a workaround if you guys need a quick solution. Otherwise, updating the transform with the code that @skevy linked should work as well.

[tadeuzagallo]

Oh, wait, it's been fixed on #10815, but hasn't been updated on npm. @skevy can we update the npm package?

[skevy]

@tadeuzagallo published @ 1.9.1

[secretfader]

Sorry all, I mistakenly thought the tag on that commit meant it went out with 0.40.0-rc.0. Thanks, @skevy for getting that patch out! Hopefully this saga is all done now. :)

[benlesh]

@skevy am I to understand this is completely fixed now in react-native, and I can unsubscribe from this thread? Just want to be sure I'm not needed before signing out.

[Vivihung]

Here is my config, and it resolves the issue:
"react": "15.4.1",
"react-native": "^0.40.0",
"rxjs": "^5.0.0-rc.5",
"babel-preset-react-native": "^1.9.1",

[nim23]

Is there way to fix this in react-native version below 0.40 without modifying react-native?

[craigcosmo]

I can confirm that install the latest of everything will fix this issue

"react": "15.4.1",
"react-native": "^0.40.0",
"redux-observable": "^0.13.0",
"rxjs": "^5.1.1"
"babel-preset-react-native": "1.9.1",

[hanipcode]

i'm coming to old project with react native version 37,
for me upgrading the react native is not enough, i have to shutdown watchman and run react-native start with --reset-cache
watchman watch-del-all
watchman shutdown-server
react-native start --reset-cache

and it worked.

[asdacap]

I was running react-native 0.42.0 and RxJS 5.2, but babel-preset-react-native was on version 1.9.0, the problem persist.

I can confirm that after upgrading babel-preset-react-native to 1.9.1, it works. So I guess that is what really fix it.

[smkhalsa]

Also be sure to restart the RN packager