From 94fe97db2f8f2e42f3437dec28e8735750cdc09c Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Thu, 24 Jul 2025 15:41:42 -0700 Subject: [PATCH] [compiler] Use new diagnostics for core inference errors Uses the new diagnostic type for errors created during mutation/aliasing inference, such as errors for mutating immutable values like props or state, reassigning globals, etc. --- .../src/HIR/PrintHIR.ts | 6 +- .../src/Inference/AliasingEffects.ts | 12 +- .../src/Inference/InferFunctionEffects.ts | 22 ++-- .../Inference/InferMutationAliasingEffects.ts | 123 +++++++++--------- .../Inference/InferMutationAliasingRanges.ts | 4 +- ...global-in-component-tag-function.expect.md | 8 +- ...or.assign-global-in-jsx-children.expect.md | 8 +- ...call-freezes-captured-identifier.expect.md | 8 +- ...call-freezes-captured-memberexpr.expect.md | 8 +- .../error.invalid-array-push-frozen.expect.md | 8 +- ...d-computed-store-to-frozen-value.expect.md | 8 +- ...omputed-property-of-frozen-value.expect.md | 8 +- ...-delete-property-of-frozen-value.expect.md | 8 +- ...destructure-assignment-to-global.expect.md | 8 +- ...ucture-to-local-global-variables.expect.md | 8 +- ...pression-mutates-immutable-value.expect.md | 8 +- ...lid-global-reassignment-indirect.expect.md | 8 +- .../error.invalid-hoisting-setstate.expect.md | 17 +-- ...valid-impure-functions-in-render.expect.md | 24 ++-- ...id-jsx-captures-context-variable.expect.md | 8 +- ...alid-mutate-after-aliased-freeze.expect.md | 8 +- ...rror.invalid-mutate-after-freeze.expect.md | 8 +- ...valid-mutate-context-in-callback.expect.md | 8 +- .../error.invalid-mutate-context.expect.md | 8 +- ...-mutate-props-in-effect-fixpoint.expect.md | 8 +- ...mutate-props-via-for-of-iterator.expect.md | 8 +- ...rror.invalid-mutation-in-closure.expect.md | 8 +- ...n-of-possible-props-phi-indirect.expect.md | 8 +- ...d-reanimated-shared-value-writes.expect.md | 8 +- ...r.invalid-prop-mutation-indirect.expect.md | 8 +- ...d-property-store-to-frozen-value.expect.md | 8 +- ...rops-mutation-in-effect-indirect.expect.md | 8 +- .../compiler/error.modify-state-2.expect.md | 8 +- .../compiler/error.modify-state.expect.md | 8 +- .../error.modify-useReducer-state.expect.md | 8 +- .../error.mutate-function-property.expect.md | 8 +- .../error.mutate-hook-argument.expect.md | 14 +- ...rror.mutate-property-from-global.expect.md | 8 +- .../compiler/error.mutate-props.expect.md | 8 +- ...or.not-useEffect-external-mutate.expect.md | 14 +- ...r.object-capture-global-mutation.expect.md | 4 +- .../error.reassign-global-fn-arg.expect.md | 8 +- ....reassignment-to-global-indirect.expect.md | 14 +- .../error.reassignment-to-global.expect.md | 14 +- .../error.store-property-in-global.expect.md | 8 +- ...ror.update-global-should-bailout.expect.md | 8 +- ...e-after-useeffect-optional-chain.expect.md | 2 +- ...utate-after-useeffect-ref-access.expect.md | 2 +- .../mutate-after-useeffect.expect.md | 2 +- .../no-emit/retry-no-emit.expect.md | 2 +- ...valid-impure-functions-in-render.expect.md | 24 ++-- ...rozen-hoisted-storecontext-const.expect.md | 17 +-- .../error.mutate-frozen-value.expect.md | 8 +- .../error.mutate-hook-argument.expect.md | 14 +- ...or.not-useEffect-external-mutate.expect.md | 14 +- ....reassignment-to-global-indirect.expect.md | 14 +- .../error.reassignment-to-global.expect.md | 14 +- ...e-after-useeffect-optional-chain.expect.md | 2 +- ...utate-after-useeffect-ref-access.expect.md | 2 +- .../mutate-after-useeffect.expect.md | 2 +- .../new-mutability/retry-no-emit.expect.md | 2 +- 61 files changed, 312 insertions(+), 349 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts index 23471a00b097a..cecbb49e44360 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts @@ -995,13 +995,13 @@ export function printAliasingEffect(effect: AliasingEffect): string { return `${effect.kind} ${printPlaceForAliasEffect(effect.value)}`; } case 'MutateFrozen': { - return `MutateFrozen ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`; + return `MutateFrozen ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.category)}`; } case 'MutateGlobal': { - return `MutateGlobal ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`; + return `MutateGlobal ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.category)}`; } case 'Impure': { - return `Impure ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`; + return `Impure ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.category)}`; } case 'Render': { return `Render ${printPlaceForAliasEffect(effect.place)}`; diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts index f844129e26bde..95f4e0f5bb1a0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import {CompilerErrorDetailOptions} from '../CompilerError'; +import {CompilerDiagnostic} from '../CompilerError'; import { FunctionExpression, GeneratedSource, @@ -133,19 +133,19 @@ export type AliasingEffect = /** * Mutation of a value known to be immutable */ - | {kind: 'MutateFrozen'; place: Place; error: CompilerErrorDetailOptions} + | {kind: 'MutateFrozen'; place: Place; error: CompilerDiagnostic} /** * Mutation of a global */ | { kind: 'MutateGlobal'; place: Place; - error: CompilerErrorDetailOptions; + error: CompilerDiagnostic; } /** * Indicates a side-effect that is not safe during render */ - | {kind: 'Impure'; place: Place; error: CompilerErrorDetailOptions} + | {kind: 'Impure'; place: Place; error: CompilerDiagnostic} /** * Indicates that a given place is accessed during render. Used to distingush * hook arguments that are known to be called immediately vs those used for @@ -211,9 +211,9 @@ export function hashEffect(effect: AliasingEffect): string { effect.kind, effect.place.identifier.id, effect.error.severity, - effect.error.reason, + effect.error.category, effect.error.description, - printSourceLocation(effect.error.loc ?? GeneratedSource), + printSourceLocation(effect.error.primaryLocation() ?? GeneratedSource), ].join(':'); } case 'Mutate': diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferFunctionEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferFunctionEffects.ts index 9b347ebb6c4c9..a01ca188a0afa 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferFunctionEffects.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferFunctionEffects.ts @@ -326,26 +326,26 @@ function isEffectSafeOutsideRender(effect: FunctionEffect): boolean { export function getWriteErrorReason(abstractValue: AbstractValue): string { if (abstractValue.reason.has(ValueReason.Global)) { - return 'Writing to a variable defined outside a component or hook is not allowed. Consider using an effect'; + return 'Modifying a variable defined outside a component or hook is not allowed. Consider using an effect'; } else if (abstractValue.reason.has(ValueReason.JsxCaptured)) { - return 'Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX'; + return 'Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX'; } else if (abstractValue.reason.has(ValueReason.Context)) { - return `Mutating a value returned from 'useContext()', which should not be mutated`; + return `Modifying a value returned from 'useContext()' is not allowed.`; } else if (abstractValue.reason.has(ValueReason.KnownReturnSignature)) { - return 'Mutating a value returned from a function whose return value should not be mutated'; + return 'Modifying a value returned from a function whose return value should not be mutated'; } else if (abstractValue.reason.has(ValueReason.ReactiveFunctionArgument)) { - return 'Mutating component props or hook arguments is not allowed. Consider using a local variable instead'; + return 'Modifying component props or hook arguments is not allowed. Consider using a local variable instead'; } else if (abstractValue.reason.has(ValueReason.State)) { - return "Mutating a value returned from 'useState()', which should not be mutated. Use the setter function to update instead"; + return "Modifying a value returned from 'useState()', which should not be modified directly. Use the setter function to update instead"; } else if (abstractValue.reason.has(ValueReason.ReducerState)) { - return "Mutating a value returned from 'useReducer()', which should not be mutated. Use the dispatch function to update instead"; + return "Modifying a value returned from 'useReducer()', which should not be modified directly. Use the dispatch function to update instead"; } else if (abstractValue.reason.has(ValueReason.Effect)) { - return 'Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()'; + return 'Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect()'; } else if (abstractValue.reason.has(ValueReason.HookCaptured)) { - return 'Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook'; + return 'Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook'; } else if (abstractValue.reason.has(ValueReason.HookReturn)) { - return 'Updating a value returned from a hook is not allowed. Consider moving the mutation into the hook where the value is constructed'; + return 'Modifying a value returned from a hook is not allowed. Consider moving the modification into the hook where the value is constructed'; } else { - return 'This mutates a variable that React considers immutable'; + return 'This modifies a variable that React considers immutable'; } } diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts index d02a294b5b43c..678e77cf97a61 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts @@ -6,6 +6,7 @@ */ import { + CompilerDiagnostic, CompilerError, Effect, ErrorSeverity, @@ -446,20 +447,24 @@ function applySignature( reason: value.reason, context: new Set(), }); + const message = + effect.value.identifier.name !== null && + effect.value.identifier.name.kind === 'named' + ? `\`${effect.value.identifier.name.value}\` cannot be modified` + : 'This value cannot be modified'; effects.push({ kind: 'MutateFrozen', place: effect.value, - error: { + error: CompilerDiagnostic.create({ severity: ErrorSeverity.InvalidReact, - reason, - description: - effect.value.identifier.name !== null && - effect.value.identifier.name.kind === 'named' - ? `Found mutation of \`${effect.value.identifier.name.value}\`` - : null, - loc: effect.value.loc, + category: 'This value cannot be modified', + description: reason, suggestions: null, - }, + }).withDetail({ + kind: 'error', + loc: effect.value.loc, + message, + }), }); } } @@ -1016,30 +1021,28 @@ function applyEffect( const description = effect.value.identifier.name !== null && effect.value.identifier.name.kind === 'named' - ? `Variable \`${effect.value.identifier.name.value}\` is accessed before it is declared` - : null; + ? `Variable \`${effect.value.identifier.name.value}\`` + : 'This variable'; const hoistedAccess = context.hoistedContextDeclarations.get( effect.value.identifier.declarationId, ); + const diagnostic = CompilerDiagnostic.create({ + severity: ErrorSeverity.InvalidReact, + category: 'Cannot access variable before it is declared', + description: `${description} is accessed before it is declared, which prevents the earlier access from updating when this value changes over time`, + }); if (hoistedAccess != null && hoistedAccess.loc != effect.value.loc) { - applyEffect( - context, - state, - { - kind: 'MutateFrozen', - place: effect.value, - error: { - severity: ErrorSeverity.InvalidReact, - reason: `This variable is accessed before it is declared, which may prevent it from updating as the assigned value changes over time`, - description, - loc: hoistedAccess.loc, - suggestions: null, - }, - }, - initialized, - effects, - ); + diagnostic.withDetail({ + kind: 'error', + loc: hoistedAccess.loc, + message: 'Variable accessed before it is declared', + }); } + diagnostic.withDetail({ + kind: 'error', + loc: effect.value.loc, + message: 'The variable is declared here', + }); applyEffect( context, @@ -1047,13 +1050,7 @@ function applyEffect( { kind: 'MutateFrozen', place: effect.value, - error: { - severity: ErrorSeverity.InvalidReact, - reason: `This variable is accessed before it is declared, which prevents the earlier access from updating when this value changes over time`, - description, - loc: effect.value.loc, - suggestions: null, - }, + error: diagnostic, }, initialized, effects, @@ -1064,11 +1061,11 @@ function applyEffect( reason: value.reason, context: new Set(), }); - const description = + const message = effect.value.identifier.name !== null && effect.value.identifier.name.kind === 'named' - ? `Found mutation of \`${effect.value.identifier.name.value}\`` - : null; + ? `\`${effect.value.identifier.name.value}\` cannot be modified` + : 'This value cannot be modified'; applyEffect( context, state, @@ -1078,13 +1075,15 @@ function applyEffect( ? 'MutateFrozen' : 'MutateGlobal', place: effect.value, - error: { + error: CompilerDiagnostic.create({ severity: ErrorSeverity.InvalidReact, - reason, - description, + category: 'This value cannot be modified', + description: reason, + }).withDetail({ + kind: 'error', loc: effect.value.loc, - suggestions: null, - }, + message, + }), }, initialized, effects, @@ -2006,13 +2005,18 @@ function computeSignatureForInstruction( effects.push({ kind: 'MutateGlobal', place: value.value, - error: { - reason: - 'Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)', - loc: instr.loc, - suggestions: null, + error: CompilerDiagnostic.create({ severity: ErrorSeverity.InvalidReact, - }, + category: + 'Cannot reassign variables declared outside of the component/hook', + description: + 'Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)', + suggestions: null, + }).withDetail({ + kind: 'error', + loc: instr.loc, + message: 'Cannot reassign variable', + }), }); effects.push({kind: 'Assign', from: value.value, into: lvalue}); break; @@ -2102,17 +2106,20 @@ function computeEffectsForLegacySignature( effects.push({ kind: 'Impure', place: receiver, - error: { - reason: - 'Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)', - description: - signature.canonicalName != null - ? `\`${signature.canonicalName}\` is an impure function whose results may change on every call` - : null, + error: CompilerDiagnostic.create({ severity: ErrorSeverity.InvalidReact, - loc, + category: 'Cannot call impure function during render', + description: + (signature.canonicalName != null + ? `\`${signature.canonicalName}\` is an impure function. ` + : '') + + 'Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)', suggestions: null, - }, + }).withDetail({ + kind: 'error', + loc, + message: 'Cannot call impure function', + }), }); } const stores: Array = []; diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts index 79f8cf8c0e85b..cd344342225ce 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts @@ -195,7 +195,7 @@ export function inferMutationAliasingRanges( effect.kind === 'MutateGlobal' || effect.kind === 'Impure' ) { - errors.push(effect.error); + errors.pushDiagnostic(effect.error); functionEffects.push(effect); } else if (effect.kind === 'Render') { renders.push({index: index++, place: effect.place}); @@ -549,7 +549,7 @@ function appendFunctionErrors(errors: CompilerError, fn: HIRFunction): void { case 'Impure': case 'MutateFrozen': case 'MutateGlobal': { - errors.push(effect.error); + errors.pushDiagnostic(effect.error); break; } } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md index d15aba19d12ee..daf0071d25e16 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md @@ -16,18 +16,18 @@ function Component() { ``` Found 1 error: -Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) +Error: Cannot reassign variables declared outside of the component/hook + +Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) error.assign-global-in-component-tag-function.ts:3:4 1 | function Component() { 2 | const Foo = () => { > 3 | someGlobal = true; - | ^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) + | ^^^^^^^^^^ Cannot reassign variable 4 | }; 5 | return ; 6 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md index 634d98394c3da..81c7be61ac2e6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md @@ -19,18 +19,18 @@ function Component() { ``` Found 1 error: -Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) +Error: Cannot reassign variables declared outside of the component/hook + +Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) error.assign-global-in-jsx-children.ts:3:4 1 | function Component() { 2 | const foo = () => { > 3 | someGlobal = true; - | ^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) + | ^^^^^^^^^^ Cannot reassign variable 4 | }; 5 | // Children are generally access/called during render, so 6 | // modifying a global in a children function is almost - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-identifier.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-identifier.expect.md index 7174acc43d2b5..aaccfe84d8833 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-identifier.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-identifier.expect.md @@ -30,18 +30,18 @@ export const FIXTURE_ENTRYPOINT = { ``` Found 1 error: -Error: Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook +Error: This value cannot be modified + +Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook error.hook-call-freezes-captured-identifier.ts:13:2 11 | }); 12 | > 13 | x.value += count; - | ^ Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook + | ^ This value cannot be modified 14 | return ; 15 | } 16 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-memberexpr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-memberexpr.expect.md index 7a969400a33f7..755aa6d68f301 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-memberexpr.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-memberexpr.expect.md @@ -30,18 +30,18 @@ export const FIXTURE_ENTRYPOINT = { ``` Found 1 error: -Error: Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook +Error: This value cannot be modified + +Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook error.hook-call-freezes-captured-memberexpr.ts:13:2 11 | }); 12 | > 13 | x.value += count; - | ^ Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook + | ^ This value cannot be modified 14 | return ; 15 | } 16 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-array-push-frozen.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-array-push-frozen.expect.md index 137d29cbc2916..356b3b7c10638 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-array-push-frozen.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-array-push-frozen.expect.md @@ -16,18 +16,18 @@ function Component(props) { ``` Found 1 error: -Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX +Error: This value cannot be modified + +Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX error.invalid-array-push-frozen.ts:4:2 2 | const x = []; 3 |
{x}
; > 4 | x.push(props.value); - | ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX + | ^ This value cannot be modified 5 | return x; 6 | } 7 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-computed-store-to-frozen-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-computed-store-to-frozen-value.expect.md index 7391ae00490e7..585680500b600 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-computed-store-to-frozen-value.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-computed-store-to-frozen-value.expect.md @@ -17,18 +17,18 @@ function Component(props) { ``` Found 1 error: -Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX +Error: This value cannot be modified + +Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX error.invalid-computed-store-to-frozen-value.ts:5:2 3 | // freeze 4 |
{x}
; > 5 | x[0] = true; - | ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX + | ^ This value cannot be modified 6 | return x; 7 | } 8 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-computed-property-of-frozen-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-computed-property-of-frozen-value.expect.md index 363d4137f45ae..27c04ffc5e31e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-computed-property-of-frozen-value.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-computed-property-of-frozen-value.expect.md @@ -17,18 +17,18 @@ function Component(props) { ``` Found 1 error: -Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX +Error: This value cannot be modified + +Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX error.invalid-delete-computed-property-of-frozen-value.ts:5:9 3 | // freeze 4 |
{x}
; > 5 | delete x[y]; - | ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX + | ^ This value cannot be modified 6 | return x; 7 | } 8 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-property-of-frozen-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-property-of-frozen-value.expect.md index ccea30731bdc8..bd3269326c438 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-property-of-frozen-value.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-property-of-frozen-value.expect.md @@ -17,18 +17,18 @@ function Component(props) { ``` Found 1 error: -Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX +Error: This value cannot be modified + +Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX error.invalid-delete-property-of-frozen-value.ts:5:9 3 | // freeze 4 |
{x}
; > 5 | delete x.y; - | ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX + | ^ This value cannot be modified 6 | return x; 7 | } 8 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-assignment-to-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-assignment-to-global.expect.md index 7454d40695221..2dd40f203e266 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-assignment-to-global.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-assignment-to-global.expect.md @@ -14,17 +14,17 @@ function useFoo(props) { ``` Found 1 error: -Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) +Error: Cannot reassign variables declared outside of the component/hook + +Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) error.invalid-destructure-assignment-to-global.ts:2:3 1 | function useFoo(props) { > 2 | [x] = props; - | ^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) + | ^ Cannot reassign variable 3 | return {x}; 4 | } 5 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-to-local-global-variables.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-to-local-global-variables.expect.md index dcb4a7af2fd82..81dd728b85dfc 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-to-local-global-variables.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-to-local-global-variables.expect.md @@ -16,18 +16,18 @@ function Component(props) { ``` Found 1 error: -Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) +Error: Cannot reassign variables declared outside of the component/hook + +Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) error.invalid-destructure-to-local-global-variables.ts:3:6 1 | function Component(props) { 2 | let a; > 3 | [a, b] = props.value; - | ^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) + | ^ Cannot reassign variable 4 | 5 | return [a, b]; 6 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-function-expression-mutates-immutable-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-function-expression-mutates-immutable-value.expect.md index 5574b38ccebef..6de3c555e9356 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-function-expression-mutates-immutable-value.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-function-expression-mutates-immutable-value.expect.md @@ -19,20 +19,18 @@ function Component(props) { ``` Found 1 error: -Error: Mutating a value returned from 'useState()', which should not be mutated. Use the setter function to update instead +Error: This value cannot be modified -Found mutation of `x`. +Modifying a value returned from 'useState()', which should not be modified directly. Use the setter function to update instead error.invalid-function-expression-mutates-immutable-value.ts:5:4 3 | const onChange = e => { 4 | // INVALID! should use copy-on-write and pass the new value > 5 | x.value = e.target.value; - | ^ Mutating a value returned from 'useState()', which should not be mutated. Use the setter function to update instead + | ^ `x` cannot be modified 6 | setX(x); 7 | }; 8 | return ; - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-global-reassignment-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-global-reassignment-indirect.expect.md index 161fb36437442..a6579893b00c1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-global-reassignment-indirect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-global-reassignment-indirect.expect.md @@ -36,18 +36,18 @@ export const FIXTURE_ENTRYPOINT = { ``` Found 1 error: -Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) +Error: Cannot reassign variables declared outside of the component/hook + +Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) error.invalid-global-reassignment-indirect.ts:9:4 7 | 8 | const setGlobal = () => { > 9 | someGlobal = true; - | ^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) + | ^^^^^^^^^^ Cannot reassign variable 10 | }; 11 | const indirectSetGlobal = () => { 12 | setGlobal(); - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hoisting-setstate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hoisting-setstate.expect.md index 9c8f800547cc6..6573418aee532 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hoisting-setstate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hoisting-setstate.expect.md @@ -38,35 +38,28 @@ export const FIXTURE_ENTRYPOINT = { ## Error ``` -Found 2 errors: -Error: This variable is accessed before it is declared, which may prevent it from updating as the assigned value changes over time +Found 1 error: +Error: Cannot access variable before it is declared -Variable `setState` is accessed before it is declared. +Variable `setState` is accessed before it is declared, which prevents the earlier access from updating when this value changes over time error.invalid-hoisting-setstate.ts:19:18 17 | * $2 = Function context=setState 18 | */ > 19 | useEffect(() => setState(2), []); - | ^^^^^^^^ This variable is accessed before it is declared, which may prevent it from updating as the assigned value changes over time + | ^^^^^^^^ Variable accessed before it is declared 20 | 21 | const [state, setState] = useState(0); 22 | return ; - -Error: This variable is accessed before it is declared, which prevents the earlier access from updating when this value changes over time - -Variable `setState` is accessed before it is declared. - error.invalid-hoisting-setstate.ts:21:16 19 | useEffect(() => setState(2), []); 20 | > 21 | const [state, setState] = useState(0); - | ^^^^^^^^ This variable is accessed before it is declared, which prevents the earlier access from updating when this value changes over time + | ^^^^^^^^ The variable is declared here 22 | return ; 23 | } 24 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md index 6e87c112b2b6e..c4bc7f55eee15 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md @@ -18,48 +18,42 @@ function Component() { ``` Found 3 errors: -Error: Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) +Error: Cannot call impure function during render -`Date.now` is an impure function whose results may change on every call. +`Date.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) error.invalid-impure-functions-in-render.ts:4:15 2 | 3 | function Component() { > 4 | const date = Date.now(); - | ^^^^^^^^^^ Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) + | ^^^^^^^^^^ Cannot call impure function 5 | const now = performance.now(); 6 | const rand = Math.random(); 7 | return ; +Error: Cannot call impure function during render - -Error: Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) - -`performance.now` is an impure function whose results may change on every call. +`performance.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) error.invalid-impure-functions-in-render.ts:5:14 3 | function Component() { 4 | const date = Date.now(); > 5 | const now = performance.now(); - | ^^^^^^^^^^^^^^^^^ Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) + | ^^^^^^^^^^^^^^^^^ Cannot call impure function 6 | const rand = Math.random(); 7 | return ; 8 | } +Error: Cannot call impure function during render - -Error: Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) - -`Math.random` is an impure function whose results may change on every call. +`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) error.invalid-impure-functions-in-render.ts:6:15 4 | const date = Date.now(); 5 | const now = performance.now(); > 6 | const rand = Math.random(); - | ^^^^^^^^^^^^^ Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) + | ^^^^^^^^^^^^^ Cannot call impure function 7 | return ; 8 | } 9 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-captures-context-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-captures-context-variable.expect.md index 66ff1b657aa7e..b4a4d2df42c7f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-captures-context-variable.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-captures-context-variable.expect.md @@ -51,20 +51,18 @@ export const FIXTURE_ENTRYPOINT = { ``` Found 1 error: -Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX +Error: This value cannot be modified -Found mutation of `i`. +Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX error.invalid-jsx-captures-context-variable.ts:22:2 20 | /> 21 | ); > 22 | i = i + 1; - | ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX + | ^ `i` cannot be modified 23 | items.push( 24 | 13 | y.push(props.p2); - | ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX + | ^ This value cannot be modified 14 | 15 | return ; 16 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-freeze.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-freeze.expect.md index 6d519e039d3bf..4636b3432d39d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-freeze.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-freeze.expect.md @@ -20,18 +20,18 @@ function Component(props) { ``` Found 1 error: -Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX +Error: This value cannot be modified + +Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX error.invalid-mutate-after-freeze.ts:7:2 5 | 6 | // x is Frozen at this point > 7 | x.push(props.p2); - | ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX + | ^ This value cannot be modified 8 | 9 | return
{_}
; 10 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.expect.md index ce290041a7e2e..e97eb19123d03 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.expect.md @@ -25,20 +25,18 @@ function Component(props) { ``` Found 1 error: -Error: Mutating a value returned from 'useContext()', which should not be mutated +Error: This value cannot be modified -Found mutation of `FooContext`. +Modifying a value returned from 'useContext()' is not allowed. error.invalid-mutate-context-in-callback.ts:12:4 10 | // independently 11 | const onClick = () => { > 12 | FooContext.current = true; - | ^^^^^^^^^^ Mutating a value returned from 'useContext()', which should not be mutated + | ^^^^^^^^^^ `FooContext` cannot be modified 13 | }; 14 | return
; 15 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context.expect.md index 0152f67233a87..de4c69512f7f7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context.expect.md @@ -15,18 +15,18 @@ function Component(props) { ``` Found 1 error: -Error: Mutating a value returned from 'useContext()', which should not be mutated +Error: This value cannot be modified + +Modifying a value returned from 'useContext()' is not allowed. error.invalid-mutate-context.ts:3:2 1 | function Component(props) { 2 | const context = useContext(FooContext); > 3 | context.value = props.value; - | ^^^^^^^ Mutating a value returned from 'useContext()', which should not be mutated + | ^^^^^^^ This value cannot be modified 4 | return context.value; 5 | } 6 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-in-effect-fixpoint.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-in-effect-fixpoint.expect.md index 0021119ed7729..795af4b75f26e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-in-effect-fixpoint.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-in-effect-fixpoint.expect.md @@ -26,20 +26,18 @@ function Component(props) { ``` Found 1 error: -Error: Mutating component props or hook arguments is not allowed. Consider using a local variable instead +Error: This value cannot be modified -Found mutation of `y`. +Modifying component props or hook arguments is not allowed. Consider using a local variable instead error.invalid-mutate-props-in-effect-fixpoint.ts:10:4 8 | let y = x; 9 | let mutateProps = () => { > 10 | y.foo = true; - | ^ Mutating component props or hook arguments is not allowed. Consider using a local variable instead + | ^ `y` cannot be modified 11 | }; 12 | let mutatePropsIndirect = () => { 13 | mutateProps(); - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-via-for-of-iterator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-via-for-of-iterator.expect.md index 62815dd23d30a..2a363a7dac818 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-via-for-of-iterator.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-via-for-of-iterator.expect.md @@ -18,18 +18,18 @@ function Component(props) { ``` Found 1 error: -Error: Mutating component props or hook arguments is not allowed. Consider using a local variable instead +Error: This value cannot be modified + +Modifying component props or hook arguments is not allowed. Consider using a local variable instead error.invalid-mutate-props-via-for-of-iterator.ts:4:4 2 | const items = []; 3 | for (const x of props.items) { > 4 | x.modified = true; - | ^ Mutating component props or hook arguments is not allowed. Consider using a local variable instead + | ^ This value cannot be modified 5 | items.push(x); 6 | } 7 | return items; - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-in-closure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-in-closure.expect.md index e28dda12955e7..83fb1972af0ee 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-in-closure.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-in-closure.expect.md @@ -17,20 +17,18 @@ function useInvalidMutation(options) { ``` Found 1 error: -Error: Mutating component props or hook arguments is not allowed. Consider using a local variable instead +Error: This value cannot be modified -Found mutation of `options`. +Modifying component props or hook arguments is not allowed. Consider using a local variable instead error.invalid-mutation-in-closure.ts:4:4 2 | function test() { 3 | foo(options.foo); // error should not point on this line > 4 | options.foo = 'bar'; - | ^^^^^^^ Mutating component props or hook arguments is not allowed. Consider using a local variable instead + | ^^^^^^^ `options` cannot be modified 5 | } 6 | return test; 7 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-of-possible-props-phi-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-of-possible-props-phi-indirect.expect.md index e942495b5a666..53926d826069f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-of-possible-props-phi-indirect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-of-possible-props-phi-indirect.expect.md @@ -20,20 +20,18 @@ function Component(props) { ``` Found 1 error: -Error: Writing to a variable defined outside a component or hook is not allowed. Consider using an effect +Error: This value cannot be modified -Found mutation of `x`. +Modifying a variable defined outside a component or hook is not allowed. Consider using an effect error.invalid-mutation-of-possible-props-phi-indirect.ts:4:4 2 | let x = cond ? someGlobal : props.foo; 3 | const mutatePhiThatCouldBeProps = () => { > 4 | x.y = true; - | ^ Writing to a variable defined outside a component or hook is not allowed. Consider using an effect + | ^ `x` cannot be modified 5 | }; 6 | const indirectMutateProps = () => { 7 | mutatePhiThatCouldBeProps(); - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.expect.md index f4f03c49122aa..9aef48428fb9f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.expect.md @@ -25,20 +25,18 @@ function SomeComponent() { ``` Found 1 error: -Error: Updating a value returned from a hook is not allowed. Consider moving the mutation into the hook where the value is constructed +Error: This value cannot be modified -Found mutation of `sharedVal`. +Modifying a value returned from a hook is not allowed. Consider moving the modification into the hook where the value is constructed error.invalid-non-imported-reanimated-shared-value-writes.ts:11:22 9 | return ( 10 |