From 00a89ec51ffb25cfdbe702b3eda6a2b0d4811eb6 Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Fri, 11 Jul 2025 16:19:12 -0700 Subject: [PATCH] [compiler] Cleanup diagnostic messages Minor sytlistic cleanup --- .../src/Babel/BabelPlugin.ts | 4 +- .../src/CompilerError.ts | 43 ++++++++++++++----- .../src/HIR/BuildHIR.ts | 13 +++--- .../Inference/InferMutationAliasingEffects.ts | 41 ++++++++---------- .../ValidateLocalsNotReassignedAfterRender.ts | 40 +++++++++++------ ...ValidateNoFreezingKnownMutableFunctions.ts | 14 ++++-- .../src/Validation/ValidateUseMemo.ts | 6 +-- .../src/__tests__/Logger-test.ts | 3 +- ...odo.computed-lval-in-destructure.expect.md | 3 +- ...global-in-component-tag-function.expect.md | 5 ++- ...or.assign-global-in-jsx-children.expect.md | 5 ++- ...n-global-in-jsx-spread-attribute.expect.md | 3 +- ...rror.bailout-on-flow-suppression.expect.md | 3 +- ...ut-on-suppression-of-custom-rule.expect.md | 4 +- ...ive-ref-validation-in-use-effect.expect.md | 5 ++- ...-destructuring-asignment-complex.expect.md | 3 +- ...apitalized-function-call-aliased.expect.md | 3 +- .../error.capitalized-function-call.expect.md | 3 +- .../error.capitalized-method-call.expect.md | 3 +- .../error.capture-ref-for-mutation.expect.md | 6 +-- ...ook-unknown-hook-react-namespace.expect.md | 3 +- ...conditional-hooks-as-method-call.expect.md | 3 +- ...ext-variable-only-chained-assign.expect.md | 7 +-- ...variable-in-function-declaration.expect.md | 7 +-- ...ror.default-param-accesses-local.expect.md | 3 +- ...rror.dont-hoist-inline-reference.expect.md | 3 +- ...r.emit-freeze-conflicting-global.expect.md | 3 +- ...erences-variable-its-assigned-to.expect.md | 7 +-- ...ession-with-conditional-optional.expect.md | 1 + ...mber-expression-with-conditional.expect.md | 1 + ...ting-simple-function-declaration.expect.md | 3 +- ...call-freezes-captured-identifier.expect.md | 5 ++- ...call-freezes-captured-memberexpr.expect.md | 5 ++- ...or.hook-property-load-local-hook.expect.md | 4 +- .../compiler/error.hook-ref-value.expect.md | 20 ++++----- ...alid-ReactUseMemo-async-callback.expect.md | 5 ++- ...invalid-access-ref-during-render.expect.md | 3 +- ...-callback-invoked-during-render-.expect.md | 3 +- .../error.invalid-array-push-frozen.expect.md | 5 ++- ...ror.invalid-assign-hook-to-local.expect.md | 3 +- ...d-computed-store-to-frozen-value.expect.md | 5 ++- ...itional-call-aliased-hook-import.expect.md | 3 +- ...ditional-call-aliased-react-hook.expect.md | 3 +- ...l-call-non-hook-imported-as-hook.expect.md | 3 +- ...-conditional-setState-in-useMemo.expect.md | 2 + ...omputed-property-of-frozen-value.expect.md | 5 ++- ...-delete-property-of-frozen-value.expect.md | 5 ++- ...destructure-assignment-to-global.expect.md | 5 ++- ...ucture-to-local-global-variables.expect.md | 5 ++- ...-disallow-mutating-ref-in-render.expect.md | 3 +- ...tating-refs-in-render-transitive.expect.md | 4 +- .../error.invalid-eval-unsupported.expect.md | 3 +- ...pression-mutates-immutable-value.expect.md | 3 +- ...lid-global-reassignment-indirect.expect.md | 5 ++- .../error.invalid-hoisting-setstate.expect.md | 7 +-- ...-argument-mutates-local-variable.expect.md | 7 +-- ...valid-impure-functions-in-render.expect.md | 3 ++ ...id-jsx-captures-context-variable.expect.md | 3 +- ...alid-mutate-after-aliased-freeze.expect.md | 5 ++- ...rror.invalid-mutate-after-freeze.expect.md | 5 ++- ...valid-mutate-context-in-callback.expect.md | 3 +- .../error.invalid-mutate-context.expect.md | 5 ++- ...-mutate-props-in-effect-fixpoint.expect.md | 3 +- ...mutate-props-via-for-of-iterator.expect.md | 5 ++- ...rror.invalid-mutation-in-closure.expect.md | 3 +- ...n-of-possible-props-phi-indirect.expect.md | 3 +- ...eassign-local-variable-in-effect.expect.md | 7 +-- ...d-reanimated-shared-value-writes.expect.md | 3 +- ...as-memo-dep-non-optional-in-body.expect.md | 1 + ...or.invalid-pass-hook-as-call-arg.expect.md | 3 +- .../error.invalid-pass-hook-as-prop.expect.md | 3 +- ...id-pass-mutable-function-as-prop.expect.md | 7 +-- ...ror.invalid-pass-ref-to-function.expect.md | 3 +- ...r.invalid-prop-mutation-indirect.expect.md | 3 +- ...d-property-store-to-frozen-value.expect.md | 5 ++- ...rops-mutation-in-effect-indirect.expect.md | 3 +- ...d-ref-prop-in-render-destructure.expect.md | 3 +- ...ref-prop-in-render-property-load.expect.md | 3 +- .../error.invalid-reassign-const.expect.md | 3 +- ...ssign-local-in-hook-return-value.expect.md | 7 +-- ...local-variable-in-async-callback.expect.md | 9 ++-- ...eassign-local-variable-in-effect.expect.md | 7 +-- ...-local-variable-in-hook-argument.expect.md | 7 +-- ...n-local-variable-in-jsx-callback.expect.md | 7 +-- ...n-callback-invoked-during-render.expect.md | 3 +- ...error.invalid-ref-value-as-props.expect.md | 3 +- ...eturn-mutable-function-from-hook.expect.md | 7 +-- ...d-set-and-read-ref-during-render.expect.md | 4 +- ...ef-nested-property-during-render.expect.md | 4 +- ...-in-useMemo-indirect-useCallback.expect.md | 1 + ...rror.invalid-setState-in-useMemo.expect.md | 2 + ....invalid-sketchy-code-use-forget.expect.md | 4 +- ...invalid-ternary-with-hook-values.expect.md | 6 +-- ...name-not-typed-as-hook-namespace.expect.md | 3 +- ...ider-hook-name-not-typed-as-hook.expect.md | 3 +- ...hooklike-module-default-not-hook.expect.md | 3 +- ...vider-nonhook-name-typed-as-hook.expect.md | 3 +- ...es-memoizes-with-captures-values.expect.md | 9 ++-- ...alid-unclosed-eslint-suppression.expect.md | 3 +- ...nconditional-set-state-in-render.expect.md | 2 + ...f-added-to-dep-without-type-info.expect.md | 20 ++++----- ...-memoized-bc-range-overlaps-hook.expect.md | 3 +- ...valid-useEffect-dep-not-memoized.expect.md | 3 +- ...InsertionEffect-dep-not-memoized.expect.md | 3 +- ...useLayoutEffect-dep-not-memoized.expect.md | 3 +- ...r.invalid-useMemo-async-callback.expect.md | 5 ++- ...or.invalid-useMemo-callback-args.expect.md | 3 +- ...rite-but-dont-read-ref-in-render.expect.md | 3 +- ...invalid-write-ref-prop-in-render.expect.md | 3 +- .../compiler/error.modify-state-2.expect.md | 5 ++- .../compiler/error.modify-state.expect.md | 5 ++- .../error.modify-useReducer-state.expect.md | 5 ++- ...ange-shared-inner-outer-function.expect.md | 7 +-- .../error.mutate-function-property.expect.md | 5 ++- ...lobal-increment-op-invalid-react.expect.md | 3 +- .../error.mutate-hook-argument.expect.md | 10 +++-- ...rror.mutate-property-from-global.expect.md | 5 ++- .../compiler/error.mutate-props.expect.md | 5 ++- .../error.nomemo-and-change-detect.expect.md | 1 + ...or.not-useEffect-external-mutate.expect.md | 10 +++-- ...r.object-capture-global-mutation.expect.md | 3 +- .../error.propertyload-hook.expect.md | 4 +- .../error.reassign-global-fn-arg.expect.md | 5 ++- ....reassignment-to-global-indirect.expect.md | 10 +++-- .../error.reassignment-to-global.expect.md | 10 +++-- ...ror.ref-initialization-arbitrary.expect.md | 6 +-- .../error.ref-initialization-call-2.expect.md | 4 +- .../error.ref-initialization-call.expect.md | 4 +- .../error.ref-initialization-linear.expect.md | 4 +- .../error.ref-initialization-nonif.expect.md | 6 +-- .../error.ref-initialization-other.expect.md | 4 +- ...ref-initialization-post-access-2.expect.md | 4 +- ...r.ref-initialization-post-access.expect.md | 4 +- .../error.ref-like-name-not-Ref.expect.md | 1 + .../error.ref-like-name-not-a-ref.expect.md | 1 + .../compiler/error.ref-optional.expect.md | 3 +- .../error.repro-ref-mutable-range.expect.md | 3 +- ...ror.sketchy-code-exhaustive-deps.expect.md | 3 +- ...rror.sketchy-code-rules-of-hooks.expect.md | 3 +- .../error.store-property-in-global.expect.md | 5 ++- .../error.todo-for-await-loops.expect.md | 3 +- ...p-with-context-variable-iterator.expect.md | 3 +- ...p-with-context-variable-iterator.expect.md | 3 +- ...ences-later-variable-declaration.expect.md | 7 +-- ...error.todo-functiondecl-hoisting.expect.md | 3 +- ...andle-update-context-identifiers.expect.md | 3 +- .../error.todo-hoist-function-decls.expect.md | 3 +- ...ted-function-in-unreachable-code.expect.md | 3 +- ...-hoisting-simple-var-declaration.expect.md | 3 +- ...ok-call-spreads-mutable-iterator.expect.md | 3 +- ...-catch-in-outer-try-with-finally.expect.md | 3 +- ...-invalid-jsx-in-try-with-finally.expect.md | 3 +- .../compiler/error.todo-kitchensink.expect.md | 12 +----- ...ical-expression-within-try-catch.expect.md | 3 +- ...wer-property-load-into-temporary.expect.md | 3 +- ...or.todo-new-target-meta-property.expect.md | 3 +- ...after-construction-sequence-expr.expect.md | 3 +- ...dified-during-after-construction.expect.md | 3 +- ...te-key-while-constructing-object.expect.md | 3 +- ...odo-object-expression-get-syntax.expect.md | 3 +- ...ject-expression-member-expr-call.expect.md | 3 +- ...odo-object-expression-set-syntax.expect.md | 3 +- ...ional-call-chain-in-logical-expr.expect.md | 3 +- ...-optional-call-chain-in-optional.expect.md | 3 +- ...o-optional-call-chain-in-ternary.expect.md | 3 +- .../error.todo-reassign-const.expect.md | 3 +- ...-declaration-for-all-identifiers.expect.md | 3 +- ...ed-function-inferred-as-mutation.expect.md | 2 +- ...from-inferred-mutation-in-logger.expect.md | 6 +-- ...on-with-shadowed-local-same-name.expect.md | 3 +- ...ack-captured-in-context-variable.expect.md | 1 + ...ified-later-preserve-memoization.expect.md | 3 +- ...todo-valid-functiondecl-hoisting.expect.md | 3 +- .../error.todo.try-catch-with-throw.expect.md | 3 +- ...state-in-render-after-loop-break.expect.md | 1 + ...l-set-state-in-render-after-loop.expect.md | 1 + ...-state-in-render-with-loop-throw.expect.md | 1 + ...r.unconditional-set-state-lambda.expect.md | 1 + ...tate-nested-function-expressions.expect.md | 1 + ...ror.update-global-should-bailout.expect.md | 5 ++- ...ia-function-preserve-memoization.expect.md | 4 +- ...operty-dont-preserve-memoization.expect.md | 3 +- ...error.useMemo-callback-generator.expect.md | 3 +- ...ror.useMemo-non-literal-depslist.expect.md | 3 +- ...ror.validate-blocklisted-imports.expect.md | 3 +- ...ffect-deps-invalidated-dep-value.expect.md | 3 +- ...alidate-mutate-ref-arg-in-render.expect.md | 3 +- .../fbt/error.todo-fbt-as-local.expect.md | 1 + ...rror.todo-fbt-unknown-enum-value.expect.md | 1 + .../error.todo-locally-require-fbt.expect.md | 1 + .../error.todo-multiple-fbt-plural.expect.md | 1 + ...ntifier-nopanic-required-feature.expect.md | 1 + ...ynamic-gating-invalid-identifier.expect.md | 3 +- ...e-in-non-react-fn-default-import.expect.md | 1 + .../error.callsite-in-non-react-fn.expect.md | 1 + .../error.non-inlined-effect-fn.expect.md | 1 + .../error.todo-dynamic-gating.expect.md | 1 + .../bailout-retry/error.todo-gating.expect.md | 1 + ...mport-default-property-useEffect.expect.md | 1 + .../bailout-retry/error.todo-syntax.expect.md | 1 + .../bailout-retry/error.use-no-memo.expect.md | 1 + ...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 | 3 ++ ...n-local-variable-in-jsx-callback.expect.md | 7 +-- ...rozen-hoisted-storecontext-const.expect.md | 9 ++-- ...back-captures-reassigned-context.expect.md | 2 + .../error.mutate-frozen-value.expect.md | 5 ++- .../error.mutate-hook-argument.expect.md | 10 +++-- ...or.not-useEffect-external-mutate.expect.md | 10 +++-- ....reassignment-to-global-indirect.expect.md | 10 +++-- .../error.reassignment-to-global.expect.md | 10 +++-- ...on-with-shadowed-local-same-name.expect.md | 3 +- ...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 +- ...ropped-infer-always-invalidating.expect.md | 1 + ...sitive-useMemo-infer-mutate-deps.expect.md | 1 + ...-positive-useMemo-overlap-scopes.expect.md | 1 + ...ack-conditional-access-own-scope.expect.md | 1 + ...ck-infer-conditional-value-block.expect.md | 2 + ...back-captures-reassigned-context.expect.md | 2 + ...nvalid-useCallback-read-maybeRef.expect.md | 1 + ...be-invalid-useMemo-read-maybeRef.expect.md | 1 + ....maybe-mutable-ref-not-preserved.expect.md | 3 +- ...ve-use-memo-ref-missing-reactive.expect.md | 1 + ...back-captures-invalidating-value.expect.md | 1 + .../error.useCallback-aliased-var.expect.md | 1 + ...lback-conditional-access-noAlloc.expect.md | 1 + ...less-specific-conditional-access.expect.md | 1 + ...or.useCallback-property-call-dep.expect.md | 1 + .../error.useMemo-aliased-var.expect.md | 1 + ...less-specific-conditional-access.expect.md | 1 + ...specific-conditional-value-block.expect.md | 2 + ...emo-property-call-chained-object.expect.md | 1 + .../error.useMemo-property-call-dep.expect.md | 1 + ...o-unrelated-mutation-in-depslist.expect.md | 1 + .../error.useMemo-with-refs.flow.expect.md | 4 +- ....validate-useMemo-named-function.expect.md | 3 +- ...-optional-call-chain-in-optional.expect.md | 3 +- ...ession-with-conditional-optional.expect.md | 1 + ...mber-expression-with-conditional.expect.md | 1 + ...bail.rules-of-hooks-3d692676194b.expect.md | 3 +- ...bail.rules-of-hooks-8503ca76d6f8.expect.md | 3 +- ...r.invalid-call-phi-possibly-hook.expect.md | 5 +-- ...nally-call-local-named-like-hook.expect.md | 3 +- ...onally-call-prop-named-like-hook.expect.md | 3 +- ...dcall-hooklike-property-of-local.expect.md | 3 +- ...-call-hooklike-property-of-local.expect.md | 3 +- ...-dynamic-hook-via-hooklike-local.expect.md | 3 +- ....invalid-hook-after-early-return.expect.md | 3 +- ...invalid-hook-as-conditional-test.expect.md | 3 +- .../error.invalid-hook-as-prop.expect.md | 3 +- .../error.invalid-hook-for.expect.md | 4 +- ...or.invalid-hook-from-hook-return.expect.md | 3 +- ...hook-from-property-of-other-hook.expect.md | 3 +- .../error.invalid-hook-if-alternate.expect.md | 3 +- ...error.invalid-hook-if-consequent.expect.md | 3 +- ...ion-expression-object-expression.expect.md | 3 +- ...lid-hook-in-nested-object-method.expect.md | 3 +- ...invalid-hook-optional-methodcall.expect.md | 3 +- ...r.invalid-hook-optional-property.expect.md | 3 +- .../error.invalid-hook-optionalcall.expect.md | 3 +- ...d-hook-reassigned-in-conditional.expect.md | 5 +-- ...alid-rules-of-hooks-1b9527f967f3.expect.md | 6 +-- ...alid-rules-of-hooks-2aabd222fc6a.expect.md | 3 +- ...alid-rules-of-hooks-49d341e5d68f.expect.md | 3 +- ...alid-rules-of-hooks-79128a755612.expect.md | 3 +- ...alid-rules-of-hooks-9718e30b856c.expect.md | 3 +- ...alid-rules-of-hooks-9bf17c174134.expect.md | 4 +- ...alid-rules-of-hooks-b4dcda3d60ed.expect.md | 3 +- ...alid-rules-of-hooks-c906cace44e9.expect.md | 3 +- ...alid-rules-of-hooks-d740d54e9c21.expect.md | 3 +- ...alid-rules-of-hooks-d85c144bdf40.expect.md | 4 +- ...alid-rules-of-hooks-ea7c2fb545a9.expect.md | 3 +- ...alid-rules-of-hooks-f3d6c5e9c83d.expect.md | 3 +- ...alid-rules-of-hooks-f69800950ff0.expect.md | 5 +-- ...alid-rules-of-hooks-0a1dbff27ba0.expect.md | 3 +- ...alid-rules-of-hooks-0de1224ce64b.expect.md | 4 +- ...alid-rules-of-hooks-449a37146a83.expect.md | 3 +- ...alid-rules-of-hooks-76a74b4666e9.expect.md | 3 +- ...alid-rules-of-hooks-d842d36db450.expect.md | 3 +- ...alid-rules-of-hooks-d952b82c2597.expect.md | 3 +- ...alid-rules-of-hooks-368024110a58.expect.md | 3 +- ...alid-rules-of-hooks-8566f9a360e2.expect.md | 3 +- ...alid-rules-of-hooks-a0058f0b446d.expect.md | 3 +- ...rror.rules-of-hooks-27c18dc8dad2.expect.md | 3 +- ...rror.rules-of-hooks-d0935abedc42.expect.md | 3 +- ...rror.rules-of-hooks-e29c874aa913.expect.md | 3 +- ...rror.object-pattern-computed-key.expect.md | 3 +- .../bailout-retry/error.todo-syntax.expect.md | 1 + ...ror.untransformed-fire-reference.expect.md | 1 + .../bailout-retry/error.use-no-memo.expect.md | 1 + ...ror.invalid-mix-fire-and-no-fire.expect.md | 3 +- .../error.invalid-multiple-args.expect.md | 3 +- .../error.invalid-nested-use-effect.expect.md | 3 +- .../error.invalid-not-call.expect.md | 3 +- .../error.invalid-outside-effect.expect.md | 4 +- ...id-rewrite-deps-no-array-literal.expect.md | 3 +- ...rror.invalid-rewrite-deps-spread.expect.md | 3 +- .../error.invalid-spread.expect.md | 3 +- .../error.todo-method.expect.md | 3 +- .../__tests__/ReactCompilerRule-test.ts | 4 +- .../ReactCompilerRuleTypescript-test.ts | 2 +- .../src/rules/ReactCompilerRule.ts | 6 ++- .../__tests__/ReactCompilerRule-test.ts | 4 +- .../ReactCompilerRuleTypescript-test.ts | 2 +- .../src/rules/ReactCompiler.ts | 6 ++- 311 files changed, 603 insertions(+), 643 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/Babel/BabelPlugin.ts b/compiler/packages/babel-plugin-react-compiler/src/Babel/BabelPlugin.ts index 18946703a0..4b59a22e80 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Babel/BabelPlugin.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Babel/BabelPlugin.ts @@ -84,7 +84,9 @@ export default function BabelPluginReactCompiler( } } catch (e) { if (e instanceof CompilerError) { - throw new Error(e.printErrorMessage(pass.file.code)); + throw new Error( + e.printErrorMessage(pass.file.code, {eslint: false}), + ); } throw e; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts index c704d44b55..eb4adeef5d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts @@ -93,6 +93,14 @@ export type CompilerErrorDetailOptions = { suggestions?: Array | null | undefined; }; +export type PrintErrorMessageOptions = { + /** + * ESLint uses 1-indexed columns and prints one error at a time + * So it doesn't require the "Found # error(s)" text + */ + eslint: boolean; +}; + export class CompilerDiagnostic { options: CompilerDiagnosticOptions; @@ -128,7 +136,7 @@ export class CompilerDiagnostic { return this.options.details.filter(d => d.kind === 'error')[0]?.loc ?? null; } - printErrorMessage(source: string): string { + printErrorMessage(source: string, options: PrintErrorMessageOptions): string { const buffer = [ printErrorSummary(this.severity, this.category), '\n\n', @@ -162,9 +170,14 @@ export class CompilerDiagnostic { } catch (e) { codeFrame = detail.message; } - buffer.push( - `\n\n${loc.filename}:${loc.start.line}:${loc.start.column}\n`, - ); + buffer.push('\n\n'); + if (loc.filename != null) { + const line = loc.start.line; + const column = options.eslint + ? loc.start.column + 1 + : loc.start.column; + buffer.push(`${loc.filename}:${line}:${column}\n`); + } buffer.push(codeFrame); break; } @@ -223,7 +236,7 @@ export class CompilerErrorDetail { return this.loc; } - printErrorMessage(source: string): string { + printErrorMessage(source: string, options: PrintErrorMessageOptions): string { const buffer = [printErrorSummary(this.severity, this.reason)]; if (this.description != null) { buffer.push(`\n\n${this.description}.`); @@ -251,9 +264,12 @@ export class CompilerErrorDetail { } catch (e) { codeFrame = ''; } - buffer.push( - `\n\n${loc.filename}:${loc.start.line}:${loc.start.column}\n`, - ); + buffer.push(`\n\n`); + if (loc.filename != null) { + const line = loc.start.line; + const column = options.eslint ? loc.start.column + 1 : loc.start.column; + buffer.push(`${loc.filename}:${line}:${column}\n`); + } buffer.push(codeFrame); buffer.push('\n\n'); } @@ -372,10 +388,15 @@ export class CompilerError extends Error { return this.name; } - printErrorMessage(source: string): string { + printErrorMessage(source: string, options: PrintErrorMessageOptions): string { + if (options.eslint && this.details.length === 1) { + return this.details[0].printErrorMessage(source, options); + } return ( - `Found ${this.details.length} error${this.details.length === 1 ? '' : 's'}:\n` + - this.details.map(detail => detail.printErrorMessage(source)).join('\n') + `Found ${this.details.length} error${this.details.length === 1 ? '' : 's'}:\n\n` + + this.details + .map(detail => detail.printErrorMessage(source, options).trim()) + .join('\n\n') ); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts index 9ea406ef8d..807325a2ab 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts @@ -107,10 +107,9 @@ export function lower( if (binding.kind !== 'Identifier') { builder.errors.pushDiagnostic( CompilerDiagnostic.create({ - category: 'Could not find binding', - description: `[BuildHIR] Could not find binding for param \`${param.node.name}\``, severity: ErrorSeverity.Invariant, - suggestions: null, + category: 'Could not find binding', + description: `[BuildHIR] Could not find binding for param \`${param.node.name}\`.`, }).withDetail({ kind: 'error', loc: param.node.loc ?? null, @@ -172,10 +171,9 @@ export function lower( } else { builder.errors.pushDiagnostic( CompilerDiagnostic.create({ - category: `Handle ${param.node.type} parameters`, - description: `[BuildHIR] Add support for ${param.node.type} parameters`, severity: ErrorSeverity.Todo, - suggestions: null, + category: `Handle ${param.node.type} parameters`, + description: `[BuildHIR] Add support for ${param.node.type} parameters.`, }).withDetail({ kind: 'error', loc: param.node.loc ?? null, @@ -205,8 +203,7 @@ export function lower( CompilerDiagnostic.create({ severity: ErrorSeverity.InvalidJS, category: `Unexpected function body kind`, - description: `Expected function body to be an expression or a block statement, got \`${body.type}\``, - suggestions: null, + description: `Expected function body to be an expression or a block statement, got \`${body.type}\`.`, }).withDetail({ kind: 'error', loc: body.node.loc ?? null, 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 dfee0a10fb..c7913fbb46 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts @@ -447,23 +447,22 @@ function applySignature( reason: value.reason, context: new Set(), }); - const message = + const variable = effect.value.identifier.name !== null && effect.value.identifier.name.kind === 'named' - ? `\`${effect.value.identifier.name.value}\` cannot be modified` - : 'This value cannot be modified'; + ? `\`${effect.value.identifier.name.value}\`` + : 'value'; effects.push({ kind: 'MutateFrozen', place: effect.value, error: CompilerDiagnostic.create({ severity: ErrorSeverity.InvalidReact, category: 'This value cannot be modified', - description: reason, - suggestions: null, + description: `${reason}.`, }).withDetail({ kind: 'error', loc: effect.value.loc, - message, + message: `${variable} cannot be modified`, }), }); } @@ -1018,30 +1017,30 @@ function applyEffect( effect.value.identifier.declarationId, ) ) { - const description = + const variable = effect.value.identifier.name !== null && effect.value.identifier.name.kind === 'named' - ? `Variable \`${effect.value.identifier.name.value}\`` - : 'This variable'; + ? `\`${effect.value.identifier.name.value}\`` + : null; 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`, + description: `${variable ?? 'This variable'} 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) { diagnostic.withDetail({ kind: 'error', loc: hoistedAccess.loc, - message: 'Variable accessed before it is declared', + message: `${variable ?? 'variable'} accessed before it is declared`, }); } diagnostic.withDetail({ kind: 'error', loc: effect.value.loc, - message: 'The variable is declared here', + message: `${variable ?? 'variable'} is declared here`, }); applyEffect( @@ -1061,11 +1060,11 @@ function applyEffect( reason: value.reason, context: new Set(), }); - const message = + const variable = effect.value.identifier.name !== null && effect.value.identifier.name.kind === 'named' - ? `\`${effect.value.identifier.name.value}\` cannot be modified` - : 'This value cannot be modified'; + ? `\`${effect.value.identifier.name.value}\`` + : 'value'; applyEffect( context, state, @@ -1078,11 +1077,11 @@ function applyEffect( error: CompilerDiagnostic.create({ severity: ErrorSeverity.InvalidReact, category: 'This value cannot be modified', - description: reason, + description: `${reason}.`, }).withDetail({ kind: 'error', loc: effect.value.loc, - message, + message: `${variable} cannot be modified`, }), }, initialized, @@ -1987,6 +1986,7 @@ function computeSignatureForInstruction( break; } case 'StoreGlobal': { + const variable = `\`${value.name}\``; effects.push({ kind: 'MutateGlobal', place: value.value, @@ -1994,13 +1994,11 @@ function computeSignatureForInstruction( 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, + description: `Variable ${variable} is declared outside of the component/hook. Reassigning this value during render 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)`, }).withDetail({ kind: 'error', loc: instr.loc, - message: 'Cannot reassign variable', + message: `${variable} cannot be reassigned`, }), }); effects.push({kind: 'Assign', from: value.value, into: lvalue}); @@ -2099,7 +2097,6 @@ function computeEffectsForLegacySignature( ? `\`${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, diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateLocalsNotReassignedAfterRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateLocalsNotReassignedAfterRender.ts index 569bbbdc2d..31bbf8c94d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateLocalsNotReassignedAfterRender.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateLocalsNotReassignedAfterRender.ts @@ -29,15 +29,20 @@ export function validateLocalsNotReassignedAfterRender(fn: HIRFunction): void { ); if (reassignment !== null) { const errors = new CompilerError(); + const variable = + reassignment.identifier.name != null && + reassignment.identifier.name.kind === 'named' + ? `\`${reassignment.identifier.name.value}\`` + : 'variable'; errors.pushDiagnostic( CompilerDiagnostic.create({ severity: ErrorSeverity.InvalidReact, - category: 'Cannot reassign a variable after render completes', - description: `Reassigning ${reassignment.identifier.name != null && reassignment.identifier.name.kind === 'named' ? `variable \`${reassignment.identifier.name.value}\`` : 'a variable'} after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead`, + category: 'Cannot reassign variable after render completes', + description: `Reassigning ${variable} after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.`, }).withDetail({ kind: 'error', loc: reassignment.loc, - message: 'Cannot reassign variable after render completes', + message: `Cannot reassign ${variable} after render completes`, }), ); throw errors; @@ -78,16 +83,25 @@ function getContextReassignment( // if the function or its depends reassign, propagate that fact on the lvalue if (reassignment !== null) { if (isAsync || value.loweredFunc.func.async) { - CompilerError.throwInvalidReact({ - reason: - 'Reassigning a variable in an async function can cause inconsistent behavior on subsequent renders. Consider using state instead', - description: - reassignment.identifier.name !== null && - reassignment.identifier.name.kind === 'named' - ? `Variable \`${reassignment.identifier.name.value}\` cannot be reassigned after render` - : '', - loc: reassignment.loc, - }); + const errors = new CompilerError(); + const variable = + reassignment.identifier.name !== null && + reassignment.identifier.name.kind === 'named' + ? `\`${reassignment.identifier.name.value}\`` + : 'variable'; + errors.pushDiagnostic( + CompilerDiagnostic.create({ + severity: ErrorSeverity.InvalidReact, + category: 'Cannot reassign variable in async function', + description: + 'Reassigning a variable in an async function can cause inconsistent behavior on subsequent renders. Consider using state instead', + }).withDetail({ + kind: 'error', + loc: reassignment.loc, + message: `Cannot reassign ${variable}`, + }), + ); + throw errors; } reassigningFunctions.set(lvalue.identifier.id, reassignment); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoFreezingKnownMutableFunctions.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoFreezingKnownMutableFunctions.ts index b988183530..7a79c74780 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoFreezingKnownMutableFunctions.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoFreezingKnownMutableFunctions.ts @@ -57,22 +57,28 @@ export function validateNoFreezingKnownMutableFunctions( if (operand.effect === Effect.Freeze) { const effect = contextMutationEffects.get(operand.identifier.id); if (effect != null) { + const place = [...effect.places][0]; + const variable = + place != null && + place.identifier.name != null && + place.identifier.name.kind === 'named' + ? `\`${place.identifier.name.value}\`` + : 'a local variable'; errors.pushDiagnostic( CompilerDiagnostic.create({ severity: ErrorSeverity.InvalidReact, category: 'Cannot modify local variables after render completes', - description: `This argument is a function which may reassign or mutate local variables after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead`, + description: `This argument is a function which may reassign or mutate ${variable} after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.`, }) .withDetail({ kind: 'error', loc: operand.loc, - message: - 'This function may (indirectly) reassign or modify local variables after render', + message: `This function may (indirectly) reassign or modify ${variable} after render`, }) .withDetail({ kind: 'error', loc: effect.loc, - message: 'This modifies a local variable', + message: `This modifies ${variable}`, }), ); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts index 7c83e65dff..69ab401c89 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts @@ -82,7 +82,7 @@ export function validateUseMemo(fn: HIRFunction): Result { }).withDetail({ kind: 'error', loc, - message: '', + message: 'Callbacks with parameters are not supported', }), ); } @@ -92,9 +92,9 @@ export function validateUseMemo(fn: HIRFunction): Result { CompilerDiagnostic.create({ severity: ErrorSeverity.InvalidReact, category: - 'useMemo callbacks may not be async or generator functions', + 'useMemo() callbacks may not be async or generator functions', description: - 'useMemo() callbacks are called once and must synchronously return a value', + 'useMemo() callbacks are called once and must synchronously return a value.', suggestions: null, }).withDetail({ kind: 'error', diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/Logger-test.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/Logger-test.ts index 4b41068f4e..096b723554 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/Logger-test.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/Logger-test.ts @@ -58,7 +58,8 @@ it('logs failed compilation', () => { expect(event.detail.severity).toEqual('InvalidReact'); //@ts-ignore - const {start, end, identifierName} = event.detail.loc as t.SourceLocation; + const {start, end, identifierName} = + event.detail.primaryLocation() as t.SourceLocation; expect(start).toEqual({column: 28, index: 28, line: 1}); expect(end).toEqual({column: 33, index: 33, line: 1}); expect(identifierName).toEqual('props'); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error._todo.computed-lval-in-destructure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error._todo.computed-lval-in-destructure.expect.md index eaa480f7c5..2d633a3d0f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error._todo.computed-lval-in-destructure.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error._todo.computed-lval-in-destructure.expect.md @@ -16,6 +16,7 @@ function Component(props) { ``` Found 1 error: + Todo: (BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern error._todo.computed-lval-in-destructure.ts:3:9 @@ -26,8 +27,6 @@ error._todo.computed-lval-in-destructure.ts:3:9 4 | 5 | return x; 6 | } - - ``` \ No newline at end of file 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 daf0071d25..ce42e65125 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,15 +16,16 @@ function Component() { ``` Found 1 error: + 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) +Variable `someGlobal` is declared outside of the component/hook. Reassigning this value during render 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; - | ^^^^^^^^^^ Cannot reassign variable + | ^^^^^^^^^^ `someGlobal` cannot be reassigned 4 | }; 5 | return ; 6 | } 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 81c7be61ac..ee57ea6eb0 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,15 +19,16 @@ function Component() { ``` Found 1 error: + 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) +Variable `someGlobal` is declared outside of the component/hook. Reassigning this value during render 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; - | ^^^^^^^^^^ Cannot reassign variable + | ^^^^^^^^^^ `someGlobal` cannot be reassigned 4 | }; 5 | // Children are generally access/called during render, so 6 | // modifying a global in a children function is almost diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-spread-attribute.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-spread-attribute.expect.md index 2bcf5a49f8..8476885de7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-spread-attribute.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-spread-attribute.expect.md @@ -17,6 +17,7 @@ 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.assign-global-in-jsx-spread-attribute.ts:4:4 @@ -27,8 +28,6 @@ error.assign-global-in-jsx-spread-attribute.ts:4:4 5 | }; 6 | return
; 7 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md index 988a8dbab8..26942a2996 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md @@ -17,6 +17,7 @@ function Foo(props) { ``` Found 1 error: + Error: React Compiler has skipped optimizing this component because one or more React rule violations were reported by Flow. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior $FlowFixMe[react-rule-hook]. @@ -29,8 +30,6 @@ error.bailout-on-flow-suppression.ts:4:2 5 | useX(); 6 | return null; 7 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md index c6653177a7..89024fd210 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md @@ -20,6 +20,7 @@ function lowercasecomponent() { ``` Found 2 errors: + Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior eslint-disable my-app/react-rule. @@ -33,7 +34,6 @@ error.bailout-on-suppression-of-custom-rule.ts:3:0 5 | 'use forget'; 6 | const x = []; - Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior eslint-disable-next-line my-app/react-rule. @@ -46,8 +46,6 @@ error.bailout-on-suppression-of-custom-rule.ts:7:2 8 | return
{x}
; 9 | } 10 | /* eslint-enable my-app/react-rule */ - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-old-inference-false-positive-ref-validation-in-use-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-old-inference-false-positive-ref-validation-in-use-effect.expect.md index a33ff7ce76..cc0ad9de11 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-old-inference-false-positive-ref-validation-in-use-effect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-old-inference-false-positive-ref-validation-in-use-effect.expect.md @@ -37,9 +37,10 @@ function Component() { ``` Found 1 error: + Error: Cannot modify local variables after render completes -This argument is a function which may reassign or mutate local variables after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead +This argument is a function which may reassign or mutate a local variable after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead. error.bug-old-inference-false-positive-ref-validation-in-use-effect.ts:20:12 18 | ); @@ -53,7 +54,7 @@ error.bug-old-inference-false-positive-ref-validation-in-use-effect.ts:20:12 > 23 | } | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 24 | }, [update]); - | ^^^^ This function may (indirectly) reassign or modify local variables after render + | ^^^^ This function may (indirectly) reassign or modify a local variable after render 25 | 26 | return 'ok'; 27 | } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md index fea112547e..624bc8b0b5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md @@ -15,6 +15,7 @@ function Component(props) { ``` Found 1 error: + Invariant: Const declaration cannot be referenced as an expression error.call-args-destructuring-asignment-complex.ts:3:9 @@ -25,8 +26,6 @@ error.call-args-destructuring-asignment-complex.ts:3:9 4 | return x; 5 | } 6 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.expect.md index dad64bcbd8..499f2dd873 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.expect.md @@ -15,6 +15,7 @@ function Foo() { ``` Found 1 error: + Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config Bar may be a component.. @@ -26,8 +27,6 @@ error.capitalized-function-call-aliased.ts:4:2 | ^^^ Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config 5 | } 6 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call.expect.md index e2894b6efd..a89efa7c45 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call.expect.md @@ -16,6 +16,7 @@ function Component() { ``` Found 1 error: + Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config SomeFunc may be a component.. @@ -28,8 +29,6 @@ error.capitalized-function-call.ts:3:12 4 | 5 | return x; 6 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-method-call.expect.md index ecc0303692..c957e5bf7a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-method-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-method-call.expect.md @@ -16,6 +16,7 @@ function Component() { ``` Found 1 error: + Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config SomeFunc may be a component.. @@ -28,8 +29,6 @@ error.capitalized-method-call.ts:3:12 4 | 5 | return x; 6 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.expect.md index 9c9cd94dbd..36aba1765a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.expect.md @@ -33,6 +33,7 @@ export const FIXTURE_ENTRYPOINT = { ``` Found 4 errors: + Error: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) error.capture-ref-for-mutation.ts:12:13 @@ -44,7 +45,6 @@ error.capture-ref-for-mutation.ts:12:13 14 | const moveRight = { 15 | handler: handleKey('right')(), - Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) error.capture-ref-for-mutation.ts:12:13 @@ -56,7 +56,6 @@ error.capture-ref-for-mutation.ts:12:13 14 | const moveRight = { 15 | handler: handleKey('right')(), - Error: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) error.capture-ref-for-mutation.ts:15:13 @@ -68,7 +67,6 @@ error.capture-ref-for-mutation.ts:15:13 17 | return [moveLeft, moveRight]; 18 | } - Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) error.capture-ref-for-mutation.ts:15:13 @@ -79,8 +77,6 @@ error.capture-ref-for-mutation.ts:15:13 16 | }; 17 | return [moveLeft, moveRight]; 18 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hook-unknown-hook-react-namespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hook-unknown-hook-react-namespace.expect.md index 86af804221..fbf5ca665b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hook-unknown-hook-react-namespace.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hook-unknown-hook-react-namespace.expect.md @@ -17,6 +17,7 @@ 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.conditional-hook-unknown-hook-react-namespace.ts:4:8 @@ -27,8 +28,6 @@ error.conditional-hook-unknown-hook-react-namespace.ts:4:8 5 | } 6 | return x; 7 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hooks-as-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hooks-as-method-call.expect.md index 427a573dc7..2f8806787d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hooks-as-method-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hooks-as-method-call.expect.md @@ -17,6 +17,7 @@ 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.conditional-hooks-as-method-call.ts:4:8 @@ -27,8 +28,6 @@ error.conditional-hooks-as-method-call.ts:4:8 5 | } 6 | return x; 7 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.context-variable-only-chained-assign.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.context-variable-only-chained-assign.expect.md index 408537c5b8..6e9887c5ac 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.context-variable-only-chained-assign.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.context-variable-only-chained-assign.expect.md @@ -29,15 +29,16 @@ export const FIXTURE_ENTRYPOINT = { ``` Found 1 error: -Error: Cannot reassign a variable after render completes -Reassigning variable `x` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead +Error: Cannot reassign variable after render completes + +Reassigning `x` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead. error.context-variable-only-chained-assign.ts:10:19 8 | }; 9 | const fn2 = () => { > 10 | const copy2 = (x = 4); - | ^ Cannot reassign variable after render completes + | ^ Cannot reassign `x` after render completes 11 | return [invoke(fn1), copy2, identity(copy2)]; 12 | }; 13 | return invoke(fn2); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.declare-reassign-variable-in-function-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.declare-reassign-variable-in-function-declaration.expect.md index 2c1c7657f7..e5c28e6e36 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.declare-reassign-variable-in-function-declaration.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.declare-reassign-variable-in-function-declaration.expect.md @@ -18,15 +18,16 @@ function Component() { ``` Found 1 error: -Error: Cannot reassign a variable after render completes -Reassigning variable `x` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead +Error: Cannot reassign variable after render completes + +Reassigning `x` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead. error.declare-reassign-variable-in-function-declaration.ts:4:4 2 | let x = null; 3 | function foo() { > 4 | x = 9; - | ^ Cannot reassign variable after render completes + | ^ Cannot reassign `x` after render completes 5 | } 6 | const y = bar(foo); 7 | return ; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.default-param-accesses-local.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.default-param-accesses-local.expect.md index 02e06c7a82..4bf9a06b6e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.default-param-accesses-local.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.default-param-accesses-local.expect.md @@ -23,6 +23,7 @@ export const FIXTURE_ENTRYPOINT = { ``` Found 1 error: + Todo: (BuildHIR::node.lowerReorderableExpression) Expression type `ArrowFunctionExpression` cannot be safely reordered error.default-param-accesses-local.ts:3:6 @@ -37,8 +38,6 @@ error.default-param-accesses-local.ts:3:6 6 | ) { 7 | return y(); 8 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.dont-hoist-inline-reference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.dont-hoist-inline-reference.expect.md index c0bd287e12..00a68405f8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.dont-hoist-inline-reference.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.dont-hoist-inline-reference.expect.md @@ -20,6 +20,7 @@ export const FIXTURE_ENTRYPOINT = { ``` Found 1 error: + Todo: [hoisting] EnterSSA: Expected identifier to be defined before being used Identifier x$1 is undefined. @@ -32,8 +33,6 @@ error.dont-hoist-inline-reference.ts:3:2 4 | return x; 5 | } 6 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.emit-freeze-conflicting-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.emit-freeze-conflicting-global.expect.md index d1e1476535..d8436fa2c0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.emit-freeze-conflicting-global.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.emit-freeze-conflicting-global.expect.md @@ -16,6 +16,7 @@ function useFoo(props) { ``` Found 1 error: + Todo: Encountered conflicting global in generated program Conflict from local binding __DEV__. @@ -28,8 +29,6 @@ error.emit-freeze-conflicting-global.ts:3:8 4 | console.log(__DEV__); 5 | return foo(props.x); 6 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.expect.md index fba4e272ee..a8a83f6b11 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.expect.md @@ -16,15 +16,16 @@ function Component() { ``` Found 1 error: -Error: Cannot reassign a variable after render completes -Reassigning variable `callback` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead +Error: Cannot reassign variable after render completes + +Reassigning `callback` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead. error.function-expression-references-variable-its-assigned-to.ts:3:4 1 | function Component() { 2 | let callback = () => { > 3 | callback = null; - | ^^^^^^^^ Cannot reassign variable after render completes + | ^^^^^^^^ Cannot reassign `callback` after render completes 4 | }; 5 | return
; 6 | } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional-optional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional-optional.expect.md index 815a8fb208..39d9aa83bd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional-optional.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional-optional.expect.md @@ -25,6 +25,7 @@ function Component(props) { ``` Found 1 error: + Memoization: Compilation skipped because existing memoization could not be preserved React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `props.items`, but the source dependencies were [props?.items, props.cond]. Inferred different dependency than source. diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional.expect.md index 64065a7819..5950ff64a6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional.expect.md @@ -25,6 +25,7 @@ function Component(props) { ``` Found 1 error: + Memoization: Compilation skipped because existing memoization could not be preserved React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `props.items`, but the source dependencies were [props?.items, props.cond]. Inferred different dependency than source. diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoisting-simple-function-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoisting-simple-function-declaration.expect.md index c3ab81ba38..d323477c17 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoisting-simple-function-declaration.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoisting-simple-function-declaration.expect.md @@ -25,6 +25,7 @@ export const FIXTURE_ENTRYPOINT = { ``` Found 1 error: + Todo: Support functions with unreachable code that may contain hoisted declarations error.hoisting-simple-function-declaration.ts:6:2 @@ -39,8 +40,6 @@ error.hoisting-simple-function-declaration.ts:6:2 9 | } 10 | 11 | export const FIXTURE_ENTRYPOINT = { - - ``` \ 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 aaccfe84d8..2b60b2ec7c 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,15 +30,16 @@ export const FIXTURE_ENTRYPOINT = { ``` Found 1 error: + 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 +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; - | ^ This value cannot be modified + | ^ value cannot be modified 14 | return ; 15 | } 16 | 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 755aa6d68f..c57d55e29a 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,15 +30,16 @@ export const FIXTURE_ENTRYPOINT = { ``` Found 1 error: + 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 +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; - | ^ This value cannot be modified + | ^ value cannot be modified 14 | return ; 15 | } 16 | diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-property-load-local-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-property-load-local-hook.expect.md index f3716d810c..3f8e6403af 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-property-load-local-hook.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-property-load-local-hook.expect.md @@ -24,6 +24,7 @@ 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.hook-property-load-local-hook.ts:7:12 @@ -35,7 +36,6 @@ error.hook-property-load-local-hook.ts:7:12 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.hook-property-load-local-hook.ts:8:9 @@ -46,8 +46,6 @@ error.hook-property-load-local-hook.ts:8:9 9 | } 10 | 11 | export const FIXTURE_ENTRYPOINT = { - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.expect.md index abf18e43e3..63c70cb9f9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.expect.md @@ -21,17 +21,6 @@ export const FIXTURE_ENTRYPOINT = { ``` Found 2 errors: -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) - -error.hook-ref-value.ts:5:23 - 3 | function Component(props) { - 4 | const ref = useRef(); -> 5 | useEffect(() => {}, [ref.current]); - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) - 6 | } - 7 | - 8 | export const FIXTURE_ENTRYPOINT = { - Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) @@ -44,7 +33,16 @@ error.hook-ref-value.ts:5:23 7 | 8 | export const FIXTURE_ENTRYPOINT = { +Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) +error.hook-ref-value.ts:5:23 + 3 | function Component(props) { + 4 | const ref = useRef(); +> 5 | useEffect(() => {}, [ref.current]); + | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) + 6 | } + 7 | + 8 | export const FIXTURE_ENTRYPOINT = { ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ReactUseMemo-async-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ReactUseMemo-async-callback.expect.md index 2f8fd0e671..4aac70a933 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ReactUseMemo-async-callback.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ReactUseMemo-async-callback.expect.md @@ -16,9 +16,10 @@ function component(a, b) { ``` Found 1 error: -Error: useMemo callbacks may not be async or generator functions -useMemo() callbacks are called once and must synchronously return a value +Error: useMemo() callbacks may not be async or generator functions + +useMemo() callbacks are called once and must synchronously return a value. error.invalid-ReactUseMemo-async-callback.ts:2:24 1 | function component(a, b) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md index d3dd7317ef..123428f602 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md @@ -16,6 +16,7 @@ function Component(props) { ``` Found 1 error: + Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) error.invalid-access-ref-during-render.ts:4:16 @@ -26,8 +27,6 @@ error.invalid-access-ref-during-render.ts:4:16 5 | return value; 6 | } 7 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md index 7d7a0dafce..1da271e561 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md @@ -20,6 +20,7 @@ function Component(props) { ``` Found 1 error: + Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) error.invalid-aliased-ref-in-callback-invoked-during-render-.ts:9:33 @@ -29,8 +30,6 @@ error.invalid-aliased-ref-in-callback-invoked-during-render-.ts:9:33 | ^^^^^^^^^^^^^^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) 10 | } 11 | - - ``` \ 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 356b3b7c10..a401df523c 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,15 +16,16 @@ function Component(props) { ``` Found 1 error: + Error: This value cannot be modified -Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX +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); - | ^ This value cannot be modified + | ^ value cannot be modified 5 | return x; 6 | } 7 | diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-hook-to-local.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-hook-to-local.expect.md index 6abdb5b2ef..e07aa2e32c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-hook-to-local.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-hook-to-local.expect.md @@ -15,6 +15,7 @@ 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.invalid-assign-hook-to-local.ts:2:12 @@ -24,8 +25,6 @@ error.invalid-assign-hook-to-local.ts:2:12 3 | const state = x(null); 4 | return state[0]; 5 | } - - ``` \ 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 585680500b..d0e4864a76 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,15 +17,16 @@ function Component(props) { ``` Found 1 error: + Error: This value cannot be modified -Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX +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; - | ^ This value cannot be modified + | ^ value cannot be modified 6 | return x; 7 | } 8 | diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-hook-import.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-hook-import.expect.md index 0f2a99872b..a89b7dc0f0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-hook-import.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-hook-import.expect.md @@ -19,6 +19,7 @@ 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.invalid-conditional-call-aliased-hook-import.ts:6:11 @@ -29,8 +30,6 @@ error.invalid-conditional-call-aliased-hook-import.ts:6:11 7 | } 8 | return data; 9 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-react-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-react-hook.expect.md index 8ac4baa899..b5c2a7eb59 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-react-hook.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-react-hook.expect.md @@ -19,6 +19,7 @@ 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.invalid-conditional-call-aliased-react-hook.ts:6:10 @@ -29,8 +30,6 @@ error.invalid-conditional-call-aliased-react-hook.ts:6:10 7 | } 8 | return s; 9 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-non-hook-imported-as-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-non-hook-imported-as-hook.expect.md index 8b70421efd..c904e866ff 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-non-hook-imported-as-hook.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-non-hook-imported-as-hook.expect.md @@ -19,6 +19,7 @@ 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.invalid-conditional-call-non-hook-imported-as-hook.ts:6:11 @@ -29,8 +30,6 @@ error.invalid-conditional-call-non-hook-imported-as-hook.ts:6:11 7 | } 8 | return data; 9 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-setState-in-useMemo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-setState-in-useMemo.expect.md index 0334a33cfe..c99dfc1e19 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-setState-in-useMemo.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-setState-in-useMemo.expect.md @@ -23,6 +23,7 @@ function Component({item, cond}) { ``` Found 2 errors: + Error: Calling setState from useMemo may trigger an infinite loop Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState) @@ -35,6 +36,7 @@ error.invalid-conditional-setState-in-useMemo.ts:7:6 8 | setState(0); 9 | } 10 | }, [cond, key, init]); + Error: Calling setState from useMemo may trigger an infinite loop Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState) 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 27c04ffc5e..1518035ae0 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,15 +17,16 @@ function Component(props) { ``` Found 1 error: + Error: This value cannot be modified -Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX +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]; - | ^ This value cannot be modified + | ^ value cannot be modified 6 | return x; 7 | } 8 | 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 bd3269326c..47f10323ca 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,15 +17,16 @@ function Component(props) { ``` Found 1 error: + Error: This value cannot be modified -Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX +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; - | ^ This value cannot be modified + | ^ value cannot be modified 6 | return x; 7 | } 8 | 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 2dd40f203e..4b49c5f653 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,14 +14,15 @@ function useFoo(props) { ``` Found 1 error: + 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) +Variable `x` is declared outside of the component/hook. Reassigning this value during render 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; - | ^ Cannot reassign variable + | ^ `x` cannot be reassigned 3 | return {x}; 4 | } 5 | 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 81dd728b85..6da3b558bd 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,15 +16,16 @@ function Component(props) { ``` Found 1 error: + 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) +Variable `b` is declared outside of the component/hook. Reassigning this value during render 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; - | ^ Cannot reassign variable + | ^ `b` cannot be reassigned 4 | 5 | return [a, b]; 6 | } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md index ee3619c3dd..556d9a2637 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md @@ -17,6 +17,7 @@ function Component() { ``` Found 1 error: + Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) error.invalid-disallow-mutating-ref-in-render.ts:4:2 @@ -27,8 +28,6 @@ error.invalid-disallow-mutating-ref-in-render.ts:4:2 5 | 6 | return ; 11 | }); - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-8566f9a360e2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-8566f9a360e2.expect.md index 4d2c55cdaa..520a8e4097 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-8566f9a360e2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-8566f9a360e2.expect.md @@ -21,6 +21,7 @@ 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) todo.error.invalid-rules-of-hooks-8566f9a360e2.ts:8:4 @@ -31,8 +32,6 @@ todo.error.invalid-rules-of-hooks-8566f9a360e2.ts:8:4 9 | } 10 | return ; 11 | }); - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-a0058f0b446d.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-a0058f0b446d.expect.md index 47d099c101..acd4ff9395 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-a0058f0b446d.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-a0058f0b446d.expect.md @@ -20,6 +20,7 @@ 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) todo.error.invalid-rules-of-hooks-a0058f0b446d.ts:8:4 @@ -30,8 +31,6 @@ todo.error.invalid-rules-of-hooks-a0058f0b446d.ts:8:4 9 | } 10 | } 11 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-27c18dc8dad2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-27c18dc8dad2.expect.md index b3f75f3ab8..8f2783f969 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-27c18dc8dad2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-27c18dc8dad2.expect.md @@ -21,6 +21,7 @@ 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) todo.error.rules-of-hooks-27c18dc8dad2.ts:8:4 @@ -31,8 +32,6 @@ todo.error.rules-of-hooks-27c18dc8dad2.ts:8:4 9 | } 10 | return ; 11 | }); - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-d0935abedc42.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-d0935abedc42.expect.md index d5dd79b964..343c51787e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-d0935abedc42.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-d0935abedc42.expect.md @@ -20,6 +20,7 @@ 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) todo.error.rules-of-hooks-d0935abedc42.ts:8:4 @@ -30,8 +31,6 @@ todo.error.rules-of-hooks-d0935abedc42.ts:8:4 9 | } 10 | }); 11 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-e29c874aa913.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-e29c874aa913.expect.md index d5e2cbcb83..a9960ad44d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-e29c874aa913.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-e29c874aa913.expect.md @@ -21,6 +21,7 @@ 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) todo.error.rules-of-hooks-e29c874aa913.ts:9:4 @@ -31,8 +32,6 @@ todo.error.rules-of-hooks-e29c874aa913.ts:9:4 10 | } catch {} 11 | } 12 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.error.object-pattern-computed-key.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.error.object-pattern-computed-key.expect.md index 8380739121..7bc1e49069 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.error.object-pattern-computed-key.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.error.object-pattern-computed-key.expect.md @@ -22,6 +22,7 @@ export const FIXTURE_ENTRYPOINT = { ``` Found 1 error: + Todo: (BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern todo.error.object-pattern-computed-key.ts:5:9 @@ -32,8 +33,6 @@ todo.error.object-pattern-computed-key.ts:5:9 6 | return value; 7 | } 8 | - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.expect.md index 7e9247c5ae..006d2a49c0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.expect.md @@ -30,6 +30,7 @@ function Component({prop1}) { ``` Found 1 error: + Error: [Fire] Untransformed reference to compiler-required feature. Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (11:4) diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.untransformed-fire-reference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.untransformed-fire-reference.expect.md index 7ec5c5320f..8481ed2c57 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.untransformed-fire-reference.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.untransformed-fire-reference.expect.md @@ -14,6 +14,7 @@ console.log(fire == null); ``` Found 1 error: + Error: [Fire] Untransformed reference to compiler-required feature. null diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.use-no-memo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.use-no-memo.expect.md index 55c9cfcb2c..f84686bc36 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.use-no-memo.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.use-no-memo.expect.md @@ -31,6 +31,7 @@ function Component({props, bar}) { ``` Found 1 error: + Error: [Fire] Untransformed reference to compiler-required feature. null diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-mix-fire-and-no-fire.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-mix-fire-and-no-fire.expect.md index ad15e74d97..1eb6bf66e9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-mix-fire-and-no-fire.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-mix-fire-and-no-fire.expect.md @@ -28,6 +28,7 @@ function Component(props) { ``` Found 1 error: + Error: Cannot compile `fire` All uses of foo must be either used with a fire() call in this effect or not used with a fire() call at all. foo was used with fire() on line 10:10 in this effect. @@ -40,8 +41,6 @@ error.invalid-mix-fire-and-no-fire.ts:11:6 12 | } 13 | 14 | nested(); - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-multiple-args.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-multiple-args.expect.md index 8cb5ce3d78..c519d43fb4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-multiple-args.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-multiple-args.expect.md @@ -23,6 +23,7 @@ function Component({bar, baz}) { ``` Found 1 error: + Error: Cannot compile `fire` fire() can only take in a single call expression as an argument but received multiple arguments. @@ -35,8 +36,6 @@ error.invalid-multiple-args.ts:9:4 10 | }); 11 | 12 | return null; - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-nested-use-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-nested-use-effect.expect.md index c36f0b4db9..2e767c3c71 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-nested-use-effect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-nested-use-effect.expect.md @@ -29,6 +29,7 @@ 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) Cannot call useEffect within a function expression. @@ -41,8 +42,6 @@ error.invalid-nested-use-effect.ts:9:4 10 | function nested() { 11 | fire(foo(props)); 12 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-not-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-not-call.expect.md index a66ddd3350..40c4bc5394 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-not-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-not-call.expect.md @@ -23,6 +23,7 @@ function Component(props) { ``` Found 1 error: + Error: Cannot compile `fire` `fire()` can only receive a function call such as `fire(fn(a,b)). Method calls and other expressions are not allowed. @@ -35,8 +36,6 @@ error.invalid-not-call.ts:9:4 10 | }); 11 | 12 | return null; - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-outside-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-outside-effect.expect.md index 3f752a4a44..81c36a362c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-outside-effect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-outside-effect.expect.md @@ -25,6 +25,7 @@ function Component({props, bar}) { ``` Found 2 errors: + Invariant: Cannot compile `fire` Cannot use `fire` outside of a useEffect function. @@ -38,7 +39,6 @@ error.invalid-outside-effect.ts:8:2 10 | useCallback(() => { 11 | fire(foo(props)); - Invariant: Cannot compile `fire` Cannot use `fire` outside of a useEffect function. @@ -51,8 +51,6 @@ error.invalid-outside-effect.ts:11:4 12 | }, [foo, props]); 13 | 14 | return null; - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-no-array-literal.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-no-array-literal.expect.md index 846816b7d4..96cea9c08f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-no-array-literal.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-no-array-literal.expect.md @@ -26,6 +26,7 @@ function Component(props) { ``` Found 1 error: + Invariant: Cannot compile `fire` You must use an array literal for an effect dependency array when that effect uses `fire()`. @@ -38,8 +39,6 @@ error.invalid-rewrite-deps-no-array-literal.ts:13:5 14 | 15 | return null; 16 | } - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-spread.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-spread.expect.md index 436515da99..4dc5336ebe 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-spread.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-spread.expect.md @@ -29,6 +29,7 @@ function Component(props) { ``` Found 1 error: + Invariant: Cannot compile `fire` You must use an array literal for an effect dependency array when that effect uses `fire()`. @@ -41,8 +42,6 @@ error.invalid-rewrite-deps-spread.ts:15:7 16 | ); 17 | 18 | return null; - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-spread.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-spread.expect.md index 0c232de974..dcd302bbe1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-spread.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-spread.expect.md @@ -23,6 +23,7 @@ function Component(props) { ``` Found 1 error: + Error: Cannot compile `fire` fire() can only take in a single call expression as an argument but received a spread argument. @@ -35,8 +36,6 @@ error.invalid-spread.ts:9:4 10 | }); 11 | 12 | return null; - - ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.todo-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.todo-method.expect.md index 9515d32eb7..67410297f3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.todo-method.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.todo-method.expect.md @@ -23,6 +23,7 @@ function Component(props) { ``` Found 1 error: + Error: Cannot compile `fire` `fire()` can only receive a function call such as `fire(fn(a,b)). Method calls and other expressions are not allowed. @@ -35,8 +36,6 @@ error.todo-method.ts:9:4 10 | }); 11 | 12 | return null; - - ``` \ No newline at end of file diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts index 887e218dda..e18398337b 100644 --- a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts +++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts @@ -159,7 +159,7 @@ const tests: CompilerTestCases = { message: /Handle var kinds in VariableDeclaration/, }, { - message: /Mutating component props or hook arguments is not allowed/, + message: /Modifying component props or hook arguments is not allowed/, }, ], }, @@ -195,7 +195,7 @@ const tests: CompilerTestCases = { errors: [ { message: - /Unexpected reassignment of a variable which was defined outside of the component/, + /Cannot reassign variables declared outside of the component\/hook/, }, ], }, diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRuleTypescript-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRuleTypescript-test.ts index 071bfb2e7b..5a2bea6852 100644 --- a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRuleTypescript-test.ts +++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRuleTypescript-test.ts @@ -61,7 +61,7 @@ const tests: CompilerTestCases = { `, errors: [ { - message: /Mutating a value returned from 'useState\(\)'/, + message: /Modifying a value returned from 'useState\(\)'/, line: 7, }, ], diff --git a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts index 51bc4e0753..1d32601286 100644 --- a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts +++ b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts @@ -200,7 +200,7 @@ const rule: Rule.RuleModule = { end: endLoc, }; context.report({ - message: `${detail.printErrorMessage(sourceCode.text)} ${locStr}`, + message: `${detail.printErrorMessage(sourceCode.text, {eslint: true})} ${locStr}`, loc: firstLineLoc, suggest, }); @@ -223,7 +223,9 @@ const rule: Rule.RuleModule = { } if (loc != null) { context.report({ - message: detail.printErrorMessage(sourceCode.text), + message: detail.printErrorMessage(sourceCode.text, { + eslint: true, + }), loc, suggest, }); diff --git a/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRule-test.ts b/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRule-test.ts index 1da7d8f57f..a636c59375 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRule-test.ts +++ b/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRule-test.ts @@ -161,7 +161,7 @@ const tests: CompilerTestCases = { message: /Handle var kinds in VariableDeclaration/, }, { - message: /Mutating component props or hook arguments is not allowed/, + message: /Modifying component props or hook arguments is not allowed/, }, ], }, @@ -197,7 +197,7 @@ const tests: CompilerTestCases = { errors: [ { message: - /Unexpected reassignment of a variable which was defined outside of the component/, + /Cannot reassign variables declared outside of the component\/hook/, }, ], }, diff --git a/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleTypescript-test.ts b/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleTypescript-test.ts index 28133aee7b..9d05cd1871 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleTypescript-test.ts +++ b/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleTypescript-test.ts @@ -63,7 +63,7 @@ const tests: CompilerTestCases = { `, errors: [ { - message: /Mutating a value returned from 'useState\(\)'/, + message: /Modifying a value returned from 'useState\(\)'/, line: 7, }, ], diff --git a/packages/eslint-plugin-react-hooks/src/rules/ReactCompiler.ts b/packages/eslint-plugin-react-hooks/src/rules/ReactCompiler.ts index 254962d99c..0492c2c30c 100644 --- a/packages/eslint-plugin-react-hooks/src/rules/ReactCompiler.ts +++ b/packages/eslint-plugin-react-hooks/src/rules/ReactCompiler.ts @@ -202,7 +202,7 @@ const rule: Rule.RuleModule = { end: endLoc, }; context.report({ - message: `${detail.printErrorMessage(sourceCode.text)} ${locStr}`, + message: `${detail.printErrorMessage(sourceCode.text, {eslint: true})} ${locStr}`, loc: firstLineLoc, suggest, }); @@ -225,7 +225,9 @@ const rule: Rule.RuleModule = { } if (loc != null) { context.report({ - message: detail.printErrorMessage(sourceCode.text), + message: detail.printErrorMessage(sourceCode.text, { + eslint: true, + }), loc, suggest, });