[compiler] Cleanup diagnostic messages

Minor sytlistic cleanup

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-all-output.txt

@@ -1,5 +1,5 @@
 import { c as _c } from "react/compiler-runtime"; // 
-@compilationMode:"all"
+        @compilationMode:"all"
 function nonReactFn() {
   const $ = _c(1);
   let t0;

compiler/apps/playground/components/Editor/EditorImpl.tsx

@@ -11,7 +11,6 @@ import * as t from '@babel/types';
 import BabelPluginReactCompiler, {
   CompilerError,
   CompilerErrorDetail,
-  CompilerDiagnostic,
   Effect,
   ErrorSeverity,
   parseConfigPragmaForTests,
@@ -142,13 +141,10 @@ const COMMON_HOOKS: Array<[string, Hook]> = [
   ],
 ];
 
-function compile(
-  source: string,
-  mode: 'compiler' | 'linter',
-): [CompilerOutput, 'flow' | 'typescript'] {
+function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
   const results = new Map<string, Array<PrintedCompilerPipelineValue>>();
   const error = new CompilerError();
-  const otherErrors: Array<CompilerErrorDetail | CompilerDiagnostic> = [];
+  const otherErrors: Array<CompilerErrorDetail> = [];
   const upsert: (result: PrintedCompilerPipelineValue) => void = result => {
     const entry = results.get(result.name);
     if (Array.isArray(entry)) {
@@ -207,22 +203,6 @@ function compile(
     };
     const parsedOptions = parseConfigPragmaForTests(pragma, {
       compilationMode: 'infer',
-      environment:
-        mode === 'linter'
-          ? {
-              // enabled in compiler
-              validateRefAccessDuringRender: false,
-              // enabled in linter
-              validateNoSetStateInRender: true,
-              validateNoSetStateInEffects: true,
-              validateNoJSXInTryStatements: true,
-              validateNoImpureFunctionsInRender: true,
-              validateStaticComponents: true,
-              validateNoFreezingKnownMutableFunctions: true,
-            }
-          : {
-              /* use defaults for compiler mode */
-            },
     });
     const opts: PluginOptions = parsePluginOptions({
       ...parsedOptions,
@@ -234,7 +214,7 @@ function compile(
         debugLogIRs: logIR,
         logEvent: (_filename: string | null, event: LoggerEvent) => {
           if (event.kind === 'CompileError') {
-            otherErrors.push(event.detail);
+            otherErrors.push(new CompilerErrorDetail(event.detail));
           }
         },
       },
@@ -246,7 +226,7 @@ function compile(
      * (i.e. object shape that is not CompilerError)
      */
     if (err instanceof CompilerError && err.details.length > 0) {
-      error.merge(err);
+      error.details.push(...err.details);
     } else {
       /**
        * Handle unexpected failures by logging (to get a stack trace)
@@ -265,15 +245,12 @@ function compile(
   }
   // Only include logger errors if there weren't other errors
   if (!error.hasErrors() && otherErrors.length !== 0) {
-    otherErrors.forEach(e => error.details.push(e));
+    otherErrors.forEach(e => error.push(e));
   }
   if (error.hasErrors()) {
-    return [{kind: 'err', results, error}, language];
+    return [{kind: 'err', results, error: error}, language];
   }
-  return [
-    {kind: 'ok', results, transformOutput, errors: error.details},
-    language,
-  ];
+  return [{kind: 'ok', results, transformOutput}, language];
 }
 
 export default function Editor(): JSX.Element {
@@ -282,11 +259,7 @@ export default function Editor(): JSX.Element {
   const dispatchStore = useStoreDispatch();
   const {enqueueSnackbar} = useSnackbar();
   const [compilerOutput, language] = useMemo(
-    () => compile(deferredStore.source, 'compiler'),
-    [deferredStore.source],
-  );
-  const [linterOutput] = useMemo(
-    () => compile(deferredStore.source, 'linter'),
+    () => compile(deferredStore.source),
     [deferredStore.source],
   );
 
@@ -312,26 +285,19 @@ export default function Editor(): JSX.Element {
     });
   });
 
-  let mergedOutput: CompilerOutput;
-  let errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
-  if (compilerOutput.kind === 'ok') {
-    errors = linterOutput.kind === 'ok' ? [] : linterOutput.error.details;
-    mergedOutput = {
-      ...compilerOutput,
-      errors,
-    };
-  } else {
-    mergedOutput = compilerOutput;
-    errors = compilerOutput.error.details;
-  }
   return (
     <>
       <div className="relative flex basis top-14">
         <div className={clsx('relative sm:basis-1/4')}>
-          <Input language={language} errors={errors} />
+          <Input
+            language={language}
+            errors={
+              compilerOutput.kind === 'err' ? compilerOutput.error.details : []
+            }
+          />
         </div>
         <div className={clsx('flex sm:flex flex-wrap')}>
-          <Output store={deferredStore} compilerOutput={mergedOutput} />
+          <Output store={deferredStore} compilerOutput={compilerOutput} />
         </div>
       </div>
     </>

compiler/apps/playground/components/Editor/Input.tsx

@@ -36,18 +36,13 @@ export default function Input({errors, language}: Props): JSX.Element {
     const uri = monaco.Uri.parse(`file:///index.js`);
     const model = monaco.editor.getModel(uri);
     invariant(model, 'Model must exist for the selected input file.');
-    renderReactCompilerMarkers({
-      monaco,
-      model,
-      details: errors,
-      source: store.source,
-    });
+    renderReactCompilerMarkers({monaco, model, details: errors});
     /**
      * N.B. that `tabSize` is a model property, not an editor property.
      * So, the tab size has to be set per model.
      */
     model.updateOptions({tabSize: 2});
-  }, [monaco, errors, store.source]);
+  }, [monaco, errors]);
 
   useEffect(() => {
     /**

compiler/apps/playground/components/Editor/Output.tsx

@@ -11,11 +11,7 @@ import {
   InformationCircleIcon,
 } from '@heroicons/react/outline';
 import MonacoEditor, {DiffEditor} from '@monaco-editor/react';
-import {
-  CompilerErrorDetail,
-  CompilerDiagnostic,
-  type CompilerError,
-} from 'babel-plugin-react-compiler';
+import {type CompilerError} from 'babel-plugin-react-compiler';
 import parserBabel from 'prettier/plugins/babel';
 import * as prettierPluginEstree from 'prettier/plugins/estree';
 import * as prettier from 'prettier/standalone';
@@ -48,7 +44,6 @@ export type CompilerOutput =
       kind: 'ok';
       transformOutput: CompilerTransformOutput;
       results: Map<string, Array<PrintedCompilerPipelineValue>>;
-      errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
     }
   | {
       kind: 'err';
@@ -128,36 +123,10 @@ async function tabify(
       parser: transformOutput.language === 'flow' ? 'babel-flow' : 'babel-ts',
       plugins: [parserBabel, prettierPluginEstree],
     });
-
-    let output: string;
-    let language: string;
-    if (compilerOutput.errors.length === 0) {
-      output = code;
-      language = 'javascript';
-    } else {
-      language = 'markdown';
-      output = `
-# Summary
-
-React Compiler compiled this function successfully, but there are lint errors that indicate potential issues with the original code.
-
-## ${compilerOutput.errors.length} Lint Errors
-
-${compilerOutput.errors.map(e => e.printErrorMessage(source, {eslint: false})).join('\n\n')}
-
-## Output
-
-\`\`\`js
-${code}
-\`\`\`
-`.trim();
-    }
-
     reorderedTabs.set(
-      'Output',
+      'JS',
       <TextTabContent
-        output={output}
-        language={language}
+        output={code}
         diff={null}
         showInfoPanel={false}></TextTabContent>,
     );
@@ -173,18 +142,6 @@ ${code}
         </>,
       );
     }
-  } else if (compilerOutput.kind === 'err') {
-    const errors = compilerOutput.error.printErrorMessage(source, {
-      eslint: false,
-    });
-    reorderedTabs.set(
-      'Output',
-      <TextTabContent
-        output={errors}
-        language="markdown"
-        diff={null}
-        showInfoPanel={false}></TextTabContent>,
-    );
   }
   tabs.forEach((tab, name) => {
     reorderedTabs.set(name, tab);
@@ -205,32 +162,17 @@ function getSourceMapUrl(code: string, map: string): string | null {
 }
 
 function Output({store, compilerOutput}: Props): JSX.Element {
-  const [tabsOpen, setTabsOpen] = useState<Set<string>>(
-    () => new Set(['Output']),
-  );
+  const [tabsOpen, setTabsOpen] = useState<Set<string>>(() => new Set(['JS']));
   const [tabs, setTabs] = useState<Map<string, React.ReactNode>>(
     () => new Map(),
   );
-
-  /*
-   * Update the active tab back to the output or errors tab when the compilation state
-   * changes between success/failure.
-   */
-  const [previousOutputKind, setPreviousOutputKind] = useState(
-    compilerOutput.kind,
-  );
-  if (compilerOutput.kind !== previousOutputKind) {
-    setPreviousOutputKind(compilerOutput.kind);
-    setTabsOpen(new Set(['Output']));
-  }
-
   useEffect(() => {
     tabify(store.source, compilerOutput).then(tabs => {
       setTabs(tabs);
     });
   }, [store.source, compilerOutput]);
 
-  const changedPasses: Set<string> = new Set(['Output', 'HIR']); // Initial and final passes should always be bold
+  const changedPasses: Set<string> = new Set(['JS', 'HIR']); // Initial and final passes should always be bold
   let lastResult: string = '';
   for (const [passName, results] of compilerOutput.results) {
     for (const result of results) {
@@ -254,6 +196,20 @@ function Output({store, compilerOutput}: Props): JSX.Element {
         tabs={tabs}
         changedPasses={changedPasses}
       />
+      {compilerOutput.kind === 'err' ? (
+        <div
+          className="flex flex-wrap absolute bottom-0 bg-white grow border-y border-grey-200 transition-all ease-in"
+          style={{width: 'calc(100vw - 650px)'}}>
+          <div className="w-full p-4 basis-full border-b">
+            <h2>COMPILER ERRORS</h2>
+          </div>
+          <pre
+            className="p-4 basis-full text-red-600 overflow-y-scroll whitespace-pre-wrap"
+            style={{width: 'calc(100vw - 650px)', height: '150px'}}>
+            <code>{compilerOutput.error.toString()}</code>
+          </pre>
+        </div>
+      ) : null}
     </>
   );
 }
@@ -262,12 +218,10 @@ function TextTabContent({
   output,
   diff,
   showInfoPanel,
-  language,
 }: {
   output: string;
   diff: string | null;
   showInfoPanel: boolean;
-  language: string;
 }): JSX.Element {
   const [diffMode, setDiffMode] = useState(false);
   return (
@@ -318,7 +272,7 @@ function TextTabContent({
         />
       ) : (
         <MonacoEditor
-          language={language ?? 'javascript'}
+          defaultLanguage="javascript"
           value={output}
           options={{
             ...monacoOptions,

compiler/apps/playground/components/Editor/monacoOptions.ts

@@ -28,5 +28,5 @@ export const monacoOptions: Partial<EditorProps['options']> = {
 
   automaticLayout: true,
   wordWrap: 'on',
-  wrappingIndent: 'same',
+  wrappingIndent: 'deepIndent',
 };

compiler/apps/playground/lib/reactCompilerMonacoDiagnostics.ts

@@ -6,11 +6,7 @@
  */
 
 import {Monaco} from '@monaco-editor/react';
-import {
-  CompilerDiagnostic,
-  CompilerErrorDetail,
-  ErrorSeverity,
-} from 'babel-plugin-react-compiler';
+import {CompilerErrorDetail, ErrorSeverity} from 'babel-plugin-react-compiler';
 import {MarkerSeverity, type editor} from 'monaco-editor';
 
 function mapReactCompilerSeverityToMonaco(
@@ -26,46 +22,38 @@ function mapReactCompilerSeverityToMonaco(
 }
 
 function mapReactCompilerDiagnosticToMonacoMarker(
-  detail: CompilerErrorDetail | CompilerDiagnostic,
+  detail: CompilerErrorDetail,
   monaco: Monaco,
-  source: string,
 ): editor.IMarkerData | null {
-  const loc = detail.primaryLocation();
-  if (loc == null || typeof loc === 'symbol') {
+  if (detail.loc == null || typeof detail.loc === 'symbol') {
     return null;
   }
   const severity = mapReactCompilerSeverityToMonaco(detail.severity, monaco);
-  let message = detail.printErrorMessage(source, {eslint: true});
+  let message = detail.printErrorMessage();
   return {
     severity,
     message,
-    startLineNumber: loc.start.line,
-    startColumn: loc.start.column + 1,
-    endLineNumber: loc.end.line,
-    endColumn: loc.end.column + 1,
+    startLineNumber: detail.loc.start.line,
+    startColumn: detail.loc.start.column + 1,
+    endLineNumber: detail.loc.end.line,
+    endColumn: detail.loc.end.column + 1,
   };
 }
 
 type ReactCompilerMarkerConfig = {
   monaco: Monaco;
   model: editor.ITextModel;
-  details: Array<CompilerErrorDetail | CompilerDiagnostic>;
-  source: string;
+  details: Array<CompilerErrorDetail>;
 };
 let decorations: Array<string> = [];
 export function renderReactCompilerMarkers({
   monaco,
   model,
   details,
-  source,
 }: ReactCompilerMarkerConfig): void {
   const markers: Array<editor.IMarkerData> = [];
   for (const detail of details) {
-    const marker = mapReactCompilerDiagnosticToMonacoMarker(
-      detail,
-      monaco,
-      source,
-    );
+    const marker = mapReactCompilerDiagnosticToMonacoMarker(detail, monaco);
     if (marker == null) {
       continue;
     }

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 e.withPrintedMessage(pass.file.code, {eslint: false});
+              throw new Error(
+                e.printErrorMessage(pass.file.code, {eslint: false}),
+              );
             }
             throw e;
           }

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

@@ -262,7 +262,6 @@ export class CompilerErrorDetail {
 
 export class CompilerError extends Error {
   details: Array<CompilerErrorDetail | CompilerDiagnostic> = [];
-  printedMessage: string | null = null;
 
   static invariant(
     condition: unknown,
@@ -348,29 +347,18 @@ export class CompilerError extends Error {
   }
 
   override get message(): string {
-    return this.printedMessage ?? this.toString();
+    return this.toString();
   }
 
   override set message(_message: string) {}
 
   override toString(): string {
-    if (this.printedMessage) {
-      return this.printedMessage;
-    }
     if (Array.isArray(this.details)) {
       return this.details.map(detail => detail.toString()).join('\n\n');
     }
     return this.name;
   }
 
-  withPrintedMessage(
-    source: string,
-    options: PrintErrorMessageOptions,
-  ): CompilerError {
-    this.printedMessage = this.printErrorMessage(source, options);
-    return this;
-  }
-
   printErrorMessage(source: string, options: PrintErrorMessageOptions): string {
     if (options.eslint && this.details.length === 1) {
       return this.details[0].printErrorMessage(source, options);

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Suppression.ts

@@ -8,8 +8,8 @@
 import {NodePath} from '@babel/core';
 import * as t from '@babel/types';
 import {
-  CompilerDiagnostic,
   CompilerError,
+  CompilerErrorDetail,
   CompilerSuggestionOperation,
   ErrorSeverity,
 } from '../CompilerError';
@@ -181,11 +181,12 @@ export function suppressionsToCompilerError(
           'Unhandled suppression source',
         );
     }
-    error.pushDiagnostic(
-      CompilerDiagnostic.create({
-        category: reason,
-        description: `React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression \`${suppressionRange.disableComment.value.trim()}\``,
+    error.pushErrorDetail(
+      new CompilerErrorDetail({
+        reason: `${reason}. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior`,
+        description: suppressionRange.disableComment.value.trim(),
         severity: ErrorSeverity.InvalidReact,
+        loc: suppressionRange.disableComment.loc ?? null,
         suggestions: [
           {
             description: suggestion,
@@ -196,10 +197,6 @@ export function suppressionsToCompilerError(
             op: CompilerSuggestionOperation.Remove,
           },
         ],
-      }).withDetail({
-        kind: 'error',
-        loc: suppressionRange.disableComment.loc ?? null,
-        message: 'Found React rule suppression',
       }),
     );
   }

compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts

@@ -113,13 +113,8 @@ function* splitPragma(
  */
 function parseConfigPragmaEnvironmentForTest(
   pragma: string,
-  defaultConfig: PartialEnvironmentConfig,
 ): EnvironmentConfig {
-  // throw early if the defaults are invalid
-  EnvironmentConfigSchema.parse(defaultConfig);
-
-  const maybeConfig: Partial<Record<keyof EnvironmentConfig, unknown>> =
-    defaultConfig;
+  const maybeConfig: Partial<Record<keyof EnvironmentConfig, unknown>> = {};
 
   for (const {key, value: val} of splitPragma(pragma)) {
     if (!hasOwnProperty(EnvironmentConfigSchema.shape, key)) {
@@ -179,13 +174,9 @@ export function parseConfigPragmaForTests(
   pragma: string,
   defaults: {
     compilationMode: CompilationMode;
-    environment?: PartialEnvironmentConfig;
   },
 ): PluginOptions {
-  const environment = parseConfigPragmaEnvironmentForTest(
-    pragma,
-    defaults.environment ?? {},
-  );
+  const environment = parseConfigPragmaEnvironmentForTest(pragma);
   const options: Record<keyof PluginOptions, unknown> = {
     ...defaultOptions,
     panicThreshold: 'all_errors',

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md

@@ -18,15 +18,15 @@ 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
+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
 
-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `$FlowFixMe[react-rule-hook]`
+$FlowFixMe[react-rule-hook].
 
 error.bailout-on-flow-suppression.ts:4:2
   2 |
   3 | function Foo(props) {
 > 4 |   // $FlowFixMe[react-rule-hook]
-    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
   5 |   useX();
   6 |   return null;
   7 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md

@@ -21,28 +21,28 @@ function lowercasecomponent() {
 ```
 Found 2 errors:
 
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+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
 
-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable my-app/react-rule`
+eslint-disable my-app/react-rule.
 
 error.bailout-on-suppression-of-custom-rule.ts:3:0
   1 | // @eslintSuppressionRules:["my-app","react-rule"]
   2 |
 > 3 | /* eslint-disable my-app/react-rule */
-    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
   4 | function lowercasecomponent() {
   5 |   'use forget';
   6 |   const x = [];
 
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+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
 
-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line my-app/react-rule`
+eslint-disable-next-line my-app/react-rule.
 
 error.bailout-on-suppression-of-custom-rule.ts:7:2
    5 |   'use forget';
    6 |   const x = [];
 >  7 |   // eslint-disable-next-line my-app/react-rule
-     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
    8 |   return <div>{x}</div>;
    9 | }
   10 | /* eslint-enable my-app/react-rule */

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.expect.md

@@ -19,26 +19,26 @@ function lowercasecomponent() {
 ```
 Found 2 errors:
 
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+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
 
-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`
+eslint-disable react-hooks/rules-of-hooks.
 
 error.invalid-sketchy-code-use-forget.ts:1:0
 > 1 | /* eslint-disable react-hooks/rules-of-hooks */
-    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
   2 | function lowercasecomponent() {
   3 |   'use forget';
   4 |   const x = [];
 
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+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
 
-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line react-hooks/rules-of-hooks`
+eslint-disable-next-line react-hooks/rules-of-hooks.
 
 error.invalid-sketchy-code-use-forget.ts:5:2
   3 |   'use forget';
   4 |   const x = [];
 > 5 |   // eslint-disable-next-line react-hooks/rules-of-hooks
-    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
   6 |   return <div>{x}</div>;
   7 | }
   8 | /* eslint-enable react-hooks/rules-of-hooks */

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.expect.md

@@ -38,14 +38,14 @@ function CrimesAgainstReact() {
 ```
 Found 1 error:
 
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+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
 
-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`
+eslint-disable react-hooks/rules-of-hooks.
 
 error.invalid-unclosed-eslint-suppression.ts:2:0
   1 | // Note: Everything below this is sketchy
 > 2 | /* eslint-disable react-hooks/rules-of-hooks */
-    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
   3 | function lowercasecomponent() {
   4 |   'use forget';
   5 |   const x = [];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-exhaustive-deps.expect.md

@@ -22,15 +22,15 @@ function Component() {
 ```
 Found 1 error:
 
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+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
 
-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line react-hooks/exhaustive-deps`
+eslint-disable-next-line react-hooks/exhaustive-deps.
 
 error.sketchy-code-exhaustive-deps.ts:6:7
   4 |     () => {
   5 |       item.push(1);
 > 6 |     }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+    |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
   7 |     []
   8 |   );
   9 |

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

@@ -23,13 +23,13 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+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
 
-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`
+eslint-disable react-hooks/rules-of-hooks.
 
 error.sketchy-code-rules-of-hooks.ts:1:0
 > 1 | /* eslint-disable react-hooks/rules-of-hooks */
-    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
   2 | function lowercasecomponent() {
   3 |   const x = [];
   4 |   return <div>{x}</div>;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index-no-func.expect.md

@@ -16,7 +16,6 @@ function Component({foo}) {
 
 ```
 Found 1 error:
-
 Error: Cannot infer dependencies of this effect. This will break your build!
 
 To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index.expect.md

@@ -23,7 +23,6 @@ function Component({foo}) {
 
 ```
 Found 1 error:
-
 Error: Cannot infer dependencies of this effect. This will break your build!
 
 To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.