Update on "[compiler] Errors in earlier functions dont stop subsequent compilation"

Errors in an earlier component/hook shouldn't stop later components from compiling.

[ghstack-poisoned]

Author: josephsavona

compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts

@@ -18,11 +18,6 @@ export enum ErrorSeverity {
    * Code that breaks the rules of React.
    */
   InvalidReact = 'InvalidReact',
-  /**
-   * Like InvalidReact, but this specific error is still in testing w some false positives
-   * so we special-case it to suppress in ESLint.
-   */
-  InvalidRefInRender = 'InvalidRefInRender',
   /**
    * Incorrect configuration of the compiler.
    */
@@ -237,7 +232,6 @@ export class CompilerError extends Error {
         case ErrorSeverity.InvalidJS:
         case ErrorSeverity.InvalidReact:
         case ErrorSeverity.InvalidConfig:
-        case ErrorSeverity.InvalidRefInRender:
           return true;
         case ErrorSeverity.CannotPreserveMemoization:
         case ErrorSeverity.Todo:

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts

@@ -246,7 +246,7 @@ function validateNoRefAccessInRenderImpl(
             // Report a more precise error when calling a local function that accesses a ref
             if (state.refAccessingFunctions.has(callee.identifier.id)) {
               errors.push({
-                severity: ErrorSeverity.InvalidRefInRender,
+                severity: ErrorSeverity.InvalidReact,
                 reason:
                   'This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef)',
                 loc: callee.loc,
@@ -351,7 +351,7 @@ function validateNoRefValueAccess(
     state.refAccessingFunctions.has(operand.identifier.id)
   ) {
     errors.push({
-      severity: ErrorSeverity.InvalidRefInRender,
+      severity: ErrorSeverity.InvalidReact,
       reason:
         'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
       loc: state.refValues.get(operand.identifier.id) ?? operand.loc,
@@ -377,7 +377,7 @@ function validateNoRefAccess(
     state.refAccessingFunctions.has(operand.identifier.id)
   ) {
     errors.push({
-      severity: ErrorSeverity.InvalidRefInRender,
+      severity: ErrorSeverity.InvalidReact,
       reason:
         'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
       loc: loc,
@@ -398,7 +398,7 @@ function validateNoDirectRefValueAccess(
 ): void {
   if (state.refValues.has(operand.identifier.id)) {
     errors.push({
-      severity: ErrorSeverity.InvalidRefInRender,
+      severity: ErrorSeverity.InvalidReact,
       reason:
         'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
       loc: state.refValues.get(operand.identifier.id) ?? operand.loc,

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-later-mutation.expect.md

@@ -35,13 +35,13 @@ export const FIXTURE_ENTRYPOINT = {
   10 |   };
   11 |   const moveLeft = {
 > 12 |     handler: handleKey('left'),
-     |              ^^^^^^^^^ InvalidRefInRender: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (12:12)
+     |              ^^^^^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (12:12)
 
-InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (12:12)
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (12:12)
 
-InvalidRefInRender: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (15:15)
+InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (15:15)
 
-InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (15:15)
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (15:15)
   13 |   };
   14 |   const moveRight = {
   15 |     handler: handleKey('right'),

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md

@@ -18,7 +18,7 @@ function Component(props) {
   2 | function Component(props) {
   3 |   const ref = useRef(null);
 > 4 |   const value = ref.current;
-    |                 ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+    |                 ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
   5 |   return value;
   6 | }
   7 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md

@@ -22,7 +22,7 @@ function Component(props) {
    7 |     return <Foo item={item} current={current} />;
    8 |   };
 >  9 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
-     |                                  ^^^^^^^^^^^^^^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
+     |                                  ^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
   10 | }
   11 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md

@@ -19,7 +19,7 @@ function Component() {
   2 | function Component() {
   3 |   const ref = useRef(null);
 > 4 |   ref.current = false;
-    |   ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+    |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
   5 |
   6 |   return <button ref={ref} />;
   7 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md

@@ -24,9 +24,9 @@ function Component() {
    7 |   };
    8 |   const changeRef = setRef;
 >  9 |   changeRef();
-     |   ^^^^^^^^^ InvalidRefInRender: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
+     |   ^^^^^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
 
-InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
   10 |
   11 |   return <button ref={ref} />;
   12 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md

@@ -18,7 +18,7 @@ function Component(props) {
   2 | function Component(props) {
   3 |   const ref = useRef(null);
 > 4 |   const x = foo(ref);
-    |                 ^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+    |                 ^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
   5 |   return x.current;
   6 | }
   7 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md

@@ -17,7 +17,7 @@ function Component({ref}) {
   1 | // @validateRefAccessDuringRender @compilationMode(infer)
   2 | function Component({ref}) {
 > 3 |   const value = ref.current;
-    |                 ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)
+    |                 ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)
   4 |   return <div>{value}</div>;
   5 | }
   6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md

@@ -17,7 +17,7 @@ function Component(props) {
   1 | // @validateRefAccessDuringRender @compilationMode(infer)
   2 | function Component(props) {
 > 3 |   const value = props.ref.current;
-    |                 ^^^^^^^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)
+    |                 ^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)
   4 |   return <div>{value}</div>;
   5 | }
   6 |