Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null #8284

milixov · 2018-07-07T06:05:01Z

Bug Report

Current Behavior
React-Native App on Both iOS and Android got the Error:
bundling failed: TypeError: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null

Input Code

{
  "name": "customer",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "rnpm": {
    "assets": [
      "app/resources/style/font/vazir/latin/src",
      "app/resources/style/font/vazir/farsi/src",
      "app/resources/style/font/iransans/latin/src",
      "app/resources/style/font/iransans/farsi/src"
    ]
  },
  "dependencies": {
    "jsc-android": "^224109.0.0",
    "mobx": "^5.0.3",
    "mobx-react": "^5.2.3",
    "numeral": "^2.0.6",
    "react": "16.4.1",
    "react-native": "0.56.0",
    "react-native-collapsible": "^0.12.0",
    "react-native-swiper": "^1.5.13",
    "react-navigation": "^2.6.2"
  },
  "devDependencies": {
    "babel-jest": "^23.2.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-react-native": "^5.0.2",
    "jest": "23.3.0",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

error: bundling failed: TypeError: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null
    at Object.validate (/Users/milad/Documents/ide/react-native/beauty/customer/node_modules/@babel/types/lib/definitions/utils.js:130:13)
    at validate (/Users/milad/Documents/ide/react-native/beauty/customer/node_modules/@babel/types/lib/validators/validate.js:17:9)
    at builder (/Users/milad/Documents/ide/react-native/beauty/customer/node_modules/@babel/types/lib/builders/builder.js:46:27)
    at Object.AssignmentExpression (/Users/milad/Documents/ide/react-native/beauty/customer/node_modules/@babel/types/lib/builders/generated/index.js:229:31)
    at /Users/milad/Documents/ide/react-native/beauty/customer/node_modules/babel-plugin-transform-decorators-legacy/lib/index.js:75:22
    at Array.map (<anonymous>)
    at applyEnsureOrdering (/Users/milad/Documents/ide/react-native/beauty/customer/node_modules/babel-plugin-transform-decorators-legacy/lib/index.js:72:53)
    at PluginPass.ClassExpression (/Users/milad/Documents/ide/react-native/beauty/customer/node_modules/babel-plugin-transform-decorators-legacy/lib/index.js:210:38)
    at newFn (/Users/milad/Documents/ide/react-native/beauty/customer/node_modules/@babel/traverse/lib/visitors.js:237:21)

Expected behavior/code
Run App As Before

Babel Configuration (.babelrc, package.json, cli command)

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

Environment

Babel version(s): v7.0
Node/npm version: Node 10.1.0 / npm 6.1.0
OS: OSX 10.13.5
Monorepo yes
How you are using Babel: loader

Possible Solution
I don't have any suggestions

Additional context/Screenshots
No Screenshots

babel-bot · 2018-07-07T06:05:04Z

Hey @moafim! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

loganfsmyth · 2018-07-07T06:23:31Z

Would you be able to provide a sample file that reproduces the issue?

milixov · 2018-07-07T06:31:19Z

@loganfsmyth Unfortunately I can't

loganfsmyth · 2018-07-07T06:35:24Z

You don't necessarily need to provide your actual production code, but you could trim it down to figure out exactly what decorator is causing the issue, then you could make an example without your original code.

milixov · 2018-07-07T06:39:24Z

@loganfsmyth I think it's about "babel-plugin-transform-decorators-legacy": "^1.3.5"

@inject('stores')
@observer
class ServiceScreen extends Component {
  @observable gender = this.props.stores.gender;

  constructor(props) {
    super(props);
  }

loganfsmyth · 2018-07-07T06:39:39Z

Hmm actually, I didn't see that you'd edited the original issue to be specific to Babel 7.x. On Babel 7's beta, babel-plugin-transform-decorators-legacy is not the right thing to use, as noted here: https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy#babel--7x My guess would be that if you use the @babel plugin, it'll work.

milixov · 2018-07-07T06:48:59Z

@loganfsmyth I've install "@babel/plugin-proposal-decorators": "^7.0.0-beta.52" then change .babelrc's "plugin" attribute to "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]] but the Error stills yet.

thientnc-ibl · 2018-07-09T08:02:06Z

@moafim
you MUST use exactly version "@babel/plugin-proposal-decorators": "7.0.0-beta.47". The 7.0.0-beta.47 is same as the version of @babel/core that is used by react-native 0.56. Besides, you MUST install "babel-preset-react-native": "5.0.1" as react-native 0.56 upgrade instruction
See the below image.

jjd314 · 2018-07-18T10:57:43Z

@moafim I don't know if this will apply in your case, but I was getting the same error, with all the dependencies in my package.json at the latest versions (7.0.0-beta.54 for the babel stuff, 5.0.2 for babel-preset-react-native, etc.). When I ran babel --version, though, it said 7.0.0-beta.54 (@babel/core 7.0.0-beta.47). I added an explicit dependency on @babel/core, and things started working.

jjd314 · 2018-07-18T13:23:40Z

@moafim A little more information: I tried building a new app with react-native init, which ran fine, and then added a decorator to it. It got the same error, and this time adding the dependency on @babel/core did not fix it. However, I found that the metro bundler was explicitly dependent on beta.47, and by editing node_modules/metro/package.json to switch them all to beta.54 (except babylon, which apparently does not have a beta.54 yet), I was able to get past the AssignmentExpression error. I immediately ran into another error, though, this time a runtime error, which I'm trying to track down.

existentialism · 2018-07-18T14:08:43Z

@jjd314 re: babylon, it was renamed to @babel/parser in beta.48

swcisel · 2018-07-22T03:18:29Z

@jjd314 Thank you for helping me (finally) successfully update to 0.56! Between that and the @babel/parser fix that existentialism mentioned, I'm back on track.

milixov · 2018-07-28T15:00:15Z

@swcisel Would you be able to .babelrc and package.json files?

jjd314 · 2018-07-29T14:01:46Z

@moafim Here they are. I'm not sure what state they are in currently, because I tried some more stuff after my last post. I hope they help.

package.json

{
  "name": "BrokenBabel",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@babel/core": "^7.0.0-beta.54",
    "@babel/plugin-proposal-decorators": "^7.0.0-beta.54",
    "@babel/plugin-transform-classes": "^7.0.0-beta.54",
    "@babel/register": "^7.0.0-beta.54",
    "react": "16.4.1",
    "react-native": "0.56.0"
  },
  "devDependencies": {
    "babel-jest": "23.4.0",
    "babel-preset-react-native": "^5",
    "jest": "23.4.1",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

.babelrc

{
    "presets": ["react-native"],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ]
}

existentialism · 2018-07-30T03:30:25Z

@jjd314 as @thientnc-ibl mentioned, you must make sure your @babel/* deps match the versions being used by the react-native preset exactly (pin the version by removing the caret).

In the case of babel-preset-react-native@5.0.2, you must use beta.47...

jjd314 · 2018-07-30T11:14:56Z

@existentialism Thanks, but the problem is that the decorators don't work in 47. Forcing it to 54 gets the decorators working, but I hit other problems. It looks like plugin-transform-classes is generating the _inherits calls for subclasses before doing pushBody(), which generates _createClass, which overrides the prototype. The effect is that any properties and methods defined in the subclass are lost. The immediate symptom is that I get a red box complaining that my component does not define render. I'm just waiting now for react-native to catch up to the latest babel, and hoping that everything gets resolved.

existentialism · 2018-07-30T12:51:00Z

@jjd314 cool, just wanted to clarify since a lot of RN users are having issues with the beta version mismatch stuff!

thientnc-ibl · 2018-07-31T03:58:45Z

@jjd314 . If you are using RN 0.56 with decorator plugin, you should go to this work aground, #20150 I hope it can help.

PrsRares · 2018-07-31T06:54:08Z

No changes? Did someone actually resolve this?

thientnc-ibl · 2018-07-31T08:27:06Z

@PrsRares , Did you try my suggestion? it is posted at facebook/react-native#20150

PrsRares · 2018-07-31T08:36:26Z

@thientnc-ibl Ijust found out that they cant resolve this issue, so they will release 0.57 a little earlier and will be fixed, its a problem on windows only from what i was reading. Look here facebook/react-native#19953

alexxsanchezm · 2018-08-01T21:35:47Z

@PrsRares I think you are totally wrong, this is not only a windows problem, it happens on macOs too.

liranh85 · 2018-08-20T13:44:29Z

Aggregating the suggestions from @existentialism and @jjd314 (thanks for those btw!), the following fixed the issue for me:

Install @babel/plugin-proposal-decorators specifically at version 7.0.0-beta.47:

yarn add @babel/plugin-proposal-decorators@7.0.0-beta.47

Change the plugins in .babelrc as follows:

{
  "presets": ["react-native"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

thathexa · 2018-08-30T06:02:45Z

BUMP. I installed RN today so I have version 0.56. Wanting to create a new app that uses MobX, tried doing exactly what @liranh85 did, but I still get the following error:

TypeError: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null

So... This is really frustrating. Already spent a day on it. As far as I understand, the problem is that this version of @babel/plugin-proposal-decorators simply doesn't work, and any later version is not supported by this version of RN. Does that mean we just have to wait for the next RN release?

schumannd · 2018-09-01T07:56:24Z

I found the solution in another issue: #7831

before:

{
  "presets": ["react-native"],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

after:

{
  "presets": ["react-native"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {
      "legacy": true
    }],
  ]
}

thathexa · 2018-09-01T16:47:46Z

I can confirm that this you can use MobX with decorators in RN 0.56 with @babel/plugin-proposal-decorators with legacy: true AS LONG AS the @babel/plugin-proposal-decorators version is the EXACT SAME as the rest of the @babel/* packages (version 7.0.0-beta.47 for RN 0.56.0). Just note that in order to use MobX version 5 you must force update jsc-android as explained here.

Also it seems that even if you get MobX 5 to work, you can't use the @computed decorator for some reason (if you have further insight on this problem please comment on my issue mobxjs/mobx#1708)

Janealter · 2018-09-18T11:36:26Z

package.json

"@babel/core": "7.0.0-beta.47",
"@babel/helpers": "7.0.0-beta.47",
"@babel/parser": "7.0.0-beta.48",
"@babel/plugin-proposal-decorators": "7.0.0-beta.47",
"@babel/preset-env": "7.0.0-beta.47",
"@babel/preset-flow": "7.0.0-beta.47",
"@babel/preset-react": "7.0.0-beta.47",
"babel-preset-react-native": "5.0.2"

.babelrc

{
  "presets": ["react-native"],
  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
}

I getting error bundling failed: TypeError: Cannot read property 'addHelper' of undefined
What other dependencies are needed for babel 7 with React Native?

raphaelhovsepyan · 2018-10-01T08:23:05Z

It works with

"@babel/plugin-proposal-decorators": "7.1.2",
"react-native": "0.57.1"

jdnichollsc · 2019-03-26T23:26:38Z

any update of this issue guys?

nicolo-ribaudo · 2019-03-26T23:29:30Z

Doesn't #8284 (comment) work for you? Anyway, the last version of RN supports Babel 7.

jdnichollsc · 2019-03-28T07:43:42Z

Nothing, we have RN 0.56, so we need to update before to try that solution :/

darkowic · 2019-05-07T05:49:15Z

If you still encounter the problem - make sure that all your dependencies using babel are upgraded and do not use babel beta < 47. In my case, there was a problem with @svgr/webpack===2.0.0 which was using babel version beta.37. Upgrade solved the issue.

Thank you @jjd314!

nicolo-ribaudo · 2019-05-07T14:59:45Z

Thanks to everyone who suggested how to solve this problem. I'm closing this now since it is working with the last versions of the various packages.

nicolo-ribaudo closed this as completed May 7, 2019

lock bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Aug 6, 2019

lock bot locked as resolved and limited conversation to collaborators Aug 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null #8284

Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null #8284

milixov commented Jul 7, 2018 •

edited

babel-bot commented Jul 7, 2018

loganfsmyth commented Jul 7, 2018

milixov commented Jul 7, 2018

loganfsmyth commented Jul 7, 2018

milixov commented Jul 7, 2018

loganfsmyth commented Jul 7, 2018

milixov commented Jul 7, 2018

thientnc-ibl commented Jul 9, 2018 •

edited

jjd314 commented Jul 18, 2018

jjd314 commented Jul 18, 2018

existentialism commented Jul 18, 2018

swcisel commented Jul 22, 2018 •

edited

milixov commented Jul 28, 2018 •

edited

jjd314 commented Jul 29, 2018

existentialism commented Jul 30, 2018 •

edited

jjd314 commented Jul 30, 2018

existentialism commented Jul 30, 2018

thientnc-ibl commented Jul 31, 2018 •

edited

PrsRares commented Jul 31, 2018

thientnc-ibl commented Jul 31, 2018

PrsRares commented Jul 31, 2018

alexxsanchezm commented Aug 1, 2018

liranh85 commented Aug 20, 2018

thathexa commented Aug 30, 2018 •

edited

schumannd commented Sep 1, 2018

thathexa commented Sep 1, 2018

Janealter commented Sep 18, 2018 •

edited

raphaelhovsepyan commented Oct 1, 2018

jdnichollsc commented Mar 26, 2019

nicolo-ribaudo commented Mar 26, 2019 •

edited

jdnichollsc commented Mar 28, 2019

darkowic commented May 7, 2019

nicolo-ribaudo commented May 7, 2019 •

edited

Navigation Menu

Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null #8284

Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null #8284

Comments

milixov commented Jul 7, 2018 • edited

Bug Report

babel-bot commented Jul 7, 2018

loganfsmyth commented Jul 7, 2018

milixov commented Jul 7, 2018

loganfsmyth commented Jul 7, 2018

milixov commented Jul 7, 2018

loganfsmyth commented Jul 7, 2018

milixov commented Jul 7, 2018

thientnc-ibl commented Jul 9, 2018 • edited

jjd314 commented Jul 18, 2018

jjd314 commented Jul 18, 2018

existentialism commented Jul 18, 2018

swcisel commented Jul 22, 2018 • edited

milixov commented Jul 28, 2018 • edited

jjd314 commented Jul 29, 2018

existentialism commented Jul 30, 2018 • edited

jjd314 commented Jul 30, 2018

existentialism commented Jul 30, 2018

thientnc-ibl commented Jul 31, 2018 • edited

PrsRares commented Jul 31, 2018

thientnc-ibl commented Jul 31, 2018

PrsRares commented Jul 31, 2018

alexxsanchezm commented Aug 1, 2018

liranh85 commented Aug 20, 2018

thathexa commented Aug 30, 2018 • edited

schumannd commented Sep 1, 2018

thathexa commented Sep 1, 2018

Janealter commented Sep 18, 2018 • edited

raphaelhovsepyan commented Oct 1, 2018

jdnichollsc commented Mar 26, 2019

nicolo-ribaudo commented Mar 26, 2019 • edited

jdnichollsc commented Mar 28, 2019

darkowic commented May 7, 2019

nicolo-ribaudo commented May 7, 2019 • edited

milixov commented Jul 7, 2018 •

edited

thientnc-ibl commented Jul 9, 2018 •

edited

swcisel commented Jul 22, 2018 •

edited

milixov commented Jul 28, 2018 •

edited

existentialism commented Jul 30, 2018 •

edited

thientnc-ibl commented Jul 31, 2018 •

edited

thathexa commented Aug 30, 2018 •

edited

Janealter commented Sep 18, 2018 •

edited

nicolo-ribaudo commented Mar 26, 2019 •

edited

nicolo-ribaudo commented May 7, 2019 •

edited