[flow] Use of React$Node will now trigger internal-type error

Summary: Changelog: [errors] Use of `React$Node` and `React$MixedElement` outside of libdefs will now trigger `internal-type` errors. Reviewed By: gkz Differential Revision: D67542053 fbshipit-source-id: 0e19097114d4fc7281fe89c5872fc6efd5855807
facebook · Dec 21, 2024 · 09003fe · 09003fe
1 parent 192b8b1
commit 09003fe
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 33 deletions.
diff --git a/src/typing/type_annotation.ml b/src/typing/type_annotation.ml
@@ -1335,6 +1335,16 @@ module Make (Statement : Statement_sig.S) : Type_annotation_sig.S = struct
                  )
               );
           local_generic_type ()
+        | "React$Node" ->
+          if not (Context.is_lib_file cx) then
+            Flow_js_utils.add_output
+              cx
+              (Error_message.EInternalType
+                 ( loc,
+                   Flow_intermediate_error_types.ReactDollarUtilityTypesWithNonDollarAliases "Node"
+                 )
+              );
+          local_generic_type ()
         | "React$ElementRef" ->
           if not (Context.is_lib_file cx) then
             Flow_js_utils.add_output

diff --git a/tests/internal_type_lint/internal_type_lint.exp b/tests/internal_type_lint/internal_type_lint.exp
@@ -55,5 +55,13 @@ Error --------------------------------------------------------------------------
                      ^^^^^^^^^^^^^^^^^^
 
 
+Error ---------------------------------------------------------------------------------------------------- test.js:19:15
 
-Found 7 errors
+`React$Node` is an internal Flow type. Use `React.Node` instead. [internal-type]
+
+   19| type T8_bad = React$Node; // error
+                     ^^^^^^^^^^
+
+
+
+Found 8 errors
diff --git a/tests/internal_type_lint/test.js b/tests/internal_type_lint/test.js
@@ -16,3 +16,5 @@ type T5_good = React.ElementProps<C>; // ok
 type T6_bad = $ReactDeepReadOnly<{}>; // error
 type T7_bad = React$MixedElement; // error
 type T7_good = React.MixedElement; // ok
+type T8_bad = React$Node; // error
+type T8_good = React.Node; // ok
diff --git a/tests/lti_implicit_instantiation/builtins.js b/tests/lti_implicit_instantiation/builtins.js
@@ -1,5 +1,5 @@
 // This test requires builtins to be properly loaded in the post-inference pass
 function foo<X>(x: ExactReactElement_DEPRECATED<X>): void {};
-declare var x: React$Node;
+declare var x: React.Node;
 // $FlowExpectedError
 foo(x);
diff --git a/tests/lti_implicit_instantiation/contextual_jsx.js b/tests/lti_implicit_instantiation/contextual_jsx.js
@@ -14,7 +14,7 @@ const z = (
   </Wrapper>
 );
 
-function ComponentWithBound<T: number>(pprops: {a:T}): React$Node {}
+function ComponentWithBound<T: number>(pprops: {a:T}): React.Node {}
 <div><ComponentWithBound a={true} /></div>; // error: bool ~> number
 
 component ComponentSyntaxNoRenders() {

diff --git a/tests/lti_implicit_instantiation/lti_implicit_instantiation.exp b/tests/lti_implicit_instantiation/lti_implicit_instantiation.exp
@@ -45,7 +45,7 @@ Cannot create `ComponentWithBound` element because boolean [1] is incompatible w
 
 References:
    contextual_jsx.js:17:32
-   17| function ComponentWithBound<T: number>(pprops: {a:T}): React$Node {}
+   17| function ComponentWithBound<T: number>(pprops: {a:T}): React.Node {}
                                       ^^^^^^ [2]
 
 

diff --git a/tests/more_react/inexact_config.js b/tests/more_react/inexact_config.js
@@ -1,23 +1,23 @@
 //@flow
 const React = require('react');
-function Component(): React$Node { return null; }
+function Component(): React.Node { return null; }
 
 const _a = <Component foo={3} bar={3} />;
 const _b = <Component>{"foo"}</Component>;
 const _b2 = <Component></Component>;
 
 type Props = {||}
-function Component2(props : Props) : React$Node { return null; }
+function Component2(props : Props) : React.Node { return null; }
 
 const _c = <Component2 foo={3} bar={3} />; // error
 const _d = <Component2>{"foo"}</Component2>; //error
 
-function Component3(props : { }) : React$Node { return null; }
+function Component3(props : { }) : React.Node { return null; }
 
 const _e = <Component3 foo={3} bar={3} />;
 const _f = <Component3>{"foo"}</Component3>;
 
-function Component4(props : {| foo : number |}) : React$Node { return null; }
+function Component4(props : {| foo : number |}) : React.Node { return null; }
 
 const _g = <Component4 foo={3} bar={3} />; //error
 const _h = <Component4></Component4>; //error
diff --git a/tests/more_react/more_react.exp b/tests/more_react/more_react.exp
@@ -9,7 +9,7 @@ Cannot create `Component2` element because property `bar` is missing in `Props`
 
 References:
    inexact_config.js:10:29
-   10| function Component2(props : Props) : React$Node { return null; }
+   10| function Component2(props : Props) : React.Node { return null; }
                                    ^^^^^ [1]
    inexact_config.js:12:12
    12| const _c = <Component2 foo={3} bar={3} />; // error
@@ -27,7 +27,7 @@ Cannot create `Component2` element because property `foo` is missing in `Props`
 
 References:
    inexact_config.js:10:29
-   10| function Component2(props : Props) : React$Node { return null; }
+   10| function Component2(props : Props) : React.Node { return null; }
                                    ^^^^^ [1]
    inexact_config.js:12:12
    12| const _c = <Component2 foo={3} bar={3} />; // error
@@ -45,7 +45,7 @@ Cannot create `Component2` element because property `children` is missing in `Pr
 
 References:
    inexact_config.js:10:29
-   10| function Component2(props : Props) : React$Node { return null; }
+   10| function Component2(props : Props) : React.Node { return null; }
                                    ^^^^^ [1]
    inexact_config.js:13:12
    13| const _d = <Component2>{"foo"}</Component2>; //error
@@ -63,7 +63,7 @@ Cannot create `Component4` element because property `bar` is missing in object t
 
 References:
    inexact_config.js:20:29
-   20| function Component4(props : {| foo : number |}) : React$Node { return null; }
+   20| function Component4(props : {| foo : number |}) : React.Node { return null; }
                                    ^^^^^^^^^^^^^^^^^^ [1]
    inexact_config.js:22:12
    22| const _g = <Component4 foo={3} bar={3} />; //error
@@ -84,7 +84,7 @@ References:
    23| const _h = <Component4></Component4>; //error
                   ^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
    inexact_config.js:20:29
-   20| function Component4(props : {| foo : number |}) : React$Node { return null; }
+   20| function Component4(props : {| foo : number |}) : React.Node { return null; }
                                    ^^^^^^^^^^^^^^^^^^ [2]
 
 

diff --git a/tests/more_react/react-copy-write.js b/tests/more_react/react-copy-write.js
@@ -4,10 +4,10 @@ var React = require("react");
 export type Recipe<T> = (draft: T, state: $ReadOnly<T>) => void;
 export type Mutate<T> = (recipe: Recipe<T>) => void;
 
-type ConsumerRender<S> = (...S) => React$Node;
+type ConsumerRender<S> = (...S) => globalThis.React.Node;
 
 type ProviderProps<T> = {|
-  children: React$Node,
+  children: globalThis.React.Node,
   initialState?: T,
 |};
 
@@ -28,7 +28,7 @@ export type Store<T> = {
   +Consumer: {
     <TSelect: $ReadOnlyArray<(T) => mixed> = $ReadOnlyArray<(T) => mixed>>(
       ConsumerProps<T, TSelect>,
-    ): React$Node,
+    ): globalThis.React.Node,
     // Need the following to fake this as a functional component
     displayName?: ?string,
     propTypes?: any,

diff --git a/tests/react_runtime_automatic/react_runtime_automatic.exp b/tests/react_runtime_automatic/react_runtime_automatic.exp
@@ -9,7 +9,7 @@ Cannot create `Component` element because property `bar` is missing in `Props` [
 
 References:
    test.js:4:27
-   4| function Component(props: Props): React$Node { return null }
+   4| function Component(props: Props): React.Node { return null }
                                 ^^^^^ [1]
    test.js:8:11
    8| const y = <Component bar={3} />; // Error missing foo, got bar
@@ -30,7 +30,7 @@ References:
    8| const y = <Component bar={3} />; // Error missing foo, got bar
                 ^^^^^^^^^^^^^^^^^^^^^ [1]
    test.js:4:27
-   4| function Component(props: Props): React$Node { return null }
+   4| function Component(props: Props): React.Node { return null }
                                 ^^^^^ [2]
 
 
@@ -45,10 +45,10 @@ type argument `P` [3]. [prop-missing]
 
 References:
    test.js:4:27
-     4| function Component(props: Props): React$Node { return null }
+     4| function Component(props: Props): React.Node { return null }
                                   ^^^^^ [1]
    test.js:5:28
-     5| function Component2(props: {| bar: number |}): React$Node { return null }
+     5| function Component2(props: {| bar: number |}): React.Node { return null }
                                    ^^^^^^^^^^^^^^^^^ [2]
    <BUILTINS>/react.js:150:69
    150| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -66,10 +66,10 @@ type argument `P` [3]. [prop-missing]
 
 References:
    test.js:5:28
-     5| function Component2(props: {| bar: number |}): React$Node { return null }
+     5| function Component2(props: {| bar: number |}): React.Node { return null }
                                    ^^^^^^^^^^^^^^^^^ [1]
    test.js:4:27
-     4| function Component(props: Props): React$Node { return null }
+     4| function Component(props: Props): React.Node { return null }
                                   ^^^^^ [2]
    <BUILTINS>/react.js:150:69
    150| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -87,10 +87,10 @@ the first parameter of type argument `ElementType` [3]. [prop-missing]
 
 References:
    test.js:4:27
-     4| function Component(props: Props): React$Node { return null }
+     4| function Component(props: Props): React.Node { return null }
                                   ^^^^^ [1]
    test.js:5:28
-     5| function Component2(props: {| bar: number |}): React$Node { return null }
+     5| function Component2(props: {| bar: number |}): React.Node { return null }
                                    ^^^^^^^^^^^^^^^^^ [2]
    <BUILTINS>/react.js:150:36
    150| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -108,10 +108,10 @@ the first parameter of type argument `ElementType` [3]. [prop-missing]
 
 References:
    test.js:5:28
-     5| function Component2(props: {| bar: number |}): React$Node { return null }
+     5| function Component2(props: {| bar: number |}): React.Node { return null }
                                    ^^^^^^^^^^^^^^^^^ [1]
    test.js:4:27
-     4| function Component(props: Props): React$Node { return null }
+     4| function Component(props: Props): React.Node { return null }
                                   ^^^^^ [2]
    <BUILTINS>/react.js:150:36
    150| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -129,7 +129,7 @@ Cannot create `Component` element because property `bar` is missing in `Props` [
 
 References:
    test.js:4:27
-   4| function Component(props: Props): React$Node { return null }
+   4| function Component(props: Props): React.Node { return null }
                                 ^^^^^ [1]
    test.js:9:60
    9| const z: ExactReactElement_DEPRECATED<typeof Component2> = <Component bar={3} />; // Error, missing foo got bar
@@ -150,7 +150,7 @@ References:
    9| const z: ExactReactElement_DEPRECATED<typeof Component2> = <Component bar={3} />; // Error, missing foo got bar
                                                                  ^^^^^^^^^^^^^^^^^^^^^ [1]
    test.js:4:27
-   4| function Component(props: Props): React$Node { return null }
+   4| function Component(props: Props): React.Node { return null }
                                 ^^^^^ [2]
 
 
@@ -168,7 +168,7 @@ References:
    14| const fragment4 = <><Component2 foo={3}/></>; // Error requires bar not foo
                            ^^^^^^^^^^^^^^^^^^^^^ [1]
    test.js:5:28
-    5| function Component2(props: {| bar: number |}): React$Node { return null }
+    5| function Component2(props: {| bar: number |}): React.Node { return null }
                                   ^^^^^^^^^^^^^^^^^ [2]
 
 
@@ -183,7 +183,7 @@ Cannot create `Component2` element because property `foo` is missing in object t
 
 References:
    test.js:5:28
-    5| function Component2(props: {| bar: number |}): React$Node { return null }
+    5| function Component2(props: {| bar: number |}): React.Node { return null }
                                   ^^^^^^^^^^^^^^^^^ [1]
    test.js:14:21
    14| const fragment4 = <><Component2 foo={3}/></>; // Error requires bar not foo

diff --git a/tests/react_runtime_automatic/test.js b/tests/react_runtime_automatic/test.js
@@ -1,8 +1,8 @@
 //@flow
 
 type Props = {| foo: number |}
-function Component(props: Props): React$Node { return null }
-function Component2(props: {| bar: number |}): React$Node { return null }
+function Component(props: Props): React.Node { return null }
+function Component2(props: {| bar: number |}): React.Node { return null }
 
 const x: ExactReactElement_DEPRECATED<typeof Component> = <Component foo={3} />; // Ok
 const y = <Component bar={3} />; // Error missing foo, got bar

diff --git a/tests/refinements/maybe_react.js b/tests/refinements/maybe_react.js
@@ -6,7 +6,7 @@ type Node =
   | number
   | string
   | ExactReactElement_DEPRECATED<any>
-  | Iterable<?React$Node>;
+  | Iterable<?React.Node>;
 
 type Props = {|
   title?: ?number | Node,