From f263ff7e0d61ffd0a41180d4f207067e6f87d606 Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Thu, 24 Jul 2025 15:44:23 -0700 Subject: [PATCH] [compiler] Cleanup diagnostic messages Minor sytlistic cleanup --- .../src/Babel/BabelPlugin.ts | 4 +- .../src/CompilerError.ts | 101 ++++++++++-------- .../src/HIR/BuildHIR.ts | 13 +-- .../Inference/InferMutationAliasingEffects.ts | 41 ++++--- .../ValidateLocalsNotReassignedAfterRender.ts | 40 ++++--- ...ValidateNoFreezingKnownMutableFunctions.ts | 14 ++- .../Validation/ValidateStaticComponents.ts | 37 ++++--- .../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 | 4 +- ...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 | 4 +- ...-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 +- ...-constructed-component-in-render.expect.md | 3 +- ...ly-construct-component-in-render.expect.md | 3 +- ...y-constructed-component-function.expect.md | 3 +- ...onstructed-component-method-call.expect.md | 3 +- ...ically-constructed-component-new.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 +- 317 files changed, 640 insertions(+), 684 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 18946703a03e4..4b59a22e802ff 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 c704d44b55c98..b337f0c724dda 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts @@ -5,6 +5,7 @@ * LICENSE file in the root directory of this source tree. */ +import * as t from '@babel/types'; import {codeFrameColumns} from '@babel/code-frame'; import type {SourceLocation} from './HIR'; import {Err, Ok, Result} from './Utils/Result'; @@ -93,6 +94,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 +137,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', @@ -143,28 +152,18 @@ export class CompilerDiagnostic { } let codeFrame: string; try { - codeFrame = codeFrameColumns( - source, - { - start: { - line: loc.start.line, - column: loc.start.column + 1, - }, - end: { - line: loc.end.line, - column: loc.end.column + 1, - }, - }, - { - message: detail.message, - }, - ); + codeFrame = printCodeFrame(source, loc, detail.message); } 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 +222,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}.`); @@ -232,28 +231,16 @@ export class CompilerErrorDetail { if (loc != null && typeof loc !== 'symbol') { let codeFrame: string; try { - codeFrame = codeFrameColumns( - source, - { - start: { - line: loc.start.line, - column: loc.start.column + 1, - }, - end: { - line: loc.end.line, - column: loc.end.column + 1, - }, - }, - { - message: this.reason, - }, - ); + codeFrame = printCodeFrame(source, loc, this.reason); } 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 +359,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') ); } @@ -438,6 +430,29 @@ export class CompilerError extends Error { } } +function printCodeFrame( + source: string, + loc: t.SourceLocation, + message: string, +): string { + return codeFrameColumns( + source, + { + start: { + line: loc.start.line, + column: loc.start.column + 1, + }, + end: { + line: loc.end.line, + column: loc.end.column + 1, + }, + }, + { + message, + }, + ); +} + function printErrorSummary(severity: ErrorSeverity, message: string): string { let severityCategory: string; switch (severity) { 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 cd85656de24f8..aa940c99e6128 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 678e77cf97a61..ca6c6ebae96f6 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, @@ -2002,6 +2001,7 @@ function computeSignatureForInstruction( break; } case 'StoreGlobal': { + const variable = `\`${value.name}\``; effects.push({ kind: 'MutateGlobal', place: value.value, @@ -2009,13 +2009,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}); @@ -2114,7 +2112,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 569bbbdc2d6e3..31bbf8c94d354 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 b988183530ee4..7a79c74780e2a 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/ValidateStaticComponents.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateStaticComponents.ts index f7adef6ca7128..7f5fb408b4596 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateStaticComponents.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateStaticComponents.ts @@ -5,7 +5,11 @@ * LICENSE file in the root directory of this source tree. */ -import {CompilerError, ErrorSeverity} from '../CompilerError'; +import { + CompilerDiagnostic, + CompilerError, + ErrorSeverity, +} from '../CompilerError'; import {HIRFunction, IdentifierId, SourceLocation} from '../HIR'; import {Result} from '../Utils/Result'; @@ -59,20 +63,23 @@ export function validateStaticComponents( value.tag.identifier.id, ); if (location != null) { - error.push({ - reason: `Components created during render will reset their state each time they are created. Declare components outside of render. `, - severity: ErrorSeverity.InvalidReact, - loc: value.tag.loc, - description: null, - suggestions: null, - }); - error.push({ - reason: `The component may be created during render`, - severity: ErrorSeverity.InvalidReact, - loc: location, - description: null, - suggestions: null, - }); + error.pushDiagnostic( + CompilerDiagnostic.create({ + severity: ErrorSeverity.InvalidReact, + category: 'Cannot create components during render', + description: `Components created during render will reset their state each time they are created. Declare components outside of render. `, + }) + .withDetail({ + kind: 'error', + loc: value.tag.loc, + message: 'This component is created during render', + }) + .withDetail({ + kind: 'error', + loc: location, + message: 'The component is created during render here', + }), + ); } } } 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 7c83e65dff0fd..69ab401c89f8a 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 4b41068f4eb71..096b723554f01 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 eaa480f7c5f62..2d633a3d0fdd9 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 daf0071d25e16..ce42e651259c7 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 81c7be61ac2e6..ee57ea6eb0cd9 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 2bcf5a49f8e6e..8476885de7739 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 988a8dbab8d03..26942a29962a4 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 c6653177a7a53..89024fd210e5a 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 a33ff7ce76582..cc0ad9de117d2 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 fea112547e445..624bc8b0b571c 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 dad64bcbd8dc4..499f2dd873972 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 e2894b6efd21b..a89efa7c451d8 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 ecc0303692ea5..c957e5bf7a555 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 9c9cd94dbd1f5..36aba1765a445 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 86af804221926..fbf5ca665b4f7 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 427a573dc789c..2f8806787d2ee 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 408537c5b8a39..6e9887c5ac521 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 2c1c7657f731f..e5c28e6e362f4 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 02e06c7a82fda..4bf9a06b6e979 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 c0bd287e12e87..00a68405f8a1f 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 d1e1476535335..d8436fa2c046e 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 fba4e272ee9d9..a8a83f6b116da 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 815a8fb208327..39d9aa83bd4c9 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 64065a7819a5b..5950ff64a62c7 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 c3ab81ba38beb..d323477c175dc 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 aaccfe84d8833..2b60b2ec7cf51 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 755aa6d68f301..c57d55e29a3d9 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 f3716d810c5a0..3f8e6403aff01 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 abf18e43e3f3d..63c70cb9f90c9 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,6 +21,7 @@ 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 @@ -32,7 +33,6 @@ 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 @@ -43,8 +43,6 @@ error.hook-ref-value.ts:5:23 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 2f8fd0e671727..4aac70a933274 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 d3dd7317ef90e..123428f602497 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 7d7a0dafcee74..1da271e5618e6 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 356b3b7c10638..a401df523c623 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 6abdb5b2efc04..e07aa2e32c1b4 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 585680500b600..d0e4864a76187 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 0f2a99872b37b..a89b7dc0f0902 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 8ac4baa899ff6..b5c2a7eb59793 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 8b70421efd28d..c904e866ff63c 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 0334a33cfee91..c99dfc1e195df 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 27c04ffc5e31e..1518035ae04da 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 bd3269326c438..47f10323ca4d8 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 2dd40f203e266..4b49c5f65301c 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 81dd728b85dfc..6da3b558bda7f 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 ee3619c3dd2be..556d9a26371b3 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 4d2c55cdaa1f0..520a8e4097d14 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 47d099c101633..acd4ff9395fc6 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 b3f75f3ab8d74..8f2783f96909e 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 d5dd79b964976..343c51787e259 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 d5e2cbcb83e27..a9960ad44dd68 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/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md index af8103b7ae515..1224a5b9cf9ca 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md @@ -50,8 +50,7 @@ function Example(props) { ## Logs ``` -{"kind":"CompileError","detail":{"options":{"reason":"Components created during render will reset their state each time they are created. Declare components outside of render. ","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":10,"index":202},"end":{"line":9,"column":19,"index":211},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"}}},"fnLoc":null} -{"kind":"CompileError","detail":{"options":{"reason":"The component may be created during render","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":5,"column":16,"index":124},"end":{"line":5,"column":33,"index":141},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"}}},"fnLoc":null} +{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":9,"column":10,"index":202},"end":{"line":9,"column":19,"index":211},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":5,"column":16,"index":124},"end":{"line":5,"column":33,"index":141},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null} {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":10,"column":1,"index":217},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"fnName":"Example","memoSlots":3,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md index 7720863da34c2..7bec7f73b551a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md @@ -32,8 +32,7 @@ function Example(props) { ## Logs ``` -{"kind":"CompileError","detail":{"options":{"reason":"Components created during render will reset their state each time they are created. Declare components outside of render. ","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":4,"column":10,"index":120},"end":{"line":4,"column":19,"index":129},"filename":"invalid-dynamically-construct-component-in-render.ts"}}},"fnLoc":null} -{"kind":"CompileError","detail":{"options":{"reason":"The component may be created during render","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":37,"index":108},"filename":"invalid-dynamically-construct-component-in-render.ts"}}},"fnLoc":null} +{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":120},"end":{"line":4,"column":19,"index":129},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":37,"index":108},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null} {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":5,"column":1,"index":135},"filename":"invalid-dynamically-construct-component-in-render.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md index 8d218bf24b0de..e7f9ad7f30fd6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md @@ -37,8 +37,7 @@ function Example(props) { ## Logs ``` -{"kind":"CompileError","detail":{"options":{"reason":"Components created during render will reset their state each time they are created. Declare components outside of render. ","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":6,"column":10,"index":130},"end":{"line":6,"column":19,"index":139},"filename":"invalid-dynamically-constructed-component-function.ts"}}},"fnLoc":null} -{"kind":"CompileError","detail":{"options":{"reason":"The component may be created during render","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":3,"column":2,"index":73},"end":{"line":5,"column":3,"index":119},"filename":"invalid-dynamically-constructed-component-function.ts"}}},"fnLoc":null} +{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":6,"column":10,"index":130},"end":{"line":6,"column":19,"index":139},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":2,"index":73},"end":{"line":5,"column":3,"index":119},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"The component is created during render here"}]}},"fnLoc":null} {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":7,"column":1,"index":145},"filename":"invalid-dynamically-constructed-component-function.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md index e3bc7a5eb5796..f6220645ef87b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md @@ -41,8 +41,7 @@ function Example(props) { ## Logs ``` -{"kind":"CompileError","detail":{"options":{"reason":"Components created during render will reset their state each time they are created. Declare components outside of render. ","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":4,"column":10,"index":118},"end":{"line":4,"column":19,"index":127},"filename":"invalid-dynamically-constructed-component-method-call.ts"}}},"fnLoc":null} -{"kind":"CompileError","detail":{"options":{"reason":"The component may be created during render","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":35,"index":106},"filename":"invalid-dynamically-constructed-component-method-call.ts"}}},"fnLoc":null} +{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":118},"end":{"line":4,"column":19,"index":127},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":35,"index":106},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"The component is created during render here"}]}},"fnLoc":null} {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":5,"column":1,"index":133},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"fnName":"Example","memoSlots":4,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md index 02e9f4f4a4b8d..4a72cdd855516 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md @@ -32,8 +32,7 @@ function Example(props) { ## Logs ``` -{"kind":"CompileError","detail":{"options":{"reason":"Components created during render will reset their state each time they are created. Declare components outside of render. ","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":4,"column":10,"index":125},"end":{"line":4,"column":19,"index":134},"filename":"invalid-dynamically-constructed-component-new.ts"}}},"fnLoc":null} -{"kind":"CompileError","detail":{"options":{"reason":"The component may be created during render","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":42,"index":113},"filename":"invalid-dynamically-constructed-component-new.ts"}}},"fnLoc":null} +{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":125},"end":{"line":4,"column":19,"index":134},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":42,"index":113},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"The component is created during render here"}]}},"fnLoc":null} {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":5,"column":1,"index":140},"filename":"invalid-dynamically-constructed-component-new.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` 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 83807391218cf..7bc1e49069b6a 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 7e9247c5ae9a1..006d2a49c0203 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 7ec5c5320f4be..8481ed2c576b0 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 55c9cfcb2c127..f84686bc36bd2 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 ad15e74d97079..1eb6bf66e9642 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 8cb5ce3d788b4..c519d43fb41c0 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 c36f0b4db987d..2e767c3c71e61 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 a66ddd3350caf..40c4bc5394dce 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 3f752a4a44d65..81c36a362cff0 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 846816b7d478e..96cea9c08f0f2 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 436515da99651..4dc5336ebe011 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 0c232de9745ff..dcd302bbe104c 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 9515d32eb7914..67410297f3032 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 6e931e467bec0..bff40e9649d96 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 071bfb2e7b5f4..5a2bea68526fb 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 51bc4e07533e4..1d326012864b9 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 1da7d8f57fbc7..a636c59375425 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 28133aee7bc4f..9d05cd1871fe9 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 254962d99ccec..0492c2c30c309 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, });