react-native: react-native throw Error when rxjs 5 is imported

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

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 34 (8 by maintainers)

Commits related to this issue

Most upvoted comments

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

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?

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.

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”

@tadeuzagallo published @ 1.9.1

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

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

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?

/**
 * 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 "@@<name>".
 *
 * 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';
}```

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”,

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”