TypeError: Cannot read property 'bind' of undefined when using Flow

[Gpx]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

flow bind

Environment

Environment:
 OS: macOS Sierra 10.12.6
 Node: 10.11.0
 Yarn: Not Found
 npm: 6.4.1
 Watchman: 4.7.0
 Xcode: Xcode 9.2 Build version 9C40b
 Android Studio: Not Found

Packages: (wanted => installed)
 react: ^16.5.2 => 16.5.2
 react-dom: ^16.5.2 => 16.5.2
 react-scripts: 2.0.1 => 2.0.1

Steps to Reproduce

1. Create a component like this one

 class Foo extends React.Component {
 constructor(props) {
 super(props)
 this.foo = this.foo.bind(this)
 }
 foo: () => ()
 foo() {}
 render() { return <div /> }
 }

2. Run the tests for Foo
3. TypeError: Cannot read property 'bind' of undefined

Expected Behavior

The file should run in the tests

Actual Behavior

I think Flow's syntax is confusing the tests. Note that this same code was working in the previous version of CRA

Reproducible Demo

Simply clone https://github.com/Gpx/cra2-bind and run the tests

[gaearon]

This is because Babel 7 changed the behavior of class properties so that an empty “definition” like this is treated as assigning undefined. AFAIK this is closer in behavior to the latest specification.

We’ll need to mention this in migration notes.

Still I’m not sure if this is correct. We’ll need more eyes on this.

Some discussion: babel/babel#8417.

Apparently this could solve it? xing/hops@9cf7791
Maybe our preset should do this.

[Gpx]

The thing is that Flow is asking me to add a type definition to foo and I don't know how else to do it

[gaearon]

Yeah, I understand. We'll need to dig deeper into this.

[Gpx]

Ok, thanks. Let me know if I can help somehow

[bugzpodder]

@Gpx try this. This uses the flow commenting method. Obviously not ideal but it should provide with a workaround.

diff --git a/src/App.js b/src/App.js
index d70a6ba..8c37374 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,7 +10,7 @@ class App extends Component {
 this.foo = this.foo.bind(this);
 }
 
- foo: void => void;
+ /*:: foo: void => void */
 foo() {}
 
 render() {

[Gpx]

@bugzpodder yep, that works, unfortunately, in my app, we use prettier which converts comments into standard type definitions. I think we'll wait to update CRA until this issue has been closed