babel: Module build failed: TypeError: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null at Array.map (native)

@TitanKing @dooboolab I found it, I found it, I found it!

Righto - so metro bundler in react native 0.56 only supports babel 7 beta v47

Which means its actually due to a version mismatch, just not one in your package.json. I solved this by looking at the missing peer dependencies when running yarn - So if this changes in the future and causes the same issue, check the yarn output.

So what I did was

package.json

  "devDependencies": {
    "@babel/core": "7.0.0-beta.47",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
    "@babel/plugin-transform-runtime": "7.0.0-beta.47",
    "@babel/runtime": "7.0.0-beta.47",
    ...

.babelrc

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-transform-runtime",
      {
        "helpers": true,
        "polyfill": false,
        "regenerator": false
      }
    ]
  ]
}

Note: I did need to remove @babel/parser as it was first introduced in beta 48

I am suffering from this issue in react-native@0.56 any idea? Related to issue.

@leejay1992 I started seeing this error after upgrading my project to babel beta 46 (was previously on beta 44), and it seems it may indicate some conflict between babel plugins. In my case I was able to resolve it by removing babel-plugin-transform-decorators-legacy and adding "decoratorsLegacy": true to the @babel/env @babel/stage-0 preset options.

@somonek thanks for your comment-I’ve also resolved this issue by replacing the plugin:

@rborn - Can’t let folks suffer…

This is what I am having in my project to make Mobx work with React Native 0.56, hope this helps you all.

.babelrc

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

package.json

{
  "name": "MyProject",
  "version": "0.0.1",
  "dependencies": {
    "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
    "@babel/runtime": "7.0.0-beta.47",
    "add": "^2.0.6",
    "axios": "^0.18.0",
    "deep-object-diff": "^1.1.0",
    "fast-json-patch": "^2.0.7",
    "flat": "^4.1.0",
    "lodash": "^4.17.10",
    "mobx": "^5.0.3",
    "mobx-react": "^5.2.3",
    "react": "16.4.1",
    "react-dom": "^16.4.1",
    "react-native": "^0.56.0",
    "react-native-code-push": "^5.4.1",
    "react-native-country-picker-modal": "^0.6.2",
    "react-native-firebase": "^4.3.7",
    "react-native-form": "^2.1.2",
    "react-native-gifted-chat": "^0.4.3",
    "react-native-lightbox": "git://github.com/oblador/react-native-lightbox.git#0a37652",
    "react-native-linear-gradient": "^2.4.0",
    "react-native-loading-spinner-overlay": "^0.5.2",
    "react-native-segmented-control-tab": "^3.2.2",
    "react-native-text-input-enhance": "^1.0.11",
    "react-native-typography": "^1.3.0",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^2.6.2",
    "react-navigation-header-buttons": "^2.0.1",
    "styled-components": "^3.3.3",
    "uuid": "^3.3.2",
    "yarn": "^1.9.4"
  },
  "devDependencies": {
    "babel-jest": "23.4.0",
    "babel-preset-react-native": "^5",
    "flow-bin": "^0.76.0",
    "jest": "^23.4.1",
    "jsc-android": "^224109.0.0",
    "react-native-cli": "^2.0.1",
    "react-native-rename": "^2.2.2",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

@dooboolab Did you manage to find a solution for this?

@cburbank’s solution didn’t work for me, but I was able to solve it by having the decorators plugin like this:

{
  "presets": [
    "@babel/preset-react",
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {
      "legacy": true
    }],
    "react-hot-loader/babel",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-syntax-export-extensions",
    "transform-function-bind"
  ]
}

Hey @leejay1992! 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.

@hvaoc I fixed like this: you need to have .babelrc split in dev/production like here https://github.com/oblador/react-native-vector-icons/issues/801#issuecomment-409268915

Alsop keep @babel/* vesions to 7.0.0-beta.47

Thanks a lot for your help 🤗

@rknell could you please share the whole package.json / .babelrc ? I’m losing my mind here trying to make mobx run with RN 0.56 in release mode 😹

Thank you 🤗

@somonek s answer solved it for me:

before:

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

after:

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

Yeah, I meant to say “before we can do semver for babel 7 packages for react native” @existentialism

@mehulmpt just to clarify: “babel 7 is stable for react native”… it is, it’s just that all your @babel/* dependencies need to fixed to matching versions, and since RN is currently using beta47, you must too.

I got the same error when adding Mobx support to my react native project.

Changes suggested by @dooboolab above fixed this error for me.

Am using “react-native”: “^0.56.0”.

@dimapaloskin That is only a problem when you are using different versions of the various packages.

Looks like this bug related with this commit: https://github.com/babel/babel/commit/b8dcd6f593955be2779b770182a4e8930288cdaa which totally renamed callee to expression

The quick fix: https://github.com/babel/babel/blob/master/packages/babel-plugin-proposal-decorators/src/transformer-legacy.js#L49

const expression = decorator.expression; -> const expression = decorator.expression || decorator.callee

Good Nice