[compiler] Improve hook validation diagnostics

NOTE: this is a merged version of @mofeiZ's original PR along with my edits per offline discussion. The description is updated to reflect the latest approach.

The key problem we're trying to solve with this PR is to allow developers more control over the compiler's various validations. The idea is to have a number of rules targeting a specific category of issues, such as enforcing immutability of props/state/etc or disallowing access to refs during render. We don't want to have to run the compiler again for every single rule, though, so @mofeiZ added an LRU cache that caches the full compilation output of N most recent files. The first rule to run on a given file will cause it to get cached, and then subsequent rules can pull from the cache, with each rule filtering down to its specific category of errors.

For the categories, I went through and assigned a category roughly 1:1 to existing validations, and then used my judgement on some places that felt distinct enough to warrant a separate error. Every error in the compiler now has to supply both a severity (for legacy reasons) and a category (for ESLint). Each category corresponds 1:1 to a ESLint rule definition, so that the set of rules is automatically populated based on the defined categories.

Categories include a flag for whether they should be in the recommended set or not.

Note that as with the original version of this PR, only eslint-plugin-react-compiler is changed. We still have to update the main lint rule.

.eslintignore

@@ -28,6 +28,3 @@ packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/
 packages/react-devtools-shell/dist
 packages/react-devtools-timeline/dist
 packages/react-devtools-timeline/static
-
-# Imported third-party Flow types
-flow-typed/

.eslintrc.js

@@ -547,6 +547,7 @@ module.exports = {
   },
 
   globals: {
+    $Call: 'readonly',
     $ElementType: 'readonly',
     $Flow$ModuleRef: 'readonly',
     $FlowFixMe: 'readonly',
@@ -581,7 +582,6 @@ module.exports = {
     IteratorResult: 'readonly',
     JSONValue: 'readonly',
     JSResourceReference: 'readonly',
-    mixin$Animatable: 'readonly',
     MouseEventHandler: 'readonly',
     NavigateEvent: 'readonly',
     PropagationPhases: 'readonly',
@@ -620,6 +620,7 @@ module.exports = {
     PropertyIndexedKeyframes: 'readonly',
     KeyframeAnimationOptions: 'readonly',
     GetAnimationsOptions: 'readonly',
+    Animatable: 'readonly',
     ScrollTimeline: 'readonly',
     EventListenerOptionsOrUseCapture: 'readonly',
     FocusOptions: 'readonly',

.github/workflows/shared_close_direct_sync_branch_prs.yml

@@ -18,7 +18,6 @@ jobs:
     permissions:
       # Used to create a review and close PRs
       pull-requests: write
-      contents: write
     steps:
       - name: Close PR
         uses: actions/github-script@v7

compiler/package.json

@@ -19,8 +19,7 @@
     "test": "yarn workspaces run test",
     "snap": "yarn workspace babel-plugin-react-compiler run snap",
     "snap:build": "yarn workspace snap run build",
-    "npm:publish": "node scripts/release/publish",
-    "eslint-docs": "yarn workspace babel-plugin-react-compiler build && node scripts/build-eslint-docs.js"
+    "npm:publish": "node scripts/release/publish"
   },
   "dependencies": {
     "fs-extra": "^4.0.2",

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

@@ -7,10 +7,9 @@
 
 import * as t from '@babel/types';
 import {codeFrameColumns} from '@babel/code-frame';
-import {type SourceLocation} from './HIR';
+import type {SourceLocation} from './HIR';
 import {Err, Ok, Result} from './Utils/Result';
 import {assertExhaustive} from './Utils/utils';
-import invariant from 'invariant';
 
 export enum ErrorSeverity {
   /**
@@ -629,18 +628,7 @@ export type LintRule = {
   recommended: boolean;
 };
 
-const RULE_NAME_PATTERN = /^[a-z]+(-[a-z]+)*$/;
-
 export function getRuleForCategory(category: ErrorCategory): LintRule {
-  const rule = getRuleForCategoryImpl(category);
-  invariant(
-    RULE_NAME_PATTERN.test(rule.name),
-    `Invalid rule name, got '${rule.name}' but rules must match ${RULE_NAME_PATTERN.toString()}`,
-  );
-  return rule;
-}
-
-function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
   switch (category) {
     case ErrorCategory.AutomaticEffectDependencies: {
       return {
@@ -648,7 +636,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         name: 'automatic-effect-dependencies',
         description:
           'Verifies that automatic effect dependencies are compiled if opted-in',
-        recommended: false,
+        recommended: true,
       };
     }
     case ErrorCategory.CapitalizedCalls: {
@@ -664,7 +652,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
       return {
         category,
         name: 'config',
-        description: 'Validates the compiler configuration options',
+        description: 'Validates the configuration',
         recommended: true,
       };
     }
@@ -690,7 +678,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         category,
         name: 'set-state-in-effect',
         description:
-          'Validates against calling setState synchronously in an effect, which can lead to re-renders that degrade performance',
+          'Validates against calling setState synchronously in an effect',
         recommended: true,
       };
     }
@@ -699,7 +687,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         category,
         name: 'error-boundaries',
         description:
-          'Validates usage of error boundaries instead of try/catch for errors in child components',
+          'Validates usage of error boundaries instead of try/catch for errors in JSX',
         recommended: true,
       };
     }
@@ -723,8 +711,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
       return {
         category,
         name: 'gating',
-        description:
-          'Validates configuration of [gating mode](https://react.dev/reference/react-compiler/gating)',
+        description: 'Validates configuration of gating mode',
         recommended: true,
       };
     }
@@ -733,8 +720,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         category,
         name: 'globals',
         description:
-          'Validates against assignment/mutation of globals during render, part of ensuring that ' +
-          '[side effects must render outside of render](https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)',
+          'Validates against assignment/mutation of globals during render',
         recommended: true,
       };
     }
@@ -756,7 +742,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         category,
         name: 'immutability',
         description:
-          'Validates against mutating props, state, and other values that [are immutable](https://react.dev/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable)',
+          'Validates that immutable values (props, state, etc) are not mutated',
         recommended: true,
       };
     }
@@ -773,9 +759,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         category,
         name: 'preserve-manual-memoization',
         description:
-          'Validates that existing manual memoized is preserved by the compiler. ' +
-          'React Compiler will only compile components and hooks if its inference ' +
-          '[matches or exceeds the existing manual memoization](https://react.dev/learn/react-compiler/introduction#what-should-i-do-about-usememo-usecallback-and-reactmemo)',
+          'Validates that existing manual memoized is preserved by the compiler',
         recommended: true,
       };
     }
@@ -784,7 +768,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         category,
         name: 'purity',
         description:
-          'Validates that [components/hooks are pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure) by checking that they do not call known-impure functions',
+          'Validates that the component/hook is pure, and does not call known-impure functions',
         recommended: true,
       };
     }
@@ -793,7 +777,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         category,
         name: 'refs',
         description:
-          'Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](https://react.dev/reference/react/useRef#usage)',
+          'Validates correct usage of refs, not reading/writing during render',
         recommended: true,
       };
     }
@@ -801,8 +785,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
       return {
         category,
         name: 'set-state-in-render',
-        description:
-          'Validates against setting state during render, which can trigger additional renders and potential infinite render loops',
+        description: 'Validates against setting state during render',
         recommended: true,
       };
     }
@@ -811,7 +794,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         category,
         name: 'static-components',
         description:
-          'Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering',
+          'Validates that components are static, not recreated every render',
         recommended: true,
       };
     }
@@ -843,8 +826,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
       return {
         category,
         name: 'unsupported-syntax',
-        description:
-          'Validates against syntax that we do not plan to support in React Compiler',
+        description: 'Validates against syntax that we do not plan to support',
         recommended: true,
       };
     }
@@ -852,8 +834,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
       return {
         category,
         name: 'use-memo',
-        description:
-          'Validates usage of the useMemo() hook against common mistakes. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.',
+        description: 'Validates usage of the useMemo() hook',
         recommended: true,
       };
     }

compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts

@@ -983,7 +983,7 @@ export function printAliasingEffect(effect: AliasingEffect): string {
     case 'MutateConditionally':
     case 'MutateTransitive':
     case 'MutateTransitiveConditionally': {
-      return `${effect.kind} ${printPlaceForAliasEffect(effect.value)}${effect.kind === 'Mutate' && effect.reason?.kind === 'AssignCurrentProperty' ? ' (assign `.current`)' : ''}`;
+      return `${effect.kind} ${printPlaceForAliasEffect(effect.value)}`;
     }
     case 'MutateFrozen': {
       return `MutateFrozen ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;

compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts

@@ -27,7 +27,7 @@ import {
 } from '../HIR/visitors';
 import {assertExhaustive, getOrInsertWith} from '../Utils/utils';
 import {Err, Ok, Result} from '../Utils/Result';
-import {AliasingEffect, MutationReason} from './AliasingEffects';
+import {AliasingEffect} from './AliasingEffects';
 
 /**
  * This pass builds an abstract model of the heap and interprets the effects of the
@@ -101,7 +101,6 @@ export function inferMutationAliasingRanges(
     transitive: boolean;
     kind: MutationKind;
     place: Place;
-    reason: MutationReason | null;
   }> = [];
   const renders: Array<{index: number; place: Place}> = [];
 
@@ -177,7 +176,6 @@ export function inferMutationAliasingRanges(
               effect.kind === 'MutateTransitive'
                 ? MutationKind.Definite
                 : MutationKind.Conditional,
-            reason: null,
             place: effect.value,
           });
         } else if (
@@ -192,7 +190,6 @@ export function inferMutationAliasingRanges(
               effect.kind === 'Mutate'
                 ? MutationKind.Definite
                 : MutationKind.Conditional,
-            reason: effect.kind === 'Mutate' ? (effect.reason ?? null) : null,
             place: effect.value,
           });
         } else if (
@@ -244,7 +241,6 @@ export function inferMutationAliasingRanges(
       mutation.transitive,
       mutation.kind,
       mutation.place.loc,
-      mutation.reason,
       errors,
     );
   }
@@ -271,7 +267,6 @@ export function inferMutationAliasingRanges(
         functionEffects.push({
           kind: 'Mutate',
           value: {...place, loc: node.local.loc},
-          reason: node.mutationReason,
         });
       }
     }
@@ -512,7 +507,6 @@ export function inferMutationAliasingRanges(
       true,
       MutationKind.Conditional,
       into.loc,
-      null,
       ignoredErrors,
     );
     for (const from of tracked) {
@@ -586,7 +580,6 @@ type Node = {
   transitive: {kind: MutationKind; loc: SourceLocation} | null;
   local: {kind: MutationKind; loc: SourceLocation} | null;
   lastMutated: number;
-  mutationReason: MutationReason | null;
   value:
     | {kind: 'Object'}
     | {kind: 'Phi'}
@@ -606,7 +599,6 @@ class AliasingState {
       transitive: null,
       local: null,
       lastMutated: 0,
-      mutationReason: null,
       value,
     });
   }
@@ -705,7 +697,6 @@ class AliasingState {
     transitive: boolean,
     startKind: MutationKind,
     loc: SourceLocation,
-    reason: MutationReason | null,
     errors: CompilerError,
   ): void {
     const seen = new Map<Identifier, MutationKind>();
@@ -726,7 +717,6 @@ class AliasingState {
       if (node == null) {
         continue;
       }
-      node.mutationReason ??= reason;
       node.lastMutated = Math.max(node.lastMutated, index);
       if (end != null) {
         node.id.mutableRange.end = makeInstructionId(

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

@@ -7,8 +7,8 @@
 
 import * as t from '@babel/types';
 import {
+  CompilerDiagnostic,
   CompilerError,
-  CompilerErrorDetail,
   ErrorCategory,
   ErrorSeverity,
 } from '../CompilerError';
@@ -95,16 +95,16 @@ export function validateHooksUsage(
   const unconditionalBlocks = computeUnconditionalBlocks(fn);
 
   const errors = new CompilerError();
-  const errorsByPlace = new Map<t.SourceLocation, CompilerErrorDetail>();
+  const errorsByPlace = new Map<t.SourceLocation, CompilerDiagnostic>();
 
   function recordError(
     loc: SourceLocation,
-    errorDetail: CompilerErrorDetail,
+    diagnostic: CompilerDiagnostic,
   ): void {
     if (typeof loc === 'symbol') {
-      errors.pushErrorDetail(errorDetail);
+      errors.pushDiagnostic(diagnostic);
     } else {
-      errorsByPlace.set(loc, errorDetail);
+      errorsByPlace.set(loc, diagnostic);
     }
   }
 
@@ -112,7 +112,7 @@ export function validateHooksUsage(
     // Once a particular hook has a conditional call error, don't report any further issues for this hook
     setKind(place, Kind.Error);
 
-    const reason =
+    const description =
       'Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)';
     const previousError =
       typeof place.loc !== 'symbol' ? errorsByPlace.get(place.loc) : undefined;
@@ -121,16 +121,19 @@ export function validateHooksUsage(
      * In some circumstances such as optional calls, we may first encounter a "hook may not be referenced as normal values" error.
      * If that same place is also used as a conditional call, upgrade the error to a conditonal hook error
      */
-    if (previousError === undefined || previousError.reason !== reason) {
+    if (previousError === undefined || previousError.reason !== description) {
       recordError(
         place.loc,
-        new CompilerErrorDetail({
+        CompilerDiagnostic.create({
           category: ErrorCategory.Hooks,
-          description: null,
-          reason,
-          loc: place.loc,
           severity: ErrorSeverity.InvalidReact,
+          reason: 'Cannot call hooks conditionally',
+          description,
           suggestions: null,
+        }).withDetail({
+          kind: 'error',
+          loc: place.loc,
+          message: 'Cannot call hook conditionally',
         }),
       );
     }
@@ -141,14 +144,17 @@ export function validateHooksUsage(
     if (previousError === undefined) {
       recordError(
         place.loc,
-        new CompilerErrorDetail({
+        CompilerDiagnostic.create({
           category: ErrorCategory.Hooks,
-          description: null,
-          reason:
-            'Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values',
-          loc: place.loc,
           severity: ErrorSeverity.InvalidReact,
+          reason: 'Cannot reference hooks as regular values',
+          description:
+            'Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values',
           suggestions: null,
+        }).withDetail({
+          kind: 'error',
+          loc: place.loc,
+          message: 'Hooks may not be referenced as values',
         }),
       );
     }
@@ -159,14 +165,17 @@ export function validateHooksUsage(
     if (previousError === undefined) {
       recordError(
         place.loc,
-        new CompilerErrorDetail({
+        CompilerDiagnostic.create({
           category: ErrorCategory.Hooks,
-          description: null,
-          reason:
-            'Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks',
-          loc: place.loc,
           severity: ErrorSeverity.InvalidReact,
+          reason: 'Hooks must be the same on every render',
+          description:
+            'Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks',
           suggestions: null,
+        }).withDetail({
+          kind: 'error',
+          loc: place.loc,
+          message: 'This value may change to a different function',
         }),
       );
     }
@@ -427,8 +436,8 @@ export function validateHooksUsage(
     }
   }
 
-  for (const [, error] of errorsByPlace) {
-    errors.pushErrorDetail(error);
+  for (const [, diagnostic] of errorsByPlace) {
+    errors.pushDiagnostic(diagnostic);
   }
   return errors.asResult();
 }
@@ -450,15 +459,18 @@ function visitFunctionExpression(errors: CompilerError, fn: HIRFunction): void {
               : instr.value.property;
           const hookKind = getHookKind(fn.env, callee.identifier);
           if (hookKind != null) {
-            errors.pushErrorDetail(
-              new CompilerErrorDetail({
+            errors.pushDiagnostic(
+              CompilerDiagnostic.create({
                 category: ErrorCategory.Hooks,
                 severity: ErrorSeverity.InvalidReact,
-                reason:
+                reason: 'Cannot call hooks within function expressions',
+                description:
                   'Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)',
-                loc: callee.loc,
-                description: `Cannot call ${hookKind === 'Custom' ? 'hook' : hookKind} within a function expression`,
                 suggestions: null,
+              }).withDetail({
+                kind: 'error',
+                loc: callee.loc,
+                message: `Cannot call ${hookKind === 'Custom' ? 'hook' : hookKind} within a function expression`,
               }),
             );
           }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-ref-in-effect-hint.expect.md

@@ -1,37 +0,0 @@
-
-## Input
-
-```javascript
-// Fixture to test that we show a hint to name as `ref` or `-Ref` when attempting
-// to assign .current inside an effect
-function Component({foo}) {
-  useEffect(() => {
-    foo.current = true;
-  }, [foo]);
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: This value cannot be modified
-
-Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
-
-error.assign-ref-in-effect-hint.ts:5:4
-  3 | function Component({foo}) {
-  4 |   useEffect(() => {
-> 5 |     foo.current = true;
-    |     ^^^ `foo` cannot be modified
-  6 |   }, [foo]);
-  7 | }
-  8 |
-
-Hint: If this value is a Ref (value returned by `useRef()`), rename the variable to end in "Ref".
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-ref-in-effect-hint.js

@@ -1,7 +0,0 @@
-// Fixture to test that we show a hint to name as `ref` or `-Ref` when attempting
-// to assign .current inside an effect
-function Component({foo}) {
-  useEffect(() => {
-    foo.current = true;
-  }, [foo]);
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hook-unknown-hook-react-namespace.expect.md

@@ -18,13 +18,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.conditional-hook-unknown-hook-react-namespace.ts:4:8
   2 |   let x = null;
   3 |   if (props.cond) {
 > 4 |     x = React.useNonexistentHook();
-    |         ^^^^^^^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |         ^^^^^^^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
   5 |   }
   6 |   return x;
   7 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hooks-as-method-call.expect.md

@@ -18,13 +18,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.conditional-hooks-as-method-call.ts:4:8
   2 |   let x = null;
   3 |   if (props.cond) {
 > 4 |     x = Foo.useFoo();
-    |         ^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |         ^^^^^^^^^^ Cannot call hook conditionally
   5 |   }
   6 |   return x;
   7 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-property-load-local-hook.expect.md

@@ -25,24 +25,28 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 2 errors:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.hook-property-load-local-hook.ts:7:12
    5 |
    6 | function Foo() {
 >  7 |   let bar = useFoo.useBar;
-     |             ^^^^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+     |             ^^^^^^^^^^^^^ Hooks may not be referenced as values
    8 |   return bar();
    9 | }
   10 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.hook-property-load-local-hook.ts:8:9
    6 | function Foo() {
    7 |   let bar = useFoo.useBar;
 >  8 |   return bar();
-     |          ^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+     |          ^^^ Hooks may not be referenced as values
    9 | }
   10 |
   11 | export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-hook-to-local.expect.md

@@ -16,12 +16,14 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-assign-hook-to-local.ts:2:12
   1 | function Component(props) {
 > 2 |   const x = useState;
-    |             ^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |             ^^^^^^^^ Hooks may not be referenced as values
   3 |   const state = x(null);
   4 |   return state[0];
   5 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-hook-import.expect.md

@@ -20,13 +20,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-conditional-call-aliased-hook-import.ts:6:11
   4 |   let data;
   5 |   if (props.cond) {
 > 6 |     data = readFragment();
-    |            ^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |            ^^^^^^^^^^^^ Cannot call hook conditionally
   7 |   }
   8 |   return data;
   9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-react-hook.expect.md

@@ -20,13 +20,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-conditional-call-aliased-react-hook.ts:6:10
   4 |   let s;
   5 |   if (props.cond) {
 > 6 |     [s] = state();
-    |           ^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |           ^^^^^ Cannot call hook conditionally
   7 |   }
   8 |   return s;
   9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-non-hook-imported-as-hook.expect.md

@@ -20,13 +20,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-conditional-call-non-hook-imported-as-hook.ts:6:11
   4 |   let data;
   5 |   if (props.cond) {
 > 6 |     data = useArray();
-    |            ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |            ^^^^^^^^ Cannot call hook conditionally
   7 |   }
   8 |   return data;
   9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.expect.md

@@ -38,8 +38,6 @@ error.invalid-mutate-context-in-callback.ts:12:4
   13 |   };
   14 |   return <div onClick={onClick} />;
   15 | }
-
-Hint: If this value is a Ref (value returned by `useRef()`), rename the variable to end in "Ref".
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-call-arg.expect.md

@@ -14,12 +14,14 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-pass-hook-as-call-arg.ts:2:13
   1 | function Component(props) {
 > 2 |   return foo(useFoo);
-    |              ^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |              ^^^^^^ Hooks may not be referenced as values
   3 | }
   4 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-prop.expect.md

@@ -14,12 +14,14 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-pass-hook-as-prop.ts:2:21
   1 | function Component(props) {
 > 2 |   return <Child foo={useFoo} />;
-    |                      ^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                      ^^^^^^ Hooks may not be referenced as values
   3 | }
   4 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ternary-with-hook-values.expect.md

@@ -15,43 +15,51 @@ function Component(props) {
 ```
 Found 4 errors:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-ternary-with-hook-values.ts:2:25
   1 | function Component(props) {
 > 2 |   const x = props.cond ? useA : useB;
-    |                          ^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                          ^^^^ Hooks may not be referenced as values
   3 |   return x();
   4 | }
   5 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-ternary-with-hook-values.ts:2:32
   1 | function Component(props) {
 > 2 |   const x = props.cond ? useA : useB;
-    |                                 ^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                                 ^^^^ Hooks may not be referenced as values
   3 |   return x();
   4 | }
   5 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-ternary-with-hook-values.ts:2:12
   1 | function Component(props) {
 > 2 |   const x = props.cond ? useA : useB;
-    |             ^^^^^^^^^^^^^^^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |             ^^^^^^^^^^^^^^^^^^^^^^^^ Hooks may not be referenced as values
   3 |   return x();
   4 | }
   5 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-ternary-with-hook-values.ts:3:9
   1 | function Component(props) {
   2 |   const x = props.cond ? useA : useB;
 > 3 |   return x();
-    |          ^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |          ^ Hooks may not be referenced as values
   4 | }
   5 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.propertyload-hook.expect.md

@@ -15,23 +15,27 @@ function Component() {
 ```
 Found 2 errors:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.propertyload-hook.ts:2:12
   1 | function Component() {
 > 2 |   const x = Foo.useFoo;
-    |             ^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |             ^^^^^^^^^^ Hooks may not be referenced as values
   3 |   return x();
   4 | }
   5 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.propertyload-hook.ts:3:9
   1 | function Component() {
   2 |   const x = Foo.useFoo;
 > 3 |   return x();
-    |          ^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |          ^ Hooks may not be referenced as values
   4 | }
   5 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-3d692676194b.expect.md

@@ -22,15 +22,15 @@ const ComponentWithHookInsideCallback = React.forwardRef((props, ref) => {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.bail.rules-of-hooks-3d692676194b.ts:8:4
    6 | const ComponentWithHookInsideCallback = React.forwardRef((props, ref) => {
    7 |   useEffect(() => {
 >  8 |     useHookInsideCallback();
-     |     ^^^^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^^^^^^^^^^^^^ Cannot call hook within a function expression
    9 |   });
   10 |   return <button {...props} ref={ref} />;
   11 | });

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-8503ca76d6f8.expect.md

@@ -22,15 +22,15 @@ const ComponentWithHookInsideCallback = React.memo(props => {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.bail.rules-of-hooks-8503ca76d6f8.ts:8:4
    6 | const ComponentWithHookInsideCallback = React.memo(props => {
    7 |   useEffect(() => {
 >  8 |     useHookInsideCallback();
-     |     ^^^^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^^^^^^^^^^^^^ Cannot call hook within a function expression
    9 |   });
   10 |   return <button {...props} />;
   11 | });

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-call-phi-possibly-hook.expect.md

@@ -20,35 +20,41 @@ function Component(props) {
 ```
 Found 3 errors:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-call-phi-possibly-hook.ts:3:31
   1 | function Component(props) {
   2 |   // This is a violation of using a hook as a normal value rule:
 > 3 |   const getUser = props.cond ? useGetUser : emptyFunction;
-    |                                ^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                                ^^^^^^^^^^ Hooks may not be referenced as values
   4 |
   5 |   // Ideally we would report a "conditional hook call" error here.
   6 |   // It's an unconditional call, but the value may or may not be a hook.
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-call-phi-possibly-hook.ts:3:18
   1 | function Component(props) {
   2 |   // This is a violation of using a hook as a normal value rule:
 > 3 |   const getUser = props.cond ? useGetUser : emptyFunction;
-    |                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks may not be referenced as values
   4 |
   5 |   // Ideally we would report a "conditional hook call" error here.
   6 |   // It's an unconditional call, but the value may or may not be a hook.
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-call-phi-possibly-hook.ts:8:9
    6 |   // It's an unconditional call, but the value may or may not be a hook.
    7 |   // TODO: report a conditional hook call error here
 >  8 |   return getUser();
-     |          ^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+     |          ^^^^^^^ Hooks may not be referenced as values
    9 | }
   10 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-local-named-like-hook.expect.md

@@ -19,13 +19,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-conditionally-call-local-named-like-hook.ts:6:4
   4 |   const useFoo = makeObject_Primitives();
   5 |   if (props.cond) {
 > 6 |     useFoo();
-    |     ^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |     ^^^^^^ Cannot call hook conditionally
   7 |   }
   8 | }
   9 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-prop-named-like-hook.expect.md

@@ -16,13 +16,15 @@ function Component({cond, useFoo}) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-conditionally-call-prop-named-like-hook.ts:3:4
   1 | function Component({cond, useFoo}) {
   2 |   if (cond) {
 > 3 |     useFoo();
-    |     ^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |     ^^^^^^ Cannot call hook conditionally
   4 |   }
   5 | }
   6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-methodcall-hooklike-property-of-local.expect.md

@@ -19,13 +19,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-conditionally-methodcall-hooklike-property-of-local.ts:6:4
   4 |   const local = makeObject_Primitives();
   5 |   if (props.cond) {
 > 6 |     local.useFoo();
-    |     ^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |     ^^^^^^^^^^^^ Cannot call hook conditionally
   7 |   }
   8 | }
   9 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-condtionally-call-hooklike-property-of-local.expect.md

@@ -20,13 +20,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-condtionally-call-hooklike-property-of-local.ts:7:4
    5 |   if (props.cond) {
    6 |     const foo = local.useFoo;
 >  7 |     foo();
-     |     ^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^ Cannot call hook conditionally
    8 |   }
    9 | }
   10 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-dynamic-hook-via-hooklike-local.expect.md

@@ -16,13 +16,15 @@ function Component() {
 ```
 Found 1 error:
 
-Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+Error: Hooks must be the same on every render
+
+Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
 
 error.invalid-dynamic-hook-via-hooklike-local.ts:4:2
   2 |   const someFunction = useContext(FooContext);
   3 |   const useOhItsNamedLikeAHookNow = someFunction;
 > 4 |   useOhItsNamedLikeAHookNow();
-    |   ^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^ This value may change to a different function
   5 | }
   6 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-after-early-return.expect.md

@@ -17,13 +17,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-hook-after-early-return.ts:5:9
   3 |     return null;
   4 |   }
 > 5 |   return useHook();
-    |          ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |          ^^^^^^^ Cannot call hook conditionally
   6 | }
   7 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-conditional-test.expect.md

@@ -15,12 +15,14 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-hook-as-conditional-test.ts:2:26
   1 | function Component(props) {
 > 2 |   const x = props.cond ? (useFoo ? 1 : 2) : 3;
-    |                           ^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                           ^^^^^^ Hooks may not be referenced as values
   3 |   return x;
   4 | }
   5 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-prop.expect.md

@@ -14,12 +14,14 @@ function Component({useFoo}) {
 ```
 Found 1 error:
 
-Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+Error: Hooks must be the same on every render
+
+Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
 
 error.invalid-hook-as-prop.ts:2:2
   1 | function Component({useFoo}) {
 > 2 |   useFoo();
-    |   ^^^^^^ Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+    |   ^^^^^^ This value may change to a different function
   3 | }
   4 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-for.expect.md

@@ -18,24 +18,28 @@ function Component(props) {
 ```
 Found 2 errors:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-hook-for.ts:4:9
   2 |   let i = 0;
   3 |   for (let x = 0; useHook(x) < 10; useHook(i), x++) {
 > 4 |     i += useHook(x);
-    |          ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |          ^^^^^^^ Cannot call hook conditionally
   5 |   }
   6 |   return i;
   7 | }
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-hook-for.ts:3:35
   1 | function Component(props) {
   2 |   let i = 0;
 > 3 |   for (let x = 0; useHook(x) < 10; useHook(i), x++) {
-    |                                    ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |                                    ^^^^^^^ Cannot call hook conditionally
   4 |     i += useHook(x);
   5 |   }
   6 |   return i;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-hook-return.expect.md

@@ -16,13 +16,15 @@ function useFoo({data}) {
 ```
 Found 1 error:
 
-Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+Error: Hooks must be the same on every render
+
+Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
 
 error.invalid-hook-from-hook-return.ts:3:14
   1 | function useFoo({data}) {
   2 |   const useMedia = useVideoPlayer();
 > 3 |   const foo = useMedia();
-    |               ^^^^^^^^ Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+    |               ^^^^^^^^ This value may change to a different function
   4 |   return foo;
   5 | }
   6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-property-of-other-hook.expect.md

@@ -16,13 +16,15 @@ function useFoo({data}) {
 ```
 Found 1 error:
 
-Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+Error: Hooks must be the same on every render
+
+Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
 
 error.invalid-hook-from-property-of-other-hook.ts:3:14
   1 | function useFoo({data}) {
   2 |   const player = useVideoPlayer();
 > 3 |   const foo = player.useMedia();
-    |               ^^^^^^^^^^^^^^^ Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+    |               ^^^^^^^^^^^^^^^ This value may change to a different function
   4 |   return foo;
   5 | }
   6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-alternate.expect.md

@@ -19,13 +19,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-hook-if-alternate.ts:5:8
   3 |   if (props.cond) {
   4 |   } else {
 > 5 |     x = useHook();
-    |         ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |         ^^^^^^^ Cannot call hook conditionally
   6 |   }
   7 |   return x;
   8 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-consequent.expect.md

@@ -18,13 +18,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-hook-if-consequent.ts:4:8
   2 |   let x = null;
   3 |   if (props.cond) {
 > 4 |     x = useHook();
-    |         ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |         ^^^^^^^ Cannot call hook conditionally
   5 |   }
   6 |   return x;
   7 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-function-expression-object-expression.expect.md

@@ -30,15 +30,15 @@ function Component() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-hook-in-nested-function-expression-object-expression.ts:10:21
    8 |           const y = {
    9 |             inner() {
 > 10 |               return useFoo();
-     |                      ^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |                      ^^^^^^ Cannot call hook within a function expression
   11 |             },
   12 |           };
   13 |           return y;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-object-method.expect.md

@@ -26,15 +26,15 @@ function Component() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-hook-in-nested-object-method.ts:8:17
    6 |       const y = {
    7 |         inner() {
 >  8 |           return useFoo();
-     |                  ^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |                  ^^^^^^ Cannot call hook within a function expression
    9 |         },
   10 |       };
   11 |       return y;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-methodcall.expect.md

@@ -15,12 +15,14 @@ function Component() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-hook-optional-methodcall.ts:2:19
   1 | function Component() {
 > 2 |   const {result} = Module.useConditionalHook?.() ?? {};
-    |                    ^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |                    ^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
   3 |   return result;
   4 | }
   5 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-property.expect.md

@@ -15,12 +15,14 @@ function Component() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-hook-optional-property.ts:2:19
   1 | function Component() {
 > 2 |   const {result} = Module?.useConditionalHook() ?? {};
-    |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
   3 |   return result;
   4 | }
   5 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optionalcall.expect.md

@@ -15,12 +15,14 @@ function Component() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-hook-optionalcall.ts:2:19
   1 | function Component() {
 > 2 |   const {result} = useConditionalHook?.() ?? {};
-    |                    ^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |                    ^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
   3 |   return result;
   4 | }
   5 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-reassigned-in-conditional.expect.md

@@ -16,35 +16,41 @@ function Component(props) {
 ```
 Found 3 errors:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-hook-reassigned-in-conditional.ts:3:20
   1 | function Component(props) {
   2 |   let y;
 > 3 |   props.cond ? (y = useFoo) : null;
-    |                     ^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                     ^^^^^^ Hooks may not be referenced as values
   4 |   return y();
   5 | }
   6 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-hook-reassigned-in-conditional.ts:3:16
   1 | function Component(props) {
   2 |   let y;
 > 3 |   props.cond ? (y = useFoo) : null;
-    |                 ^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                 ^ Hooks may not be referenced as values
   4 |   return y();
   5 | }
   6 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-hook-reassigned-in-conditional.ts:4:9
   2 |   let y;
   3 |   props.cond ? (y = useFoo) : null;
 > 4 |   return y();
-    |          ^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |          ^ Hooks may not be referenced as values
   5 | }
   6 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-1b9527f967f3.expect.md

@@ -27,46 +27,54 @@ function useHookInLoops() {
 ```
 Found 4 errors:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-1b9527f967f3.ts:7:4
    5 | function useHookInLoops() {
    6 |   while (a) {
 >  7 |     useHook1();
-     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^ Cannot call hook conditionally
    8 |     if (b) return;
    9 |     useHook2();
   10 |   }
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-1b9527f967f3.ts:9:4
    7 |     useHook1();
    8 |     if (b) return;
 >  9 |     useHook2();
-     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^ Cannot call hook conditionally
   10 |   }
   11 |   while (c) {
   12 |     useHook3();
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-1b9527f967f3.ts:12:4
   10 |   }
   11 |   while (c) {
 > 12 |     useHook3();
-     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^ Cannot call hook conditionally
   13 |     if (d) return;
   14 |     useHook4();
   15 |   }
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-1b9527f967f3.ts:14:4
   12 |     useHook3();
   13 |     if (d) return;
 > 14 |     useHook4();
-     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^ Cannot call hook conditionally
   15 |   }
   16 | }
   17 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-2aabd222fc6a.expect.md

@@ -20,13 +20,15 @@ function ComponentWithConditionalHook() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-2aabd222fc6a.ts:7:4
    5 | function ComponentWithConditionalHook() {
    6 |   if (cond) {
 >  7 |     useConditionalHook();
-     |     ^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
    8 |   }
    9 | }
   10 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-49d341e5d68f.expect.md

@@ -21,13 +21,15 @@ function useLabeledBlock() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-49d341e5d68f.ts:8:4
    6 |   label: {
    7 |     if (a) break label;
 >  8 |     useHook();
-     |     ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^ Cannot call hook conditionally
    9 |   }
   10 | }
   11 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-79128a755612.expect.md

@@ -20,13 +20,15 @@ function ComponentWithHookInsideLoop() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-79128a755612.ts:7:4
    5 | function ComponentWithHookInsideLoop() {
    6 |   while (cond) {
 >  7 |     useHookInsideLoop();
-     |     ^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
    8 |   }
    9 | }
   10 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9718e30b856c.expect.md

@@ -24,13 +24,15 @@ function useHook() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-9718e30b856c.ts:12:2
   10 |     console.log('false');
   11 |   }
 > 12 |   useState();
-     |   ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |   ^^^^^^^^ Cannot call hook conditionally
   13 | }
   14 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9bf17c174134.expect.md

@@ -19,24 +19,28 @@ function useHook() {
 ```
 Found 2 errors:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-9bf17c174134.ts:6:7
   4 | // This *must* be invalid.
   5 | function useHook() {
 > 6 |   a && useHook1();
-    |        ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |        ^^^^^^^^ Cannot call hook conditionally
   7 |   b && useHook2();
   8 | }
   9 |
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-9bf17c174134.ts:7:7
   5 | function useHook() {
   6 |   a && useHook1();
 > 7 |   b && useHook2();
-    |        ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |        ^^^^^^^^ Cannot call hook conditionally
   8 | }
   9 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-b4dcda3d60ed.expect.md

@@ -18,13 +18,15 @@ function ComponentWithTernaryHook() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-b4dcda3d60ed.ts:6:9
   4 | // This *must* be invalid.
   5 | function ComponentWithTernaryHook() {
 > 6 |   cond ? useTernaryHook() : null;
-    |          ^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |          ^^^^^^^^^^^^^^ Cannot call hook conditionally
   7 | }
   8 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-c906cace44e9.expect.md

@@ -19,13 +19,15 @@ function useHook() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-c906cace44e9.ts:7:2
   5 | function useHook() {
   6 |   if (a) return;
 > 7 |   useState();
-    |   ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |   ^^^^^^^^ Cannot call hook conditionally
   8 | }
   9 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d740d54e9c21.expect.md

@@ -20,13 +20,15 @@ function normalFunctionWithConditionalHook() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-d740d54e9c21.ts:7:4
    5 | function normalFunctionWithConditionalHook() {
    6 |   if (cond) {
 >  7 |     useHookInsideNormalFunction();
-     |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
    8 |   }
    9 | }
   10 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d85c144bdf40.expect.md

@@ -22,24 +22,28 @@ function useHookInLoops() {
 ```
 Found 2 errors:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-d85c144bdf40.ts:7:4
    5 | function useHookInLoops() {
    6 |   while (a) {
 >  7 |     useHook1();
-     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^ Cannot call hook conditionally
    8 |     if (b) continue;
    9 |     useHook2();
   10 |   }
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-d85c144bdf40.ts:9:4
    7 |     useHook1();
    8 |     if (b) continue;
 >  9 |     useHook2();
-     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^ Cannot call hook conditionally
   10 |   }
   11 | }
   12 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-ea7c2fb545a9.expect.md

@@ -20,13 +20,15 @@ function useHookWithConditionalHook() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-ea7c2fb545a9.ts:7:4
    5 | function useHookWithConditionalHook() {
    6 |   if (cond) {
 >  7 |     useConditionalHook();
-     |     ^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
    8 |   }
    9 | }
   10 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f3d6c5e9c83d.expect.md

@@ -24,13 +24,15 @@ function useHook() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-f3d6c5e9c83d.ts:12:2
   10 |   }
   11 |   if (a) return;
 > 12 |   useState();
-     |   ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |   ^^^^^^^^ Cannot call hook conditionally
   13 | }
   14 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f69800950ff0.expect.md

@@ -20,35 +20,41 @@ function useHook({bar}) {
 ```
 Found 3 errors:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-f69800950ff0.ts:6:20
   4 | // This *must* be invalid.
   5 | function useHook({bar}) {
 > 6 |   let foo1 = bar && useState();
-    |                     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |                     ^^^^^^^^ Cannot call hook conditionally
   7 |   let foo2 = bar || useState();
   8 |   let foo3 = bar ?? useState();
   9 | }
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-f69800950ff0.ts:7:20
    5 | function useHook({bar}) {
    6 |   let foo1 = bar && useState();
 >  7 |   let foo2 = bar || useState();
-     |                     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |                     ^^^^^^^^ Cannot call hook conditionally
    8 |   let foo3 = bar ?? useState();
    9 | }
   10 |
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-rules-of-hooks-f69800950ff0.ts:8:20
    6 |   let foo1 = bar && useState();
    7 |   let foo2 = bar || useState();
 >  8 |   let foo3 = bar ?? useState();
-     |                     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |                     ^^^^^^^^ Cannot call hook conditionally
    9 | }
   10 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0a1dbff27ba0.expect.md

@@ -20,15 +20,15 @@ function createHook() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-0a1dbff27ba0.ts:6:6
   4 |   return function useHookWithConditionalHook() {
   5 |     if (cond) {
 > 6 |       useConditionalHook();
-    |       ^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |       ^^^^^^^^^^^^^^^^^^ Cannot call hook within a function expression
   7 |     }
   8 |   };
   9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0de1224ce64b.expect.md

@@ -20,28 +20,28 @@ function createComponent() {
 ```
 Found 2 errors:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-0de1224ce64b.ts:6:6
   4 |   return function ComponentWithHookInsideCallback() {
   5 |     useEffect(() => {
 > 6 |       useHookInsideCallback();
-    |       ^^^^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |       ^^^^^^^^^^^^^^^^^^^^^ Cannot call hook within a function expression
   7 |     });
   8 |   };
   9 | }
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call useEffect within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-0de1224ce64b.ts:5:4
   3 | function createComponent() {
   4 |   return function ComponentWithHookInsideCallback() {
 > 5 |     useEffect(() => {
-    |     ^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |     ^^^^^^^^^ Cannot call useEffect within a function expression
   6 |       useHookInsideCallback();
   7 |     });
   8 |   };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-449a37146a83.expect.md

@@ -20,15 +20,15 @@ function createComponent() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call useState within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-449a37146a83.ts:6:6
   4 |   return function ComponentWithHookInsideCallback() {
   5 |     function handleClick() {
 > 6 |       useState();
-    |       ^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |       ^^^^^^^^ Cannot call useState within a function expression
   7 |     }
   8 |   };
   9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-76a74b4666e9.expect.md

@@ -18,15 +18,15 @@ function ComponentWithHookInsideCallback() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call useState within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-76a74b4666e9.ts:5:4
   3 | function ComponentWithHookInsideCallback() {
   4 |   function handleClick() {
 > 5 |     useState();
-    |     ^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |     ^^^^^^^^ Cannot call useState within a function expression
   6 |   }
   7 | }
   8 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d842d36db450.expect.md

@@ -20,15 +20,15 @@ function createComponent() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-d842d36db450.ts:6:6
   4 |   return function ComponentWithConditionalHook() {
   5 |     if (cond) {
 > 6 |       useConditionalHook();
-    |       ^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |       ^^^^^^^^^^^^^^^^^^ Cannot call hook within a function expression
   7 |     }
   8 |   };
   9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d952b82c2597.expect.md

@@ -18,15 +18,15 @@ function ComponentWithHookInsideCallback() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-d952b82c2597.ts:5:4
   3 | function ComponentWithHookInsideCallback() {
   4 |   useEffect(() => {
 > 5 |     useHookInsideCallback();
-    |     ^^^^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |     ^^^^^^^^^^^^^^^^^^^^^ Cannot call hook within a function expression
   6 |   });
   7 | }
   8 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-368024110a58.expect.md

@@ -22,13 +22,15 @@ const FancyButton = forwardRef(function (props, ref) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 todo.error.invalid-rules-of-hooks-368024110a58.ts:8:4
    6 | const FancyButton = forwardRef(function (props, ref) {
    7 |   if (props.fancy) {
 >  8 |     useCustomHook();
-     |     ^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^^^^^ Cannot call hook conditionally
    9 |   }
   10 |   return <button ref={ref}>{props.children}</button>;
   11 | });

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-8566f9a360e2.expect.md

@@ -22,13 +22,15 @@ const MemoizedButton = memo(function (props) {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 todo.error.invalid-rules-of-hooks-8566f9a360e2.ts:8:4
    6 | const MemoizedButton = memo(function (props) {
    7 |   if (props.fancy) {
 >  8 |     useCustomHook();
-     |     ^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^^^^^ Cannot call hook conditionally
    9 |   }
   10 |   return <button>{props.children}</button>;
   11 | });

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-a0058f0b446d.expect.md

@@ -21,13 +21,15 @@ function ComponentWithConditionalHook() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 todo.error.invalid-rules-of-hooks-a0058f0b446d.ts:8:4
    6 | function ComponentWithConditionalHook() {
    7 |   if (cond) {
 >  8 |     Namespace.useConditionalHook();
-     |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
    9 |   }
   10 | }
   11 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-27c18dc8dad2.expect.md

@@ -22,13 +22,15 @@ const FancyButton = React.forwardRef((props, ref) => {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 todo.error.rules-of-hooks-27c18dc8dad2.ts:8:4
    6 | const FancyButton = React.forwardRef((props, ref) => {
    7 |   if (props.fancy) {
 >  8 |     useCustomHook();
-     |     ^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^^^^^ Cannot call hook conditionally
    9 |   }
   10 |   return <button ref={ref}>{props.children}</button>;
   11 | });

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-d0935abedc42.expect.md

@@ -21,13 +21,15 @@ React.unknownFunction((foo, bar) => {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 todo.error.rules-of-hooks-d0935abedc42.ts:8:4
    6 | React.unknownFunction((foo, bar) => {
    7 |   if (foo) {
 >  8 |     useNotAHook(bar);
-     |     ^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^^^ Cannot call hook conditionally
    9 |   }
   10 | });
   11 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-e29c874aa913.expect.md

@@ -22,13 +22,15 @@ function useHook() {
 ```
 Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks conditionally
+
+Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 todo.error.rules-of-hooks-e29c874aa913.ts:9:4
    7 |   try {
    8 |     f();
 >  9 |     useState();
-     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^ Cannot call hook conditionally
   10 |   } catch {}
   11 | }
   12 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-nested-use-effect.expect.md

@@ -30,15 +30,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call useEffect within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-nested-use-effect.ts:9:4
    7 |   };
    8 |   useEffect(() => {
 >  9 |     useEffect(() => {
-     |     ^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^ Cannot call useEffect within a function expression
   10 |       function nested() {
   11 |         fire(foo(props));
   12 |       }

compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts

@@ -68,9 +68,7 @@ testRule('plugin-recommended', TestRecommendedRules, {
           </>;
         }
       `,
-      errors: [
-        makeTestCaseError('Hooks must always be called in a consistent order'),
-      ],
+      errors: [makeTestCaseError('Cannot call hooks conditionally')],
     },
     {
       name: 'Multiple diagnostics within the same file are surfaced',
@@ -84,8 +82,8 @@ testRule('plugin-recommended', TestRecommendedRules, {
           return props.cond && useConditionalHook();
         }`,
       errors: [
-        makeTestCaseError('Hooks must always be called in a consistent order'),
-        makeTestCaseError('Hooks must always be called in a consistent order'),
+        makeTestCaseError('Cannot call hooks conditionally'),
+        makeTestCaseError('Cannot call hooks conditionally'),
       ],
     },
     {
@@ -98,9 +96,7 @@ testRule('plugin-recommended', TestRecommendedRules, {
 
         }
       `,
-      errors: [
-        makeTestCaseError('Hooks must always be called in a consistent order'),
-      ],
+      errors: [makeTestCaseError('Cannot call hooks conditionally')],
     },
     {
       name: 'Multiple non-fatal useMemo diagnostics are surfaced',

compiler/packages/eslint-plugin-react-compiler/src/index.ts

@@ -15,7 +15,7 @@ const configs = {
   recommended: {
     plugins: {
       'react-compiler': {
-        rules: allRules,
+        rules: recommendedRules,
       },
     },
     rules: Object.fromEntries(

compiler/packages/eslint-plugin-react-compiler/src/shared/RunReactCompiler.ts

@@ -112,6 +112,28 @@ function runReactCompilerImpl({
   userOpts,
 }: RunParams): RunCacheEntry {
   // Compat with older versions of eslint
+  for (const [key, entry] of Object.entries(userOpts)) {
+    if (key === 'environment' && COMPILER_OPTIONS.environment != null) {
+      for (const envKey of Object.keys(entry as Record<string, any>)) {
+        if (
+          Object.prototype.hasOwnProperty.call(
+            COMPILER_OPTIONS.environment,
+            envKey,
+          ) &&
+          !isDeepStrictEqual(
+            (entry as Record<string, any>)[envKey],
+            (COMPILER_OPTIONS.environment as Record<string, any>)[envKey],
+          )
+        ) {
+          console.warn('Conflicting environment option detected: ' + envKey);
+        }
+      }
+    } else if (Object.prototype.hasOwnProperty.call(COMPILER_OPTIONS, key)) {
+      if (!isDeepStrictEqual(entry, (COMPILER_OPTIONS as any)[key])) {
+        console.warn('Conflicting option detected: ' + key);
+      }
+    }
+  }
   const options: PluginOptions = parsePluginOptions({
     ...COMPILER_OPTIONS,
     ...userOpts,

compiler/scripts/build-eslint-docs.js

@@ -1,32 +0,0 @@
-const ReactCompiler = require('../packages/babel-plugin-react-compiler/dist');
-
-const combinedRules = [
-  {
-    name: 'rules-of-hooks',
-    recommended: true,
-    description:
-      'Validates that components and hooks follow the [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks)',
-  },
-  {
-    name: 'exhaustive-deps',
-    recommended: true,
-    description:
-      'Validates that hooks which accept dependency arrays (`useMemo()`, `useCallback()`, `useEffect()`, etc) ' +
-      'list all referenced variables in their dependency array. Referencing a value without including it in the ' +
-      'dependency array can lead to stale UI or callbacks.',
-  },
-  ...ReactCompiler.LintRules,
-];
-
-const printed = combinedRules
-  .filter(rule => rule.recommended)
-  .map(rule => {
-    return `
-## \`react-hooks/${rule.name}\`
-
-${rule.description}
-    `.trim();
-  })
-  .join('\n\n');
-
-console.log(printed);

fixtures/eslint-v9/eslint.config.ts

@@ -1,9 +1,7 @@
-import {defineConfig} from 'eslint/config';
-import reactHooks from 'eslint-plugin-react-hooks';
+import type {Linter} from 'eslint';
+import * as reactHooks from 'eslint-plugin-react-hooks';
 
-console.log(reactHooks.configs['recommended-latest']);
-
-export default defineConfig([
+export default [
   {
     languageOptions: {
       ecmaVersion: 'latest',
@@ -14,12 +12,11 @@ export default defineConfig([
         },
       },
     },
-    plugins: {
-      'react-hooks': reactHooks,
-    },
-    extends: ['react-hooks/recommended-latest'],
+  },
+  reactHooks.configs['recommended'],
+  {
     rules: {
       'react-hooks/exhaustive-deps': 'error',
     },
   },
-]);
+] satisfies Linter.Config[];

fixtures/eslint-v9/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "eslint-v9",
   "dependencies": {
-    "eslint": "^9.33.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-react-hooks": "link:../../build/oss-stable/eslint-plugin-react-hooks",
     "jiti": "^2.4.2"
   },

fixtures/eslint-v9/yarn.lock

@@ -221,31 +221,26 @@
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
   integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
 
-"@eslint/config-array@^0.21.0":
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/@eslint/config-array/-/config-array-0.21.0.tgz#abdbcbd16b124c638081766392a4d6b509f72636"
-  integrity sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==
+"@eslint/config-array@^0.19.2":
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@eslint/config-array/-/config-array-0.19.2.tgz#3060b809e111abfc97adb0bb1172778b90cb46aa"
+  integrity sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==
   dependencies:
     "@eslint/object-schema" "^2.1.6"
     debug "^4.3.1"
     minimatch "^3.1.2"
 
-"@eslint/config-helpers@^0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@eslint/config-helpers/-/config-helpers-0.3.1.tgz#d316e47905bd0a1a931fa50e669b9af4104d1617"
-  integrity sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==
-
-"@eslint/core@^0.15.2":
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/@eslint/core/-/core-0.15.2.tgz#59386327d7862cc3603ebc7c78159d2dcc4a868f"
-  integrity sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==
+"@eslint/core@^0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@eslint/core/-/core-0.12.0.tgz#5f960c3d57728be9f6c65bd84aa6aa613078798e"
+  integrity sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==
   dependencies:
     "@types/json-schema" "^7.0.15"
 
-"@eslint/eslintrc@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.3.1.tgz#e55f7f1dd400600dd066dbba349c4c0bac916964"
-  integrity sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==
+"@eslint/eslintrc@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.3.0.tgz#96a558f45842989cca7ea1ecd785ad5491193846"
+  integrity sha512-yaVPAiNAalnCZedKLdR21GOGILMLKPyqSLWaAjQFvYA2i/ciDi8ArYVr69Anohb6cH2Ukhqti4aFnYyPm8wdwQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
@@ -257,22 +252,22 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@9.33.0":
-  version "9.33.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.33.0.tgz#475c92fdddab59b8b8cab960e3de2564a44bf368"
-  integrity sha512-5K1/mKhWaMfreBGJTwval43JJmkip0RmM+3+IuqupeSKNC/Th2Kc7ucaq5ovTSra/OOKB9c58CGSz3QMVbWt0A==
+"@eslint/js@9.21.0":
+  version "9.21.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.21.0.tgz#4303ef4e07226d87c395b8fad5278763e9c15c08"
+  integrity sha512-BqStZ3HX8Yz6LvsF5ByXYrtigrV5AXADWLAGc7PH/1SxOb7/FIYYMszZZWiUou/GB9P2lXWk2SV4d+Z8h0nknw==
 
 "@eslint/object-schema@^2.1.6":
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.6.tgz#58369ab5b5b3ca117880c0f6c0b0f32f6950f24f"
   integrity sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==
 
-"@eslint/plugin-kit@^0.3.5":
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz#fd8764f0ee79c8ddab4da65460c641cefee017c5"
-  integrity sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==
+"@eslint/plugin-kit@^0.2.7":
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/@eslint/plugin-kit/-/plugin-kit-0.2.7.tgz#9901d52c136fb8f375906a73dcc382646c3b6a27"
+  integrity sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==
   dependencies:
-    "@eslint/core" "^0.15.2"
+    "@eslint/core" "^0.12.0"
     levn "^0.4.1"
 
 "@humanfs/core@^0.19.1":
@@ -355,11 +350,6 @@ acorn@^8.14.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
   integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
 
-acorn@^8.15.0:
-  version "8.15.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.15.0.tgz#a360898bc415edaac46c8241f6383975b930b816"
-  integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
-
 ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@@ -485,10 +475,10 @@ escape-string-regexp@^4.0.0:
   version "0.0.0"
   uid ""
 
-eslint-scope@^8.4.0:
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.4.0.tgz#88e646a207fad61436ffa39eb505147200655c82"
-  integrity sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==
+eslint-scope@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.2.0.tgz#377aa6f1cb5dc7592cfd0b7f892fd0cf352ce442"
+  integrity sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
@@ -503,24 +493,18 @@ eslint-visitor-keys@^4.2.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz#687bacb2af884fcdda8a6e7d65c606f46a14cd45"
   integrity sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==
 
-eslint-visitor-keys@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz#4cfea60fe7dd0ad8e816e1ed026c1d5251b512c1"
-  integrity sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==
-
-eslint@^9.33.0:
-  version "9.33.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.33.0.tgz#cc186b3d9eb0e914539953d6a178a5b413997b73"
-  integrity sha512-TS9bTNIryDzStCpJN93aC5VRSW3uTx9sClUn4B87pwiCaJh220otoI0X8mJKr+VcPtniMdN8GKjlwgWGUv5ZKA==
+eslint@^9.18.0:
+  version "9.21.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.21.0.tgz#b1c9c16f5153ff219791f627b94ab8f11f811591"
+  integrity sha512-KjeihdFqTPhOMXTt7StsDxriV4n66ueuF/jfPNC3j/lduHwr/ijDwJMsF+wyMJethgiKi5wniIE243vi07d3pg==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.12.1"
-    "@eslint/config-array" "^0.21.0"
-    "@eslint/config-helpers" "^0.3.1"
-    "@eslint/core" "^0.15.2"
-    "@eslint/eslintrc" "^3.3.1"
-    "@eslint/js" "9.33.0"
-    "@eslint/plugin-kit" "^0.3.5"
+    "@eslint/config-array" "^0.19.2"
+    "@eslint/core" "^0.12.0"
+    "@eslint/eslintrc" "^3.3.0"
+    "@eslint/js" "9.21.0"
+    "@eslint/plugin-kit" "^0.2.7"
     "@humanfs/node" "^0.16.6"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@humanwhocodes/retry" "^0.4.2"
@@ -531,9 +515,9 @@ eslint@^9.33.0:
     cross-spawn "^7.0.6"
     debug "^4.3.2"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^8.4.0"
-    eslint-visitor-keys "^4.2.1"
-    espree "^10.4.0"
+    eslint-scope "^8.2.0"
+    eslint-visitor-keys "^4.2.0"
+    espree "^10.3.0"
     esquery "^1.5.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
@@ -549,7 +533,7 @@ eslint@^9.33.0:
     natural-compare "^1.4.0"
     optionator "^0.9.3"
 
-espree@^10.0.1:
+espree@^10.0.1, espree@^10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/espree/-/espree-10.3.0.tgz#29267cf5b0cb98735b65e64ba07e0ed49d1eed8a"
   integrity sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==
@@ -558,15 +542,6 @@ espree@^10.0.1:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^4.2.0"
 
-espree@^10.4.0:
-  version "10.4.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-10.4.0.tgz#d54f4949d4629005a1fa168d937c3ff1f7e2a837"
-  integrity sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==
-  dependencies:
-    acorn "^8.15.0"
-    acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^4.2.1"
-
 esquery@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"

fixtures/flight/config/webpack.config.js

@@ -15,7 +15,6 @@ const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const DevToolsIgnorePlugin = require('devtools-ignore-webpack-plugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const paths = require('./paths');
 const modules = require('./modules');
@@ -686,15 +685,6 @@ module.exports = function (webpackEnv) {
           },
         }),
       // Fork Start
-      new DevToolsIgnorePlugin({
-        shouldIgnorePath: function (path) {
-          return (
-            path.includes('/node_modules/') ||
-            path.includes('/webpack/') ||
-            path.endsWith('/src/index.js')
-          );
-        },
-      }),
       new ReactFlightWebpackPlugin({
         isServer: false,
         clientReferences: {

fixtures/flight/package.json

@@ -29,7 +29,6 @@
     "concurrently": "^7.3.0",
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.2.0",
-    "devtools-ignore-webpack-plugin": "^0.2.0",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
     "file-loader": "^6.2.0",

fixtures/flight/server/region.js

@@ -58,8 +58,7 @@ function filterStackFrame(sourceURL, functionName) {
     sourceURL !== '' &&
     !sourceURL.startsWith('node:') &&
     !sourceURL.includes('node_modules') &&
-    !sourceURL.endsWith('library.js') &&
-    !sourceURL.includes('/server/region.js')
+    !sourceURL.endsWith('library.js')
   );
 }
 

fixtures/flight/yarn.lock

@@ -4614,11 +4614,6 @@ detect-port-alt@^1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
-devtools-ignore-webpack-plugin@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/devtools-ignore-webpack-plugin/-/devtools-ignore-webpack-plugin-0.2.0.tgz#a7b3d1bd0f593c7fee5cbb7534b07860e5e2447c"
-  integrity sha512-4P+1Y1VhSt1MRBRF6my8N1bs9nNMOFfIFSBHI6u18W73iCHWXNHTSWYeMoQQ72PIIHrP1q4koKpYg1Em3jb9Rw==
-
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -8655,7 +8650,16 @@ string-length@^5.0.1:
     char-regex "^2.0.0"
     strip-ansi "^7.0.1"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8726,7 +8730,14 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9441,7 +9452,16 @@ wordwrap@~1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

flow-typed.config.json

@@ -1,20 +0,0 @@
-{
-  "env": [
-    "bom",
-    "cssom",
-    "dom",
-    "geometry",
-    "html",
-    "node",
-    "serviceworkers",
-    "streams",
-    "web-animations"
-  ],
-  "ignore": [
-    "create-react-class",
-    "jest",
-    "regenerator-runtime",
-    "webpack",
-    "ws"
-  ]
-}

flow-typed/environments/cssom.js

@@ -1,414 +0,0 @@
-// flow-typed signature: ad7b684aa8897ecb82bcc3e009b9fc30
-// flow-typed version: 3e51657e95/cssom/flow_>=v0.261.x
-
-declare class StyleSheet {
-  disabled: boolean;
-  +href: string;
-  +media: MediaList;
-  +ownerNode: Node;
-  +parentStyleSheet: ?StyleSheet;
-  +title: string;
-  +type: string;
-}
-
-declare class StyleSheetList {
-  @@iterator(): Iterator<StyleSheet>;
-  length: number;
-  [index: number]: StyleSheet;
-}
-
-declare class MediaList {
-  @@iterator(): Iterator<string>;
-  mediaText: string;
-  length: number;
-  item(index: number): ?string;
-  deleteMedium(oldMedium: string): void;
-  appendMedium(newMedium: string): void;
-  [index: number]: string;
-}
-
-declare class CSSStyleSheet extends StyleSheet {
-  +cssRules: CSSRuleList;
-  +ownerRule: ?CSSRule;
-  deleteRule(index: number): void;
-  insertRule(rule: string, index: number): number;
-  replace(text: string): Promise<CSSStyleSheet>;
-  replaceSync(text: string): void;
-}
-
-declare class CSSGroupingRule extends CSSRule {
-  +cssRules: CSSRuleList;
-  deleteRule(index: number): void;
-  insertRule(rule: string, index: number): number;
-}
-
-declare class CSSConditionRule extends CSSGroupingRule {
-  conditionText: string;
-}
-
-declare class CSSMediaRule extends CSSConditionRule {
-  +media: MediaList;
-}
-
-declare class CSSStyleRule extends CSSRule {
-  selectorText: string;
-  +style: CSSStyleDeclaration;
-}
-
-declare class CSSSupportsRule extends CSSConditionRule {}
-
-declare class CSSRule {
-  cssText: string;
-  +parentRule: ?CSSRule;
-  +parentStyleSheet: ?CSSStyleSheet;
-  +type: number;
-  static STYLE_RULE: number;
-  static MEDIA_RULE: number;
-  static FONT_FACE_RULE: number;
-  static PAGE_RULE: number;
-  static IMPORT_RULE: number;
-  static CHARSET_RULE: number;
-  static UNKNOWN_RULE: number;
-  static KEYFRAMES_RULE: number;
-  static KEYFRAME_RULE: number;
-  static NAMESPACE_RULE: number;
-  static COUNTER_STYLE_RULE: number;
-  static SUPPORTS_RULE: number;
-  static DOCUMENT_RULE: number;
-  static FONT_FEATURE_VALUES_RULE: number;
-  static VIEWPORT_RULE: number;
-  static REGION_STYLE_RULE: number;
-}
-
-declare class CSSKeyframeRule extends CSSRule {
-  keyText: string;
-  +style: CSSStyleDeclaration;
-}
-
-declare class CSSKeyframesRule extends CSSRule {
-  name: string;
-  +cssRules: CSSRuleList;
-  appendRule(rule: string): void;
-  deleteRule(select: string): void;
-  findRule(select: string): CSSKeyframeRule | null;
-}
-
-declare class CSSRuleList {
-  @@iterator(): Iterator<CSSRule>;
-  length: number;
-  item(index: number): ?CSSRule;
-  [index: number]: CSSRule;
-}
-
-declare class CSSStyleDeclaration {
-  @@iterator(): Iterator<string>;
-  /* DOM CSS Properties */
-  alignContent: string;
-  alignItems: string;
-  alignSelf: string;
-  all: string;
-  animation: string;
-  animationDelay: string;
-  animationDirection: string;
-  animationDuration: string;
-  animationFillMode: string;
-  animationIterationCount: string;
-  animationName: string;
-  animationPlayState: string;
-  animationTimingFunction: string;
-  backdropFilter: string;
-  webkitBackdropFilter: string;
-  backfaceVisibility: string;
-  background: string;
-  backgroundAttachment: string;
-  backgroundBlendMode: string;
-  backgroundClip: string;
-  backgroundColor: string;
-  backgroundImage: string;
-  backgroundOrigin: string;
-  backgroundPosition: string;
-  backgroundPositionX: string;
-  backgroundPositionY: string;
-  backgroundRepeat: string;
-  backgroundSize: string;
-  blockSize: string;
-  border: string;
-  borderBlockEnd: string;
-  borderBlockEndColor: string;
-  borderBlockEndStyle: string;
-  borderBlockEndWidth: string;
-  borderBlockStart: string;
-  borderBlockStartColor: string;
-  borderBlockStartStyle: string;
-  borderBlockStartWidth: string;
-  borderBottom: string;
-  borderBottomColor: string;
-  borderBottomLeftRadius: string;
-  borderBottomRightRadius: string;
-  borderBottomStyle: string;
-  borderBottomWidth: string;
-  borderCollapse: string;
-  borderColor: string;
-  borderImage: string;
-  borderImageOutset: string;
-  borderImageRepeat: string;
-  borderImageSlice: string;
-  borderImageSource: string;
-  borderImageWidth: string;
-  borderInlineEnd: string;
-  borderInlineEndColor: string;
-  borderInlineEndStyle: string;
-  borderInlineEndWidth: string;
-  borderInlineStart: string;
-  borderInlineStartColor: string;
-  borderInlineStartStyle: string;
-  borderInlineStartWidth: string;
-  borderLeft: string;
-  borderLeftColor: string;
-  borderLeftStyle: string;
-  borderLeftWidth: string;
-  borderRadius: string;
-  borderRight: string;
-  borderRightColor: string;
-  borderRightStyle: string;
-  borderRightWidth: string;
-  borderSpacing: string;
-  borderStyle: string;
-  borderTop: string;
-  borderTopColor: string;
-  borderTopLeftRadius: string;
-  borderTopRightRadius: string;
-  borderTopStyle: string;
-  borderTopWidth: string;
-  borderWidth: string;
-  bottom: string;
-  boxDecorationBreak: string;
-  boxShadow: string;
-  boxSizing: string;
-  breakAfter: string;
-  breakBefore: string;
-  breakInside: string;
-  captionSide: string;
-  clear: string;
-  clip: string;
-  clipPath: string;
-  color: string;
-  columns: string;
-  columnCount: string;
-  columnFill: string;
-  columnGap: string;
-  columnRule: string;
-  columnRuleColor: string;
-  columnRuleStyle: string;
-  columnRuleWidth: string;
-  columnSpan: string;
-  columnWidth: string;
-  contain: string;
-  content: string;
-  counterIncrement: string;
-  counterReset: string;
-  cursor: string;
-  direction: string;
-  display: string;
-  emptyCells: string;
-  filter: string;
-  flex: string;
-  flexBasis: string;
-  flexDirection: string;
-  flexFlow: string;
-  flexGrow: string;
-  flexShrink: string;
-  flexWrap: string;
-  float: string;
-  font: string;
-  fontFamily: string;
-  fontFeatureSettings: string;
-  fontKerning: string;
-  fontLanguageOverride: string;
-  fontSize: string;
-  fontSizeAdjust: string;
-  fontStretch: string;
-  fontStyle: string;
-  fontSynthesis: string;
-  fontVariant: string;
-  fontVariantAlternates: string;
-  fontVariantCaps: string;
-  fontVariantEastAsian: string;
-  fontVariantLigatures: string;
-  fontVariantNumeric: string;
-  fontVariantPosition: string;
-  fontWeight: string;
-  grad: string;
-  grid: string;
-  gridArea: string;
-  gridAutoColumns: string;
-  gridAutoFlow: string;
-  gridAutoPosition: string;
-  gridAutoRows: string;
-  gridColumn: string;
-  gridColumnStart: string;
-  gridColumnEnd: string;
-  gridRow: string;
-  gridRowStart: string;
-  gridRowEnd: string;
-  gridTemplate: string;
-  gridTemplateAreas: string;
-  gridTemplateRows: string;
-  gridTemplateColumns: string;
-  height: string;
-  hyphens: string;
-  imageRendering: string;
-  imageResolution: string;
-  imageOrientation: string;
-  imeMode: string;
-  inherit: string;
-  initial: string;
-  inlineSize: string;
-  isolation: string;
-  justifyContent: string;
-  left: string;
-  letterSpacing: string;
-  lineBreak: string;
-  lineHeight: string;
-  listStyle: string;
-  listStyleImage: string;
-  listStylePosition: string;
-  listStyleType: string;
-  margin: string;
-  marginBlockEnd: string;
-  marginBlockStart: string;
-  marginBottom: string;
-  marginInlineEnd: string;
-  marginInlineStart: string;
-  marginLeft: string;
-  marginRight: string;
-  marginTop: string;
-  marks: string;
-  mask: string;
-  maskType: string;
-  maxBlockSize: string;
-  maxHeight: string;
-  maxInlineSize: string;
-  maxWidth: string;
-  minBlockSize: string;
-  minHeight: string;
-  minInlineSize: string;
-  minWidth: string;
-  mixBlendMode: string;
-  mozTransform: string;
-  mozTransformOrigin: string;
-  mozTransitionDelay: string;
-  mozTransitionDuration: string;
-  mozTransitionProperty: string;
-  mozTransitionTimingFunction: string;
-  objectFit: string;
-  objectPosition: string;
-  offsetBlockEnd: string;
-  offsetBlockStart: string;
-  offsetInlineEnd: string;
-  offsetInlineStart: string;
-  opacity: string;
-  order: string;
-  orphans: string;
-  outline: string;
-  outlineColor: string;
-  outlineOffset: string;
-  outlineStyle: string;
-  outlineWidth: string;
-  overflow: string;
-  overflowWrap: string;
-  overflowX: string;
-  overflowY: string;
-  padding: string;
-  paddingBlockEnd: string;
-  paddingBlockStart: string;
-  paddingBottom: string;
-  paddingInlineEnd: string;
-  paddingInlineStart: string;
-  paddingLeft: string;
-  paddingRight: string;
-  paddingTop: string;
-  pageBreakAfter: string;
-  pageBreakBefore: string;
-  pageBreakInside: string;
-  perspective: string;
-  perspectiveOrigin: string;
-  pointerEvents: string;
-  position: string;
-  quotes: string;
-  rad: string;
-  resize: string;
-  right: string;
-  rubyAlign: string;
-  rubyMerge: string;
-  rubyPosition: string;
-  scrollBehavior: string;
-  scrollSnapCoordinate: string;
-  scrollSnapDestination: string;
-  scrollSnapPointsX: string;
-  scrollSnapPointsY: string;
-  scrollSnapType: string;
-  shapeImageThreshold: string;
-  shapeMargin: string;
-  shapeOutside: string;
-  tableLayout: string;
-  tabSize: string;
-  textAlign: string;
-  textAlignLast: string;
-  textCombineUpright: string;
-  textDecoration: string;
-  textDecorationColor: string;
-  textDecorationLine: string;
-  textDecorationStyle: string;
-  textIndent: string;
-  textOrientation: string;
-  textOverflow: string;
-  textRendering: string;
-  textShadow: string;
-  textTransform: string;
-  textUnderlinePosition: string;
-  top: string;
-  touchAction: string;
-  transform: string;
-  transformOrigin: string;
-  transformStyle: string;
-  transition: string;
-  transitionDelay: string;
-  transitionDuration: string;
-  transitionProperty: string;
-  transitionTimingFunction: string;
-  turn: string;
-  unicodeBidi: string;
-  unicodeRange: string;
-  userSelect: string;
-  verticalAlign: string;
-  visibility: string;
-  webkitOverflowScrolling: string;
-  webkitTransform: string;
-  webkitTransformOrigin: string;
-  webkitTransitionDelay: string;
-  webkitTransitionDuration: string;
-  webkitTransitionProperty: string;
-  webkitTransitionTimingFunction: string;
-  whiteSpace: string;
-  widows: string;
-  width: string;
-  willChange: string;
-  wordBreak: string;
-  wordSpacing: string;
-  wordWrap: string;
-  writingMode: string;
-  zIndex: string;
-
-  cssFloat: string;
-  cssText: string;
-  getPropertyPriority(property: string): string;
-  getPropertyValue(property: string): string;
-  item(index: number): string;
-  [index: number]: string;
-  length: number;
-  parentRule: CSSRule;
-  removeProperty(property: string): string;
-  setProperty(property: string, value: ?string, priority: ?string): void;
-  setPropertyPriority(property: string, priority: string): void;
-}

flow-typed/environments/geometry.js

@@ -1,270 +0,0 @@
-// flow-typed signature: c29a716c1825927cdfc3ad29fe929754
-// flow-typed version: 52ab99c6db/geometry/flow_>=v0.261.x
-
-// https://www.w3.org/TR/geometry-1/
-
-type DOMMatrix2DInit =
-  | {|
-      a: number,
-      b: number,
-      c: number,
-      d: number,
-      e: number,
-      f: number,
-    |}
-  | {|
-      m11: number,
-      m12: number,
-      m21: number,
-      m22: number,
-      m41: number,
-      m42: number,
-    |};
-
-type DOMMatrixInit =
-  | {|
-      ...DOMMatrix2DInit,
-      is2D: true,
-    |}
-  | {|
-      ...DOMMatrix2DInit,
-      is2D: false,
-      m13: number,
-      m14: number,
-      m23: number,
-      m24: number,
-      m31: number,
-      m32: number,
-      m33: number,
-      m34: number,
-      m43: number,
-      m44: number,
-    |};
-
-type DOMPointInit = {|
-  w: number,
-  x: number,
-  y: number,
-  z: number,
-|};
-
-type DOMQuadInit = {|
-  p1: DOMPointInit,
-  p2: DOMPointInit,
-  p3: DOMPointInit,
-  p4: DOMPointInit,
-|};
-
-type DOMRectInit = {|
-  height: number,
-  width: number,
-  x: number,
-  y: number,
-|};
-
-declare class DOMMatrix extends DOMMatrixReadOnly {
-  a: number;
-  b: number;
-  c: number;
-  d: number;
-  e: number;
-  f: number;
-  m11: number;
-  m12: number;
-  m13: number;
-  m14: number;
-  m21: number;
-  m22: number;
-  m23: number;
-  m24: number;
-  m31: number;
-  m32: number;
-  m33: number;
-  m34: number;
-  m41: number;
-  m42: number;
-  m43: number;
-  m44: number;
-
-  static fromFloat32Array(array32: Float32Array): DOMMatrix;
-  static fromFloat64Array(array64: Float64Array): DOMMatrix;
-  static fromMatrix(other?: DOMMatrixInit): DOMMatrix;
-
-  constructor(init?: string | Array<number>): void;
-  invertSelf(): DOMMatrix;
-  multiplySelf(other?: DOMMatrixInit): DOMMatrix;
-  preMultiplySelf(other?: DOMMatrixInit): DOMMatrix;
-  rotateAxisAngleSelf(
-    x?: number,
-    y?: number,
-    z?: number,
-    angle?: number
-  ): DOMMatrix;
-  rotateFromVectorSelf(x?: number, y?: number): DOMMatrix;
-  rotateSelf(rotX?: number, rotY?: number, rotZ?: number): DOMMatrix;
-  scale3dSelf(
-    scale?: number,
-    originX?: number,
-    originY?: number,
-    originZ?: number
-  ): DOMMatrix;
-  scaleSelf(
-    scaleX?: number,
-    scaleY?: number,
-    scaleZ?: number,
-    originX?: number,
-    originY?: number,
-    originZ?: number
-  ): DOMMatrix;
-  setMatrixValue(transformList: string): DOMMatrix;
-  skewXSelf(sx?: number): DOMMatrix;
-  skewYSelf(sy?: number): DOMMatrix;
-  translateSelf(tx?: number, ty?: number, tz?: number): DOMMatrix;
-}
-
-declare class DOMMatrixReadOnly {
-  +a: number;
-  +b: number;
-  +c: number;
-  +d: number;
-  +e: number;
-  +f: number;
-  +is2D: boolean;
-  +isIdentity: boolean;
-  +m11: number;
-  +m12: number;
-  +m13: number;
-  +m14: number;
-  +m21: number;
-  +m22: number;
-  +m23: number;
-  +m24: number;
-  +m31: number;
-  +m32: number;
-  +m33: number;
-  +m34: number;
-  +m41: number;
-  +m42: number;
-  +m43: number;
-  +m44: number;
-
-  static fromFloat32Array(array32: Float32Array): DOMMatrixReadOnly;
-  static fromFloat64Array(array64: Float64Array): DOMMatrixReadOnly;
-  static fromMatrix(other?: DOMMatrixInit): DOMMatrixReadOnly;
-
-  constructor(init?: string | Array<number>): void;
-  flipX(): DOMMatrix;
-  flipY(): DOMMatrix;
-  inverse(): DOMMatrix;
-  multiply(other?: DOMMatrixInit): DOMMatrix;
-  rotate(rotX?: number, rotY?: number, rotZ?: number): DOMMatrix;
-  rotateAxisAngle(
-    x?: number,
-    y?: number,
-    z?: number,
-    angle?: number
-  ): DOMMatrix;
-  rotateFromVector(x?: number, y?: number): DOMMatrix;
-  scale(
-    scaleX?: number,
-    scaleY?: number,
-    scaleZ?: number,
-    originX?: number,
-    originY?: number,
-    originZ?: number
-  ): DOMMatrix;
-  scale3d(
-    scale?: number,
-    originX?: number,
-    originY?: number,
-    originZ?: number
-  ): DOMMatrix;
-  scaleNonUniform(scaleX?: number, scaleY?: number): DOMMatrix;
-  skewX(sx?: number): DOMMatrix;
-  skewY(sy?: number): DOMMatrix;
-  toFloat32Array(): Float32Array;
-  toFloat64Array(): Float64Array;
-  toJSON(): Object;
-  transformPoint(point?: DOMPointInit): DOMPoint;
-  translate(tx?: number, ty?: number, tz?: number): DOMMatrix;
-  toString(): string;
-}
-
-declare class DOMPoint extends DOMPointReadOnly {
-  w: number;
-  x: number;
-  y: number;
-  z: number;
-
-  static fromPoint(other?: DOMPointInit): DOMPoint;
-
-  constructor(x?: number, y?: number, z?: number, w?: number): void;
-}
-
-declare class DOMPointReadOnly {
-  +w: number;
-  +x: number;
-  +y: number;
-  +z: number;
-
-  static fromPoint(other?: DOMPointInit): DOMPointReadOnly;
-
-  constructor(x?: number, y?: number, z?: number, w?: number): void;
-  matrixTransform(matrix?: DOMMatrixInit): DOMPoint;
-  toJSON(): Object;
-}
-
-declare class DOMQuad {
-  +p1: DOMPoint;
-  +p2: DOMPoint;
-  +p3: DOMPoint;
-  +p4: DOMPoint;
-
-  static fromQuad(other?: DOMQuadInit): DOMQuad;
-  static fromRect(other?: DOMRectInit): DOMQuad;
-
-  constructor(
-    p1?: DOMPointInit,
-    p2?: DOMPointInit,
-    p3?: DOMPointInit,
-    p4?: DOMPointInit
-  ): void;
-  getBounds(): DOMRect;
-  toJSON(): Object;
-}
-
-declare class DOMRect extends DOMRectReadOnly {
-  height: number;
-  width: number;
-  x: number;
-  y: number;
-
-  constructor(x?: number, y?: number, width?: number, height?: number): void;
-
-  static fromRect(other?: DOMRectInit): DOMRect;
-}
-
-declare class DOMRectList {
-  +length: number;
-
-  @@iterator(): Iterator<DOMRect>;
-
-  item(index: number): DOMRect;
-  [index: number]: DOMRect;
-}
-
-declare class DOMRectReadOnly {
-  +bottom: number;
-  +height: number;
-  +left: number;
-  +right: number;
-  +top: number;
-  +width: number;
-  +x: number;
-  +y: number;
-
-  constructor(x?: number, y?: number, width?: number, height?: number): void;
-
-  static fromRect(other?: DOMRectInit): DOMRectReadOnly;
-  toJSON(): Object;
-}

flow-typed/environments/serviceworkers.js

@@ -1,248 +0,0 @@
-// flow-typed signature: f6bda44505d6258bae702a65ee2878f2
-// flow-typed version: 840509ea9d/serviceworkers/flow_>=v0.261.x
-
-type FrameType = 'auxiliary' | 'top-level' | 'nested' | 'none';
-type VisibilityState = 'hidden' | 'visible' | 'prerender' | 'unloaded';
-
-declare class WindowClient extends Client {
-  visibilityState: VisibilityState;
-  focused: boolean;
-  focus(): Promise<WindowClient>;
-  navigate(url: string): Promise<WindowClient>;
-}
-
-declare class Client {
-  id: string;
-  reserved: boolean;
-  url: string;
-  frameType: FrameType;
-  postMessage(message: any, transfer?: Iterator<any> | Array<any>): void;
-}
-
-declare class ExtendableEvent extends Event {
-  waitUntil(f: Promise<mixed>): void;
-}
-
-type NotificationEvent$Init = {
-  ...Event$Init,
-  notification: Notification,
-  action?: string,
-  ...
-};
-
-declare class NotificationEvent extends ExtendableEvent {
-  constructor(type: string, eventInitDict?: NotificationEvent$Init): void;
-  +notification: Notification;
-  +action: string;
-}
-
-type ForeignFetchOptions = {
-  scopes: Iterator<string>,
-  origins: Iterator<string>,
-  ...
-};
-
-declare class InstallEvent extends ExtendableEvent {
-  registerForeignFetch(options: ForeignFetchOptions): void;
-}
-
-declare class FetchEvent extends ExtendableEvent {
-  request: Request;
-  clientId: string;
-  isReload: boolean;
-  respondWith(response: Response | Promise<Response>): void;
-  preloadResponse: Promise<?Response>;
-}
-
-type ClientType = 'window' | 'worker' | 'sharedworker' | 'all';
-type ClientQueryOptions = {
-  includeUncontrolled?: boolean,
-  includeReserved?: boolean,
-  type?: ClientType,
-  ...
-};
-
-declare class Clients {
-  get(id: string): Promise<?Client>;
-  matchAll(options?: ClientQueryOptions): Promise<Array<Client>>;
-  openWindow(url: string): Promise<?WindowClient>;
-  claim(): Promise<void>;
-}
-
-type ServiceWorkerState =
-  | 'installing'
-  | 'installed'
-  | 'activating'
-  | 'activated'
-  | 'redundant';
-
-declare class ServiceWorker extends EventTarget {
-  scriptURL: string;
-  state: ServiceWorkerState;
-
-  postMessage(message: any, transfer?: Iterator<any>): void;
-
-  onstatechange?: EventHandler;
-}
-
-declare class NavigationPreloadState {
-  enabled: boolean;
-  headerValue: string;
-}
-
-declare class NavigationPreloadManager {
-  enable: Promise<void>;
-  disable: Promise<void>;
-  setHeaderValue(value: string): Promise<void>;
-  getState: Promise<NavigationPreloadState>;
-}
-
-type PushSubscriptionOptions = {
-  userVisibleOnly?: boolean,
-  applicationServerKey?: string | ArrayBuffer | $ArrayBufferView,
-  ...
-};
-
-declare class PushSubscriptionJSON {
-  endpoint: string;
-  expirationTime: number | null;
-  keys: {[string]: string, ...};
-}
-
-declare class PushSubscription {
-  +endpoint: string;
-  +expirationTime: number | null;
-  +options: PushSubscriptionOptions;
-  getKey(name: string): ArrayBuffer | null;
-  toJSON(): PushSubscriptionJSON;
-  unsubscribe(): Promise<boolean>;
-}
-
-declare class PushManager {
-  +supportedContentEncodings: Array<string>;
-  subscribe(options?: PushSubscriptionOptions): Promise<PushSubscription>;
-  getSubscription(): Promise<PushSubscription | null>;
-  permissionState(
-    options?: PushSubscriptionOptions
-  ): Promise<'granted' | 'denied' | 'prompt'>;
-}
-
-type ServiceWorkerUpdateViaCache = 'imports' | 'all' | 'none';
-
-type GetNotificationOptions = {
-  tag?: string,
-  ...
-};
-
-declare class ServiceWorkerRegistration extends EventTarget {
-  +installing: ?ServiceWorker;
-  +waiting: ?ServiceWorker;
-  +active: ?ServiceWorker;
-  +navigationPreload: NavigationPreloadManager;
-  +scope: string;
-  +updateViaCache: ServiceWorkerUpdateViaCache;
-  +pushManager: PushManager;
-
-  getNotifications?: (
-    filter?: GetNotificationOptions
-  ) => Promise<$ReadOnlyArray<Notification>>;
-  showNotification?: (
-    title: string,
-    options?: NotificationOptions
-  ) => Promise<void>;
-  update(): Promise<void>;
-  unregister(): Promise<boolean>;
-
-  onupdatefound?: EventHandler;
-}
-
-type WorkerType = 'classic' | 'module';
-
-type RegistrationOptions = {
-  scope?: string,
-  type?: WorkerType,
-  updateViaCache?: ServiceWorkerUpdateViaCache,
-  ...
-};
-
-declare class ServiceWorkerContainer extends EventTarget {
-  +controller: ?ServiceWorker;
-  +ready: Promise<ServiceWorkerRegistration>;
-
-  getRegistration(
-    clientURL?: string
-  ): Promise<ServiceWorkerRegistration | void>;
-  getRegistrations(): Promise<Iterator<ServiceWorkerRegistration>>;
-  register(
-    scriptURL: string | TrustedScriptURL,
-    options?: RegistrationOptions
-  ): Promise<ServiceWorkerRegistration>;
-  startMessages(): void;
-
-  oncontrollerchange?: EventHandler;
-  onmessage?: EventHandler;
-  onmessageerror?: EventHandler;
-}
-
-/**
- * This feature has been removed from the Web standards.
- */
-declare class ServiceWorkerMessageEvent extends Event {
-  data: any;
-  lastEventId: string;
-  origin: string;
-  ports: Array<MessagePort>;
-  source: ?(ServiceWorker | MessagePort);
-}
-
-declare class ExtendableMessageEvent extends ExtendableEvent {
-  data: any;
-  lastEventId: string;
-  origin: string;
-  ports: Array<MessagePort>;
-  source: ?(ServiceWorker | MessagePort);
-}
-
-type CacheQueryOptions = {
-  ignoreSearch?: boolean,
-  ignoreMethod?: boolean,
-  ignoreVary?: boolean,
-  cacheName?: string,
-  ...
-};
-
-declare class Cache {
-  match(request: RequestInfo, options?: CacheQueryOptions): Promise<Response>;
-  matchAll(
-    request: RequestInfo,
-    options?: CacheQueryOptions
-  ): Promise<Array<Response>>;
-  add(request: RequestInfo): Promise<void>;
-  addAll(requests: Array<RequestInfo>): Promise<void>;
-  put(request: RequestInfo, response: Response): Promise<void>;
-  delete(request: RequestInfo, options?: CacheQueryOptions): Promise<boolean>;
-  keys(
-    request?: RequestInfo,
-    options?: CacheQueryOptions
-  ): Promise<Array<Request>>;
-}
-
-declare class CacheStorage {
-  match(request: RequestInfo, options?: CacheQueryOptions): Promise<Response>;
-  has(cacheName: string): Promise<true>;
-  open(cacheName: string): Promise<Cache>;
-  delete(cacheName: string): Promise<boolean>;
-  keys(): Promise<Array<string>>;
-}
-
-// Service worker global scope
-// https://www.w3.org/TR/service-workers/#service-worker-global-scope
-declare var clients: Clients;
-declare var caches: CacheStorage;
-declare var registration: ServiceWorkerRegistration;
-declare function skipWaiting(): Promise<void>;
-declare var onactivate: ?EventHandler;
-declare var oninstall: ?EventHandler;
-declare var onfetch: ?EventHandler;
-declare var onforeignfetch: ?EventHandler;
-declare var onmessage: ?EventHandler;

flow-typed/environments/streams.js

@@ -1,136 +0,0 @@
-// flow-typed signature: e6e6768618776352dd676f63502aea4d
-// flow-typed version: 40e7dfcbd5/streams/flow_>=v0.261.x
-
-type TextEncodeOptions = {options?: boolean, ...};
-
-declare class ReadableStreamController {
-  constructor(
-    stream: ReadableStream,
-    underlyingSource: UnderlyingSource,
-    size: number,
-    highWaterMark: number
-  ): void;
-
-  desiredSize: number;
-
-  close(): void;
-  enqueue(chunk: any): void;
-  error(error: Error): void;
-}
-
-declare class ReadableStreamBYOBRequest {
-  constructor(controller: ReadableStreamController, view: $TypedArray): void;
-
-  view: $TypedArray;
-
-  respond(bytesWritten: number): ?any;
-  respondWithNewView(view: $TypedArray): ?any;
-}
-
-declare class ReadableByteStreamController extends ReadableStreamController {
-  constructor(
-    stream: ReadableStream,
-    underlyingSource: UnderlyingSource,
-    highWaterMark: number
-  ): void;
-
-  byobRequest: ReadableStreamBYOBRequest;
-}
-
-declare class ReadableStreamReader {
-  constructor(stream: ReadableStream): void;
-
-  closed: boolean;
-
-  cancel(reason: string): void;
-  read(): Promise<{
-    value: ?any,
-    done: boolean,
-    ...
-  }>;
-  releaseLock(): void;
-}
-
-declare interface UnderlyingSource {
-  autoAllocateChunkSize?: number;
-  type?: string;
-
-  start?: (controller: ReadableStreamController) => ?Promise<void>;
-  pull?: (controller: ReadableStreamController) => ?Promise<void>;
-  cancel?: (reason: string) => ?Promise<void>;
-}
-
-declare class TransformStream {
-  readable: ReadableStream;
-  writable: WritableStream;
-}
-
-interface PipeThroughTransformStream {
-  readable: ReadableStream;
-  writable: WritableStream;
-}
-
-type PipeToOptions = {
-  preventClose?: boolean,
-  preventAbort?: boolean,
-  preventCancel?: boolean,
-  ...
-};
-
-type QueuingStrategy = {
-  highWaterMark: number,
-  size(chunk: ?any): number,
-  ...
-};
-
-declare class ReadableStream {
-  constructor(
-    underlyingSource: ?UnderlyingSource,
-    queuingStrategy: ?QueuingStrategy
-  ): void;
-
-  locked: boolean;
-
-  cancel(reason: string): void;
-  getReader(): ReadableStreamReader;
-  pipeThrough(transform: PipeThroughTransformStream, options: ?any): void;
-  pipeTo(dest: WritableStream, options: ?PipeToOptions): Promise<void>;
-  tee(): [ReadableStream, ReadableStream];
-}
-
-declare interface WritableStreamController {
-  error(error: Error): void;
-}
-
-declare interface UnderlyingSink {
-  autoAllocateChunkSize?: number;
-  type?: string;
-
-  abort?: (reason: string) => ?Promise<void>;
-  close?: (controller: WritableStreamController) => ?Promise<void>;
-  start?: (controller: WritableStreamController) => ?Promise<void>;
-  write?: (chunk: any, controller: WritableStreamController) => ?Promise<void>;
-}
-
-declare interface WritableStreamWriter {
-  closed: Promise<any>;
-  desiredSize?: number;
-  ready: Promise<any>;
-
-  abort(reason: string): ?Promise<any>;
-  close(): Promise<any>;
-  releaseLock(): void;
-  write(chunk: any): Promise<any>;
-}
-
-declare class WritableStream {
-  constructor(
-    underlyingSink: ?UnderlyingSink,
-    queuingStrategy: QueuingStrategy
-  ): void;
-
-  locked: boolean;
-
-  abort(reason: string): void;
-  getWriter(): WritableStreamWriter;
-}

flow-typed/environments/web-animations.js

@@ -1,193 +0,0 @@
-// flow-typed signature: 4631a74b6a0e6a1b4de2ba8c7bb141d6
-// flow-typed version: 3e51657e95/web-animations/flow_>=v0.261.x
-
-// https://www.w3.org/TR/web-animations-1/
-
-type AnimationPlayState = 'idle' | 'running' | 'paused' | 'finished';
-
-type AnimationReplaceState = 'active' | 'removed' | 'persisted';
-
-type CompositeOperation = 'replace' | 'add' | 'accumulate';
-
-type CompositeOperationOrAuto = 'replace' | 'add' | 'accumulate' | 'auto';
-
-type FillMode = 'none' | 'forwards' | 'backwards' | 'both' | 'auto';
-
-// This is actually web-animations-2
-type IterationCompositeOperation = 'replace' | 'accumulate';
-
-type PlaybackDirection =
-  | 'normal'
-  | 'reverse'
-  | 'alternate'
-  | 'alternate-reverse';
-
-type AnimationPlaybackEvent$Init = Event$Init & {
-  currentTime?: number | null,
-  timelineTime?: number | null,
-  ...
-};
-
-type BaseComputedKeyframe = {|
-  composite: CompositeOperationOrAuto,
-  computedOffset: number,
-  easing: string,
-  offset: number | null,
-|};
-
-type BaseKeyframe = {|
-  composite: CompositeOperationOrAuto,
-  easing: string,
-  offset: number | null,
-|};
-
-type BasePropertyIndexedKeyframe = {|
-  composite: CompositeOperationOrAuto | Array<CompositeOperationOrAuto>,
-  easing: string | Array<string>,
-  offset: number | null | Array<number | null>,
-|};
-
-type ComputedEffectTiming = {|
-  ...EffectTiming,
-  currentIteration: number | null,
-  progress: number | null,
-|};
-
-type ComputedKeyframe = {
-  composite: CompositeOperationOrAuto,
-  computedOffset: number,
-  easing: string,
-  offset: number | null,
-  [property: string]: string | number | null | void,
-  ...
-};
-
-type DocumentTimelineOptions = {|
-  originTime: number,
-|};
-
-type EffectTiming = {|
-  direction: PlaybackDirection,
-  easing: string,
-  fill: FillMode,
-  iterations: number,
-  iterationStart: number,
-|};
-
-type GetAnimationsOptions = {|
-  pseudoElement: string | null,
-  subtree: boolean,
-|};
-
-type KeyframeAnimationOptions = {|
-  ...KeyframeEffectOptions,
-  id: string,
-  timeline: AnimationTimeline | null,
-|};
-
-type KeyframeEffectOptions = {|
-  ...EffectTiming,
-  composite: CompositeOperation,
-  pseudoElement: string | null,
-|};
-
-type Keyframe = {
-  composite?: CompositeOperationOrAuto,
-  easing?: string,
-  offset?: number | null,
-  [property: string]: string | number | null | void,
-  ...
-};
-
-type OptionalEffectTiming = Partial<EffectTiming>;
-
-type PropertyIndexedKeyframes = {
-  composite?: CompositeOperationOrAuto | CompositeOperationOrAuto[],
-  easing?: string | string[],
-  offset?: number | (number | null)[],
-  [property: string]:
-    | string
-    | string[]
-    | number
-    | null
-    | (number | null)[]
-    | void,
-  ...
-};
-
-declare class Animation extends EventTarget {
-  constructor(
-    effect?: AnimationEffect | null,
-    timeline?: AnimationTimeline | null
-  ): void;
-
-  id: string;
-  effect: AnimationEffect | null;
-  timeline: AnimationTimeline | null;
-  startTime: number | null;
-  currentTime: number | null;
-  playbackRate: number;
-  +playState: AnimationPlayState;
-  +replaceState: AnimationReplaceState;
-  +pending: boolean;
-  +ready: Promise<Animation>;
-  +finished: Promise<Animation>;
-  onfinish: ?(ev: AnimationPlaybackEvent) => mixed;
-  oncancel: ?(ev: AnimationPlaybackEvent) => mixed;
-  onremove: ?(ev: AnimationPlaybackEvent) => mixed;
-  cancel(): void;
-  finish(): void;
-  play(): void;
-  pause(): void;
-  updatePlaybackRate(playbackRate: number): void;
-  reverse(): void;
-  persist(): void;
-  commitStyles(): void;
-}
-
-declare class AnimationEffect {
-  getTiming(): EffectTiming;
-  getComputedTiming(): ComputedEffectTiming;
-  updateTiming(timing?: OptionalEffectTiming): void;
-}
-
-declare class AnimationPlaybackEvent extends Event {
-  constructor(
-    type: string,
-    animationEventInitDict?: AnimationPlaybackEvent$Init
-  ): void;
-  +currentTime: number | null;
-  +timelineTime: number | null;
-}
-
-declare class AnimationTimeline {
-  +currentTime: number | null;
-}
-
-declare class DocumentTimeline extends AnimationTimeline {
-  constructor(options?: DocumentTimelineOptions): void;
-}
-
-declare class KeyframeEffect extends AnimationEffect {
-  constructor(
-    target: Element | null,
-    keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
-    options?: number | KeyframeEffectOptions
-  ): void;
-  constructor(source: KeyframeEffect): void;
-
-  target: Element | null;
-  composite: CompositeOperation;
-  // This is actually web-animations-2
-  iterationComposite: IterationCompositeOperation;
-  getKeyframes(): ComputedKeyframe[];
-  setKeyframes(keyframes: Keyframe[] | PropertyIndexedKeyframes | null): void;
-}
-
-declare class mixin$Animatable {
-  animate(
-    keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
-    options?: number | KeyframeAnimationOptions
-  ): Animation;
-  getAnimations(options?: GetAnimationsOptions): Array<Animation>;
-}

flow-typed/npm/error-stack-parser_v2.x.x.js

@@ -1,60 +0,0 @@
-// flow-typed signature: 132e48034ef4756600e1d98681a166b5
-// flow-typed version: c6154227d1/error-stack-parser_v2.x.x/flow_>=v0.104.x
-
-declare module 'error-stack-parser' {
-  declare interface StackFrame {
-    constructor(object: StackFrame): StackFrame;
-
-    isConstructor?: boolean;
-    getIsConstructor(): boolean;
-    setIsConstructor(): void;
-
-    isEval?: boolean;
-    getIsEval(): boolean;
-    setIsEval(): void;
-
-    isNative?: boolean;
-    getIsNative(): boolean;
-    setIsNative(): void;
-
-    isTopLevel?: boolean;
-    getIsTopLevel(): boolean;
-    setIsTopLevel(): void;
-
-    columnNumber?: number;
-    getColumnNumber(): number;
-    setColumnNumber(): void;
-
-    lineNumber?: number;
-    getLineNumber(): number;
-    setLineNumber(): void;
-
-    fileName?: string;
-    getFileName(): string;
-    setFileName(): void;
-
-    functionName?: string;
-    getFunctionName(): string;
-    setFunctionName(): void;
-
-    source?: string;
-    getSource(): string;
-    setSource(): void;
-
-    args?: any[];
-    getArgs(): any[];
-    setArgs(): void;
-
-    evalOrigin?: StackFrame;
-    getEvalOrigin(): StackFrame;
-    setEvalOrigin(): void;
-
-    toString(): string;
-  }
-
-  declare class ErrorStackParser {
-    parse(error: Error): Array<StackFrame>;
-  }
-
-  declare module.exports: ErrorStackParser;
-}

flow-typed/npm/minimist_v1.x.x.js

@@ -1,27 +0,0 @@
-// flow-typed signature: d48da8db828529253fc20b80747846ea
-// flow-typed version: c6154227d1/minimist_v1.x.x/flow_>=v0.104.x
-
-declare module 'minimist' {
-  declare type minimistOptions = {
-    string?: string | Array<string>,
-    boolean?: boolean | string | Array<string>,
-    alias?: {[arg: string]: string | Array<string>, ...},
-    default?: {[arg: string]: any, ...},
-    stopEarly?: boolean,
-    // TODO: Strings as keys don't work...
-    // '--'? boolean,
-    unknown?: (param: string) => boolean,
-    ...
-  };
-
-  declare type minimistOutput = {
-    [flag: string]: string | boolean,
-    _: Array<string>,
-    ...
-  };
-
-  declare module.exports: (
-    argv: Array<string>,
-    opts?: minimistOptions
-  ) => minimistOutput;
-}

package.json

@@ -51,7 +51,6 @@
     "@typescript-eslint/parser": "^6.21.0",
     "abortcontroller-polyfill": "^1.7.5",
     "art": "0.10.1",
-    "babel-plugin-syntax-hermes-parser": "^0.32.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
     "chalk": "^3.0.0",
     "cli-table": "^0.3.1",
@@ -74,9 +73,8 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "^3.0.1",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.265",
-    "flow-remove-types": "^2.265",
-    "flow-typed": "^4.1.1",
+    "flow-bin": "^0.245.2",
+    "flow-remove-types": "^2.245.2",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20230206.0.0",
@@ -127,7 +125,6 @@
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "build-for-flight-dev": "cross-env RELEASE_CHANNEL=experimental node ./scripts/rollup/build.js react/index,react/jsx,react.react-server,react-dom/index,react-dom/client,react-dom/server,react-dom.react-server,react-dom-server.node,react-dom-server-legacy.node,scheduler,react-server-dom-webpack/ --type=NODE_DEV,ESM_PROD,NODE_ES2015 && mv ./build/node_modules ./build/oss-experimental",
     "build-for-vt-dev": "cross-env RELEASE_CHANNEL=experimental node ./scripts/rollup/build.js react/index,react/jsx,react-dom/index,react-dom/client,react-dom/server,react-dom-server.node,react-dom-server-legacy.node,scheduler --type=NODE_DEV && mv ./build/node_modules ./build/oss-experimental",
-    "flow-typed-install": "yarn flow-typed install --skip --skipFlowRestart --ignore-deps=dev",
     "linc": "node ./scripts/tasks/linc.js",
     "lint": "node ./scripts/tasks/eslint.js",
     "lint-build": "node ./scripts/rollup/validate/index.js",

packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js

@@ -12,8 +12,7 @@
 const ESLintTesterV7 = require('eslint-v7').RuleTester;
 const ESLintTesterV9 = require('eslint-v9').RuleTester;
 const ReactHooksESLintPlugin = require('eslint-plugin-react-hooks');
-const ReactHooksESLintRule =
-  ReactHooksESLintPlugin.default.rules['exhaustive-deps'];
+const ReactHooksESLintRule = ReactHooksESLintPlugin.rules['exhaustive-deps'];
 
 /**
  * A string template tag that removes padding from the left side of multi-line strings

packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js

@@ -12,8 +12,7 @@
 const ESLintTesterV7 = require('eslint-v7').RuleTester;
 const ESLintTesterV9 = require('eslint-v9').RuleTester;
 const ReactHooksESLintPlugin = require('eslint-plugin-react-hooks');
-const ReactHooksESLintRule =
-  ReactHooksESLintPlugin.default.rules['rules-of-hooks'];
+const ReactHooksESLintRule = ReactHooksESLintPlugin.rules['rules-of-hooks'];
 
 /**
  * A string template tag that removes padding from the left side of multi-line strings

packages/eslint-plugin-react-hooks/src/index.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import type {Linter, Rule} from 'eslint';
+import type {ESLint, Linter, Rule} from 'eslint';
 
 import ExhaustiveDeps from './rules/ExhaustiveDeps';
 import {allRules, recommendedRules} from './shared/ReactCompiler';
@@ -18,7 +18,7 @@ const rules = {
 } satisfies Record<string, Rule.RuleModule>;
 
 // Config rules
-const ruleConfigs = {
+const configRules = {
   'react-hooks/rules-of-hooks': 'error',
   'react-hooks/exhaustive-deps': 'warn',
   ...Object.fromEntries(
@@ -26,42 +26,44 @@ const ruleConfigs = {
   ),
 } satisfies Linter.RulesRecord;
 
-const plugin = {
-  meta: {
-    name: 'eslint-plugin-react-hooks',
+// Flat config
+const recommendedConfig = {
+  name: 'react-hooks/recommended',
+  plugins: {
+    get 'react-hooks'(): ESLint.Plugin {
+      return plugin;
+    },
   },
-  configs: {},
-  rules,
+  rules: configRules,
 };
 
-Object.assign(plugin.configs, {
-  'recommended-legacy': {
-    plugins: ['react-hooks'],
-    rules: ruleConfigs,
-  },
-
-  'flat/recommended': [
-    {
-      plugins: {
-        'react-hooks': plugin,
-      },
-      rules: ruleConfigs,
+// Plugin object
+const plugin = {
+  // TODO: Make this more dynamic to populate version from package.json.
+  // This can be done by injecting at build time, since importing the package.json isn't an option in Meta
+  meta: {name: 'eslint-plugin-react-hooks'},
+  rules,
+  configs: {
+    /** Legacy recommended config, to be used with rc-based configurations */
+    'recommended-legacy': {
+      plugins: ['react-hooks'],
+      rules: configRules,
     },
-  ],
 
-  'recommended-latest': [
-    {
-      plugins: {
-        'react-hooks': plugin,
-      },
-      rules: ruleConfigs,
-    },
-  ],
+    /**
+     * Recommended config, to be used with flat configs.
+     */
+    recommended: recommendedConfig,
 
-  recommended: {
-    plugins: ['react-hooks'],
-    rules: ruleConfigs,
+    /** @deprecated please use `recommended`; will be removed in v7  */
+    'recommended-latest': recommendedConfig,
   },
-});
+} satisfies ESLint.Plugin;
 
-export default plugin;
+const configs = plugin.configs;
+const meta = plugin.meta;
+export {configs, meta, rules};
+
+// TODO: If the plugin is ever updated to be pure ESM and drops support for rc-based configs, then it should be exporting the plugin as default
+// instead of individual named exports.
+// export default plugin;

packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts

@@ -113,6 +113,28 @@ function runReactCompilerImpl({
   userOpts,
 }: RunParams): RunCacheEntry {
   // Compat with older versions of eslint
+  for (const [key, entry] of Object.entries(userOpts)) {
+    if (key === 'environment' && COMPILER_OPTIONS.environment != null) {
+      for (const envKey of Object.keys(entry as Record<string, any>)) {
+        if (
+          Object.prototype.hasOwnProperty.call(
+            COMPILER_OPTIONS.environment,
+            envKey,
+          ) &&
+          !isDeepStrictEqual(
+            (entry as Record<string, any>)[envKey],
+            (COMPILER_OPTIONS.environment as Record<string, any>)[envKey],
+          )
+        ) {
+          console.warn('Conflicting environment option detected: ' + envKey);
+        }
+      }
+    } else if (Object.prototype.hasOwnProperty.call(COMPILER_OPTIONS, key)) {
+      if (!isDeepStrictEqual(entry, (COMPILER_OPTIONS as any)[key])) {
+        console.warn('Conflicting option detected: ' + key);
+      }
+    }
+  }
   const options: PluginOptions = parsePluginOptions({
     ...COMPILER_OPTIONS,
     ...userOpts,

packages/internal-test-utils/enqueueTask.js

@@ -11,7 +11,6 @@ const {MessageChannel} = require('node:worker_threads');
 
 export default function enqueueTask(task: () => void): void {
   const channel = new MessageChannel();
-  // $FlowFixMe[prop-missing]
   channel.port1.onmessage = () => {
     channel.port1.close();
     task();

packages/react-client/src/ReactFlightClient.js

@@ -496,14 +496,13 @@ function createErrorChunk<T>(
 function wakeChunk<T>(
   listeners: Array<InitializationReference | (T => mixed)>,
   value: T,
-  chunk: SomeChunk<T>,
 ): void {
   for (let i = 0; i < listeners.length; i++) {
     const listener = listeners[i];
     if (typeof listener === 'function') {
       listener(value);
     } else {
-      fulfillReference(listener, value, chunk);
+      fulfillReference(listener, value);
     }
   }
 }
@@ -556,7 +555,7 @@ function wakeChunkIfInitialized<T>(
 ): void {
   switch (chunk.status) {
     case INITIALIZED:
-      wakeChunk(resolveListeners, chunk.value, chunk);
+      wakeChunk(resolveListeners, chunk.value);
       break;
     case BLOCKED:
       // It is possible that we're blocked on our own chunk if it's a cycle.
@@ -570,7 +569,7 @@ function wakeChunkIfInitialized<T>(
           if (cyclicHandler !== null) {
             // This reference points back to this chunk. We can resolve the cycle by
             // using the value from that handler.
-            fulfillReference(reference, cyclicHandler.value, chunk);
+            fulfillReference(reference, cyclicHandler.value);
             resolveListeners.splice(i, 1);
             i--;
             if (rejectListeners !== null) {
@@ -638,7 +637,7 @@ function triggerErrorOnChunk<T>(
       cyclicChunk.status = BLOCKED;
       cyclicChunk.value = null;
       cyclicChunk.reason = null;
-      if ((enableProfilerTimer && enableComponentPerformanceTrack) || __DEV__) {
+      if (enableProfilerTimer && enableComponentPerformanceTrack) {
         initializingChunk = cyclicChunk;
       }
       try {
@@ -920,7 +919,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void {
   cyclicChunk.value = null;
   cyclicChunk.reason = null;
 
-  if ((enableProfilerTimer && enableComponentPerformanceTrack) || __DEV__) {
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
     initializingChunk = cyclicChunk;
   }
 
@@ -939,7 +938,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void {
     if (resolveListeners !== null) {
       cyclicChunk.value = null;
       cyclicChunk.reason = null;
-      wakeChunk(resolveListeners, value, cyclicChunk);
+      wakeChunk(resolveListeners, value);
     }
     if (initializingHandler !== null) {
       if (initializingHandler.errored) {
@@ -962,7 +961,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void {
     erroredChunk.reason = error;
   } finally {
     initializingHandler = prevHandler;
-    if ((enableProfilerTimer && enableComponentPerformanceTrack) || __DEV__) {
+    if (enableProfilerTimer && enableComponentPerformanceTrack) {
       initializingChunk = prevChunk;
     }
   }
@@ -1299,7 +1298,6 @@ function getChunk(response: Response, id: number): SomeChunk<any> {
 function fulfillReference(
   reference: InitializationReference,
   value: any,
-  fulfilledChunk: SomeChunk<any>,
 ): void {
   const {response, handler, parentObject, key, map, path} = reference;
 
@@ -1378,8 +1376,6 @@ function fulfillReference(
   const mappedValue = map(response, value, parentObject, key);
   parentObject[key] = mappedValue;
 
-  transferReferencedDebugInfo(handler.chunk, fulfilledChunk, mappedValue);
-
   // If this is the root object for a model reference, where `handler.value`
   // is a stale `null`, the resolved value can be used directly.
   if (key === '' && handler.value === null) {
@@ -1426,7 +1422,7 @@ function fulfillReference(
     initializedChunk.value = handler.value;
     initializedChunk.reason = handler.reason; // Used by streaming chunks
     if (resolveListeners !== null) {
-      wakeChunk(resolveListeners, handler.value, initializedChunk);
+      wakeChunk(resolveListeners, handler.value);
     }
   }
 }
@@ -1673,7 +1669,7 @@ function loadServerReference<A: Iterable<any>, T>(
       initializedChunk.status = INITIALIZED;
       initializedChunk.value = handler.value;
       if (resolveListeners !== null) {
-        wakeChunk(resolveListeners, handler.value, initializedChunk);
+        wakeChunk(resolveListeners, handler.value);
       }
     }
   }
@@ -1732,49 +1728,6 @@ function loadServerReference<A: Iterable<any>, T>(
   return (null: any);
 }
 
-function transferReferencedDebugInfo(
-  parentChunk: null | SomeChunk<any>,
-  referencedChunk: SomeChunk<any>,
-  referencedValue: mixed,
-): void {
-  if (__DEV__ && referencedChunk._debugInfo) {
-    const referencedDebugInfo = referencedChunk._debugInfo;
-    // If we have a direct reference to an object that was rendered by a synchronous
-    // server component, it might have some debug info about how it was rendered.
-    // We forward this to the underlying object. This might be a React Element or
-    // an Array fragment.
-    // If this was a string / number return value we lose the debug info. We choose
-    // that tradeoff to allow sync server components to return plain values and not
-    // use them as React Nodes necessarily. We could otherwise wrap them in a Lazy.
-    if (
-      typeof referencedValue === 'object' &&
-      referencedValue !== null &&
-      (isArray(referencedValue) ||
-        typeof referencedValue[ASYNC_ITERATOR] === 'function' ||
-        referencedValue.$$typeof === REACT_ELEMENT_TYPE) &&
-      !referencedValue._debugInfo
-    ) {
-      // We should maybe use a unique symbol for arrays but this is a React owned array.
-      // $FlowFixMe[prop-missing]: This should be added to elements.
-      Object.defineProperty((referencedValue: any), '_debugInfo', {
-        configurable: false,
-        enumerable: false,
-        writable: true,
-        value: referencedDebugInfo,
-      });
-    }
-    // We also add it to the initializing chunk since the resolution of that promise is
-    // also blocked by these. By adding it to both we can track it even if the array/element
-    // is extracted, or if the root is rendered as is.
-    if (parentChunk !== null) {
-      const parentDebugInfo =
-        parentChunk._debugInfo || (parentChunk._debugInfo = []);
-      // $FlowFixMe[method-unbinding]
-      parentDebugInfo.push.apply(parentDebugInfo, referencedDebugInfo);
-    }
-  }
-}
-
 function getOutlinedModel<T>(
   response: Response,
   reference: string,
@@ -1872,7 +1825,32 @@ function getOutlinedModel<T>(
         value = value[path[i]];
       }
       const chunkValue = map(response, value, parentObject, key);
-      transferReferencedDebugInfo(initializingChunk, chunk, chunkValue);
+      if (__DEV__ && chunk._debugInfo) {
+        // If we have a direct reference to an object that was rendered by a synchronous
+        // server component, it might have some debug info about how it was rendered.
+        // We forward this to the underlying object. This might be a React Element or
+        // an Array fragment.
+        // If this was a string / number return value we lose the debug info. We choose
+        // that tradeoff to allow sync server components to return plain values and not
+        // use them as React Nodes necessarily. We could otherwise wrap them in a Lazy.
+        if (
+          typeof chunkValue === 'object' &&
+          chunkValue !== null &&
+          (isArray(chunkValue) ||
+            typeof chunkValue[ASYNC_ITERATOR] === 'function' ||
+            chunkValue.$$typeof === REACT_ELEMENT_TYPE) &&
+          !chunkValue._debugInfo
+        ) {
+          // We should maybe use a unique symbol for arrays but this is a React owned array.
+          // $FlowFixMe[prop-missing]: This should be added to elements.
+          Object.defineProperty((chunkValue: any), '_debugInfo', {
+            configurable: false,
+            enumerable: false,
+            writable: true,
+            value: chunk._debugInfo,
+          });
+        }
+      }
       return chunkValue;
     case PENDING:
     case BLOCKED:
@@ -2643,7 +2621,7 @@ function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>(
       cyclicChunk.status = BLOCKED;
       cyclicChunk.value = null;
       cyclicChunk.reason = null;
-      if ((enableProfilerTimer && enableComponentPerformanceTrack) || __DEV__) {
+      if (enableProfilerTimer && enableComponentPerformanceTrack) {
         initializingChunk = cyclicChunk;
       }
       try {
@@ -2672,7 +2650,7 @@ function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>(
   resolvedChunk.value = stream;
   resolvedChunk.reason = controller;
   if (resolveListeners !== null) {
-    wakeChunk(resolveListeners, chunk.value, chunk);
+    wakeChunk(resolveListeners, chunk.value);
   }
 }