Unable to ignore react-rule-unsafe-ref

[neutraali]

Flow version: 0.244.0

We're running into an issue where react-rule-unsafe-ref prevents us from passing anything useRef -related from a parent component to a child component. We've tried // $FlowIgnore it but it doesn't seem to work for this very specific rule. We can't reproduce the same issue with Try Flow.

We've tried adding a mounted -control variable that only allows the .current -property through after the component has been mounted, but that's of no help. How are you intended to refine / guard against this particular scenario? There's nothing in the docs concerning this.

We tried upgrading to 0.245.2 but that will simply start to repeatedly crash the Flow server with an endless loop of:

Called from Flow_js.M__flow.mk_type_destructor in file "src/typing/flow_js.ml", lines 6436-6439, characters 8-9
Called from Flow_js.M__flow.__flow in file "src/typing/flow_js.ml", line 395, characters 23-73
Called from Tvar.mk_no_wrap_where in file "src/typing/tvar.ml", line 33, characters 11-27
Called from Flow_js.M__flow.mk_type_destructor in file "src/typing/flow_js.ml", lines 6436-6439, characters 8-9
Called from Flow_js.M__flow.__flow in file "src/typing/flow_js.ml", line 395, characters 23-73
Called from Tvar.mk_no_wrap_where in file "src/typing/tvar.ml", line 33, characters 11-27
Called from Flow_js.M__flow.mk_type_destructor in file "src/typing/flow_js.ml", lines 6436-6439, characters 8-9
Called from Flow_js.M__flow.__flow in file "src/typing/flow_js.ml", line 395, characters 23-73
...

[SamChou19815]

We make the react-rule errors not suppressible without error code, so you have to suppress with $FlowFixMe[react-rule-unsafe-ref]. It would also be nice to get a repro of the infinite loop case

[neutraali]

Thanks for the info @SamChou19815 - Would be nice to maybe have that detail mentioned in the docs?

As far as the error goes, we tracked it down to this global definition:

declare var React: $Exports<'react'>;

^ In any version after 0.244.0 this triggers the infinite loop I described. If you switch that to:

declare var React: any;

... Then it triggers a whole host of other React-related errors, for example:

Cannot use Node as a type because it is an any-typed value. Type Node properly, so it is no longer any-typed, to use it
as an annotation. [value-as-type]

     11│ component Component(
     12│     children?: React.Node
     12│ ) {

[SamChou19815]

I was still unable to reproduce this. I probably need more info, e.g.

• Does the stack trace indicate which file it crashed on?
• Do you use react.runtime=classic or automatic
• If you know the file it crashed on, does it use component syntax, or some other react related utility types.

To unblock, I think should be no longer necessary, since we added support to let you use all the react utility types without import a while ago.