Flow: "type referenced from value position" when using this in JSX

[omerzach]

https://flow.org/try/#0FASwtgDg9gTgLgAgFQIIYGcECUCmqDGiAZjFGAgEQx6EUDcoksiA3ggMJnQB2O3iAXwQkylagTj1gwfABsMmAGJQoCHAA84fACaZOTXvwA8LAD6mBAGgRmLAPhvAECAEKoYCALwIAFAEovByNtEAA3OwAVHHQ4IwB6EPCGZycEam5tHBh-R2dnajgAVxhuBCM4AAsQdAA6NwAvBDi7ZIQBBgEgA

I had code like this that worked in Flow 0.52.0 but no longer does in 0.55.0:

class Foo extends Component<{||}, {||}> {
  Bar = () => <div>Test</div>;

  render() {
    return <this.Baz />;
  };
}

9:     return <this.Baz />;
               ^ this. type referenced from value position
5: class Foo extends Component<{||}, {||}> {
         ^ type this

Is this a bug in Flow? If not is there a more appropriate way to accomplish this, other than moving Bar's declaration inside of render?

[mruzekw]

I'm not sure about the error itself, but here is another way to keep Bar where it is.

class Foo extends Component<{||}, {||}> {
  Bar = () => <div>Test</div>;

  render() {
    const  { Bar } = this;
    return <Bar />;
  };
}

[aehernandez]

Any progress on this?

[melonq]

I met the same problem when trying to reduce the line const { Bar } = this;
Please give us an update when it gets fixed. Thanks

[mechanicals]

any updates on this one.