[0.18.0-rc] class properties now needs a semicolon but packager throws a cryptic error

[gre]

class A { 
  foo = () => console.log("ooo")
}

this used to work, but now in 0.18.0-rc

TransformError: .../index.js: Cannot read property 'error' of null

Do we need to explicitely add some babel plugin now for this? or is it a bug?

---

answer is you must use a semicolon now, so:

class A { 
  foo = () => console.log("ooo");
}

---

But the error is not straightforward, this shouldn't break like this in packager

[facebook-github-bot]

Hey gre, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[toadums]

I think you need a semicolon after the arrow function, babel changed this in 6.4.0

babylon: #3225 throw parse error if class properties do not have a semicolon.

From my looking around last night, there is no plugin that removes this check

[benjreinhart]

babel/babel#3225 Is breaking everyone's RN apps if they re-install node modules. I sort of agree with their reasoning for the breaking change but it is annoying that it is transparently upgraded if the react-native module is reinstalled without even upgrading RN itself.

[gre]

@benjreinhart what do you mean "if they re-install node modules" ? is there a cache somewhere? Because i've rm -rf node_modules multiple time already

[benjreinhart]

Yeah.. that's why you're getting the error. When you reinstall the react-native module it is upgrading a babel transform which contains the commit in that link I provided that throws those syntax errors.

So the fact that it is throwing errors isn't a bug. It was a bug that that code worked in the first place, at least according to the pull request I linked to above.

[corbt]

I can confirm this in 0.18-rc. I noticed the same error as @gre: TransformError: [some file]: Cannot read property 'error' of null but didn't know what caused it. After downgrading back to 0.17 I was confronted with the class properties error @benjreinhart mentions, although in 0.17 the babel error message was shown instead of the cryptic packager one, so I could fix it.

I don't have a problem with babel's behavior here (I don't care if I have to put semicolons after class properties) but the cryptic error that the transformer throws in 0.18-rc should be classified as a bug. It gives no help in solving the problem.

[gre]

@benjreinhart oh yeah I see.

Thanks @toadums for pointing the error cause, this is going to be a pain for everyone using this feature as the error message is totally not straightforward, but hopefully when people will search for this they might fall here.
I wish there were a migration tool – or at least a deprecated message logged when they break things like this.

[corbt]

@gre I would leave this open; packager should report the babel failure so that users can find and fix the class-properties bug in their code. This is the behavior in 0.17. I think this is a regression in packager.

[gre]

@corbt sorry I thought you meant it was a bug in babel, opened :)

[hzoo]

@gre There's no official migration tool but I made a PR for JSCS to add autofix for class properties for the requireSemicolons rule real quick for this. babel/babel#3225 (comment). I'l try to get a new version out later today, otherwise follow the steps I mention. Also we will add a deprecation message next time.

[satya164]

@gre @corbt Probably should open another issue about Packager not showing Babel errors.

[gre]

@satya164 , i've updated the title and added a better description, would that work?

[satya164]

@gre The issue with Packager is not specific to class properties, is it? Does it show errors for other kinds of babel issues?

[gre]

@satya164 good question. I don't know that's the only error I had so far. if not, probably open a new generic issue as you said

[toadums]

@satya164, I found it occurring for two related babel issues:

class A {
  static propTypes = {
    style: React.PropTypes.object,
  } // need a semicolon here

  onChange = () => {

  } // need a semicolon here

}

Here is a discussion about the change: es-class-fields-and-static-properties. I found jeffmo's explanation helpful.

[satya164]

@toadums Both of these are class properties though.

[toadums]

Fair enough, those are just the two syntax' that I had the error occur on :)

[ThaJay]

I had the same issue today, transpiling with webpack and babel. This is a 'spec compliancy' update in babylon babel/babel#3231 (diff) but breaks all arrow functions in a class.

My solution eventually was to just refactor to normal functions, and bind 'this' where necessary.

will post at the normal React git as well, found this one on google. Babel could have blogged this.

[satya164]

You just need to add semi-colons. No need to change them to function and bind this manually.

[corbt]

EDIT: discussion of packager error continues in #5191.

Ok, I've had a chance to install the RC and take a look at this again. It looks like the packager isn't passing through any babel errors. Example errors from removing the closing bracket of a function:

React Native 0.17

uncaught error Error: SyntaxError: /Users/kyle/proj/chimera/app/actions/auth.js: 'import' and 'export' may only appear at the top level (22:0)
  20 |
  21 |
> 22 | export function logOut() {
     | ^
  23 |   return {type: LOG_OUT};
  24 | }

React Native 0.18-rc

uncaught error Error: TypeError: Cannot read property 'error' of null
    at index.js:117:20
    at tryCallOne (/Users/kyle/proj/chimera/node_modules/react-native/node_modules/promise/lib/core.js:37:12)
    at /Users/kyle/proj/chimera/node_modules/react-native/node_modules/promise/lib/core.js:123:15
    at flush (/Users/kyle/proj/chimera/node_modules/react-native/node_modules/promise/node_modules/asap/raw.js:50:29)
    at doNTCallback0 (node.js:428:9)
TransformError: /Users/kyle/proj/chimera/app/actions/auth.js: Cannot read property 'error' of null
See logs /var/folders/j4/wct0sgyx0p9803_1nkhm3pzm0000gn/T/react-packager.log
    at SocketClient._handleMessage (SocketClient.js:139:23)
    at BunserBuf.<anonymous> (SocketClient.js:53:42)
    at emitOne (events.js:77:13)
    at BunserBuf.emit (events.js:169:7)
    at BunserBuf.process (/Users/kyle/proj/chimera/node_modules/react-native/node_modules/bser/index.js:289:10)
    at /Users/kyle/proj/chimera/node_modules/react-native/node_modules/bser/index.js:244:12
    at doNTCallback0 (node.js:428:9)
    at process._tickCallback (node.js:357:13)

[gre]

@corbt thanks :) let's close this and focus on your generic issue

[mmazzarolo]

Since this morning I'm having this issue again, anybody else?

transforming [========================================] 100% 613/614Error while persisting cache: SyntaxError /Users/matteo/dev/react-native-starter/src/containers/login.js: A semicolon is required after a class property (24:3)

class LoginModal extends React.Component {
  static propTypes = {
    error: PropTypes.string,
    isLoading: PropTypes.bool.isRequired,
    login: PropTypes.func.isRequired,
  } // <-- needs semicolon now

My .babelrc:

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

P.S.: The repo is here

[hzoo]

This shouldn't be an issue anymore since the change was reverted a while back in 6.5.2 https://github.com/babel/babel/releases/tag/v6.5.2 - I would probably clear/reinstall node_modules?

[mmazzarolo]

I already tried with:

• npm cache clean, rm -f ~./npm, rm -f ./node_modules
• ./node_modules/react-native/packager/packager.sh start --reset-cache
  without any success...

Thank you anyway hzoo, I also asked on stackoverflow, because it seems it's an issue only on my setup and/or is better discussing it there.

[mmazzarolo]

It is so weird, I can confirm I'm still having the issue, tried with both React-Native 0.20 and 0.21 on two different projects (on both Ubuntu and OSX).
Tomorrow I'll add semicolons back on every single class property and I'll give it another try in the future.

[mmazzarolo]

Fixed on 0.22.0-rc, 0.21.0 was using babel < 6.5.2