[compiler] Script to produce markdown of lint rule docs

.codesandbox/ci.json

@@ -1,7 +1,7 @@
 {
   "packages": ["packages/react", "packages/react-dom", "packages/react-server-dom-webpack", "packages/scheduler"],
   "buildCommand": "download-build-in-codesandbox-ci",
-  "node": "20",
+  "node": "18",
   "publishDirectory": {
     "react": "build/oss-experimental/react",
     "react-dom": "build/oss-experimental/react-dom",

.eslintignore

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

.eslintrc.js

@@ -547,10 +547,12 @@ module.exports = {
   },
 
   globals: {
+    $ElementType: 'readonly',
     $Flow$ModuleRef: 'readonly',
     $FlowFixMe: 'readonly',
     $Keys: 'readonly',
     $NonMaybeType: 'readonly',
+    $PropertyType: 'readonly',
     $ReadOnly: 'readonly',
     $ReadOnlyArray: 'readonly',
     $ArrayBufferView: 'readonly',
@@ -565,7 +567,6 @@ module.exports = {
     BigInt: 'readonly',
     BigInt64Array: 'readonly',
     BigUint64Array: 'readonly',
-    CacheType: 'readonly',
     Class: 'readonly',
     ClientRect: 'readonly',
     CopyInspectedElementPath: 'readonly',
@@ -577,19 +578,16 @@ module.exports = {
     $AsyncIterator: 'readonly',
     Iterator: 'readonly',
     AsyncIterator: 'readonly',
-    IntervalID: 'readonly',
     IteratorResult: 'readonly',
     JSONValue: 'readonly',
     JSResourceReference: 'readonly',
-    mixin$Animatable: 'readonly',
     MouseEventHandler: 'readonly',
     NavigateEvent: 'readonly',
-    PerformanceMeasureOptions: 'readonly',
     PropagationPhases: 'readonly',
     PropertyDescriptor: 'readonly',
-    PropertyDescriptorMap: 'readonly',
-    Proxy$traps: 'readonly',
+    React$AbstractComponent: 'readonly',
     React$Component: 'readonly',
+    React$ComponentType: 'readonly',
     React$Config: 'readonly',
     React$Context: 'readonly',
     React$Element: 'readonly',
@@ -621,6 +619,7 @@ module.exports = {
     PropertyIndexedKeyframes: 'readonly',
     KeyframeAnimationOptions: 'readonly',
     GetAnimationsOptions: 'readonly',
+    Animatable: 'readonly',
     ScrollTimeline: 'readonly',
     EventListenerOptionsOrUseCapture: 'readonly',
     FocusOptions: 'readonly',

.github/workflows/compiler_playground.yml

@@ -57,6 +57,8 @@ jobs:
           key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
       - run: npx playwright install --with-deps chromium
         if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
+      - run: npx playwright install-deps
+        if: steps.cache_playwright_browsers.outputs.cache-hit == 'true'
       - run: CI=true yarn test
       - run: ls -R test-results
         if: '!cancelled()'

.github/workflows/runtime_build_and_test.yml

@@ -316,7 +316,7 @@ jobs:
         if: steps.node_modules.outputs.cache-hit != 'true'
       - run: ./scripts/react-compiler/build-compiler.sh && ./scripts/react-compiler/link-compiler.sh
       - run: yarn workspace eslint-plugin-react-hooks test
-
+        
   # ----- BUILD -----
   build_and_lint:
     name: yarn build and lint
@@ -811,18 +811,9 @@ jobs:
           pattern: _build_*
           path: build
           merge-multiple: true
-      - name: Check Playwright version
-        id: playwright_version
-        run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
-      - name: Cache Playwright Browsers for version ${{ steps.playwright_version.outputs.playwright_version }}
-        id: cache_playwright_browsers
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/ms-playwright
-          key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
-      - name: Playwright install deps
-        if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
-        run: npx playwright install --with-deps chromium
+      - run: |
+          npx playwright install
+          sudo npx playwright install-deps
       - run: ./scripts/ci/run_devtools_e2e_tests.js
         env:
           RELEASE_CHANNEL: experimental

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

@@ -1,183 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
-import type {editor} from 'monaco-editor';
-import * as monaco from 'monaco-editor';
-import React, {useState, useCallback} from 'react';
-import {Resizable} from 're-resizable';
-import {useSnackbar} from 'notistack';
-import {useStore, useStoreDispatch} from '../StoreContext';
-import {monacoOptions} from './monacoOptions';
-import {
-  ConfigError,
-  generateOverridePragmaFromConfig,
-  updateSourceWithOverridePragma,
-} from '../../lib/configUtils';
-
-// @ts-expect-error - webpack asset/source loader handles .d.ts files as strings
-import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';
-
-loader.config({monaco});
-
-export default function ConfigEditor(): React.ReactElement {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const store = useStore();
-  const dispatchStore = useStoreDispatch();
-  const {enqueueSnackbar} = useSnackbar();
-
-  const toggleExpanded = useCallback(() => {
-    setIsExpanded(prev => !prev);
-  }, []);
-
-  const handleApplyConfig: () => Promise<void> = async () => {
-    try {
-      const config = store.config || '';
-
-      if (!config.trim()) {
-        enqueueSnackbar(
-          'Config is empty. Please add configuration options first.',
-          {
-            variant: 'warning',
-          },
-        );
-        return;
-      }
-      const newPragma = await generateOverridePragmaFromConfig(config);
-      const updatedSource = updateSourceWithOverridePragma(
-        store.source,
-        newPragma,
-      );
-
-      dispatchStore({
-        type: 'updateFile',
-        payload: {
-          source: updatedSource,
-          config: config,
-        },
-      });
-    } catch (error) {
-      console.error('Failed to apply config:', error);
-
-      if (error instanceof ConfigError && error.message.trim()) {
-        enqueueSnackbar(error.message, {
-          variant: 'error',
-        });
-      } else {
-        enqueueSnackbar('Unexpected error: failed to apply config.', {
-          variant: 'error',
-        });
-      }
-    }
-  };
-
-  const handleChange: (value: string | undefined) => void = value => {
-    if (value === undefined) return;
-
-    // Only update the config
-    dispatchStore({
-      type: 'updateFile',
-      payload: {
-        source: store.source,
-        config: value,
-      },
-    });
-  };
-
-  const handleMount: (
-    _: editor.IStandaloneCodeEditor,
-    monaco: Monaco,
-  ) => void = (_, monaco) => {
-    // Add the babel-plugin-react-compiler type definitions to Monaco
-    monaco.languages.typescript.typescriptDefaults.addExtraLib(
-      //@ts-expect-error - compilerTypeDefs is a string
-      compilerTypeDefs,
-      'file:///node_modules/babel-plugin-react-compiler/dist/index.d.ts',
-    );
-    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-      target: monaco.languages.typescript.ScriptTarget.Latest,
-      allowNonTsExtensions: true,
-      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-      module: monaco.languages.typescript.ModuleKind.ESNext,
-      noEmit: true,
-      strict: false,
-      esModuleInterop: true,
-      allowSyntheticDefaultImports: true,
-      jsx: monaco.languages.typescript.JsxEmit.React,
-    });
-
-    const uri = monaco.Uri.parse(`file:///config.ts`);
-    const model = monaco.editor.getModel(uri);
-    if (model) {
-      model.updateOptions({tabSize: 2});
-    }
-  };
-
-  return (
-    <div className="flex flex-row relative">
-      {isExpanded ? (
-        <>
-          <Resizable
-            className="border-r"
-            minWidth={300}
-            maxWidth={600}
-            defaultSize={{width: 350, height: 'auto'}}
-            enable={{right: true}}>
-            <h2
-              title="Minimize config editor"
-              aria-label="Minimize config editor"
-              onClick={toggleExpanded}
-              className="p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 font-light text-secondary hover:text-link">
-              - Config Overrides
-            </h2>
-            <div className="h-[calc(100vh_-_3.5rem_-_4rem)]">
-              <MonacoEditor
-                path={'config.ts'}
-                language={'typescript'}
-                value={store.config}
-                onMount={handleMount}
-                onChange={handleChange}
-                options={{
-                  ...monacoOptions,
-                  lineNumbers: 'off',
-                  folding: false,
-                  renderLineHighlight: 'none',
-                  scrollBeyondLastLine: false,
-                  hideCursorInOverviewRuler: true,
-                  overviewRulerBorder: false,
-                  overviewRulerLanes: 0,
-                  fontSize: 12,
-                }}
-              />
-            </div>
-          </Resizable>
-          <button
-            onClick={handleApplyConfig}
-            title="Apply config overrides to input"
-            aria-label="Apply config overrides to input"
-            className="absolute right-0 top-1/2 transform -translate-y-1/2 translate-x-1/2 z-10 w-8 h-8 bg-blue-500 hover:bg-blue-600 text-white rounded-full border-2 border-white shadow-lg flex items-center justify-center text-sm font-medium transition-colors duration-150">
-            →
-          </button>
-        </>
-      ) : (
-        <div className="relative items-center h-full px-1 py-6 align-middle border-r border-grey-200">
-          <button
-            title="Expand config editor"
-            aria-label="Expand config editor"
-            style={{
-              transform: 'rotate(90deg) translate(-50%)',
-              whiteSpace: 'nowrap',
-            }}
-            onClick={toggleExpanded}
-            className="flex-grow-0 w-5 transition-colors duration-150 ease-in font-light text-secondary hover:text-link">
-            Config Overrides
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -13,7 +13,7 @@ import BabelPluginReactCompiler, {
   CompilerErrorDetail,
   CompilerDiagnostic,
   Effect,
-  ErrorCategory,
+  ErrorSeverity,
   parseConfigPragmaForTests,
   ValueKind,
   type Hook,
@@ -37,7 +37,6 @@ import {
   type Store,
 } from '../../lib/stores';
 import {useStore, useStoreDispatch} from '../StoreContext';
-import ConfigEditor from './ConfigEditor';
 import Input from './Input';
 import {
   CompilerOutput,
@@ -47,7 +46,6 @@ import {
 } from './Output';
 import {transformFromAstSync} from '@babel/core';
 import {LoggerEvent} from 'babel-plugin-react-compiler/dist/Entrypoint';
-import {useSearchParams} from 'next/navigation';
 
 function parseInput(
   input: string,
@@ -258,7 +256,7 @@ function compile(
       console.error(err);
       error.details.push(
         new CompilerErrorDetail({
-          category: ErrorCategory.Invariant,
+          severity: ErrorSeverity.Invariant,
           reason: `Unexpected failure when transforming input! ${err}`,
           loc: null,
           suggestions: null,
@@ -293,13 +291,7 @@ export default function Editor(): JSX.Element {
     [deferredStore.source],
   );
 
-  // TODO: Remove this once the config editor is more stable
-  const searchParams = useSearchParams();
-  const search = searchParams.get('showConfig');
-  const shouldShowConfig = search === 'true';
-
   useMountEffect(() => {
-    // Initialize store
     let mountStore: Store;
     try {
       mountStore = initStoreFromUrlOrLocalStorage();
@@ -315,12 +307,9 @@ export default function Editor(): JSX.Element {
       });
       mountStore = defaultStore;
     }
-
     dispatchStore({
       type: 'setStore',
-      payload: {
-        store: mountStore,
-      },
+      payload: {store: mountStore},
     });
   });
 
@@ -339,7 +328,6 @@ export default function Editor(): JSX.Element {
   return (
     <>
       <div className="relative flex basis top-14">
-        {shouldShowConfig && <ConfigEditor />}
         <div className={clsx('relative sm:basis-1/4')}>
           <Input language={language} errors={errors} />
         </div>

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

@@ -17,7 +17,6 @@ import {useStore, useStoreDispatch} from '../StoreContext';
 import {monacoOptions} from './monacoOptions';
 // @ts-expect-error TODO: Make TS recognize .d.ts files, in addition to loading them with webpack.
 import React$Types from '../../node_modules/@types/react/index.d.ts';
-import {parseAndFormatConfig} from '../../lib/configUtils.ts';
 
 loader.config({monaco});
 
@@ -80,17 +79,13 @@ export default function Input({errors, language}: Props): JSX.Element {
     });
   }, [monaco, language]);
 
-  const handleChange: (value: string | undefined) => void = async value => {
+  const handleChange: (value: string | undefined) => void = value => {
     if (!value) return;
 
-    // Parse and format the config
-    const config = await parseAndFormatConfig(value);
-
     dispatchStore({
       type: 'updateFile',
       payload: {
         source: value,
-        config,
       },
     });
   };

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

@@ -64,16 +64,12 @@ type Props = {
 async function tabify(
   source: string,
   compilerOutput: CompilerOutput,
-  showInternals: boolean,
 ): Promise<Map<string, ReactNode>> {
   const tabs = new Map<string, React.ReactNode>();
   const reorderedTabs = new Map<string, React.ReactNode>();
   const concattedResults = new Map<string, string>();
   // Concat all top level function declaration results into a single tab for each pass
   for (const [passName, results] of compilerOutput.results) {
-    if (!showInternals && passName !== 'Output' && passName !== 'SourceMap') {
-      continue;
-    }
     for (const result of results) {
       switch (result.kind) {
         case 'hir': {
@@ -229,10 +225,10 @@ function Output({store, compilerOutput}: Props): JSX.Element {
   }
 
   useEffect(() => {
-    tabify(store.source, compilerOutput, store.showInternals).then(tabs => {
+    tabify(store.source, compilerOutput).then(tabs => {
       setTabs(tabs);
     });
-  }, [store.source, compilerOutput, store.showInternals]);
+  }, [store.source, compilerOutput]);
 
   const changedPasses: Set<string> = new Set(['Output', 'HIR']); // Initial and final passes should always be bold
   let lastResult: string = '';
@@ -252,7 +248,7 @@ function Output({store, compilerOutput}: Props): JSX.Element {
   return (
     <>
       <TabbedWindow
-        defaultTab={store.showInternals ? 'HIR' : 'Output'}
+        defaultTab="HIR"
         setTabsOpen={setTabsOpen}
         tabsOpen={tabsOpen}
         tabs={tabs}

compiler/apps/playground/components/Header.tsx

@@ -14,11 +14,10 @@ import {useState} from 'react';
 import {defaultStore} from '../lib/defaultStore';
 import {IconGitHub} from './Icons/IconGitHub';
 import Logo from './Logo';
-import {useStore, useStoreDispatch} from './StoreContext';
+import {useStoreDispatch} from './StoreContext';
 
 export default function Header(): JSX.Element {
   const [showCheck, setShowCheck] = useState(false);
-  const store = useStore();
   const dispatchStore = useStoreDispatch();
   const {enqueueSnackbar, closeSnackbar} = useSnackbar();
 
@@ -57,27 +56,6 @@ export default function Header(): JSX.Element {
         <p className="hidden select-none sm:block">React Compiler Playground</p>
       </div>
       <div className="flex items-center text-[15px] gap-4">
-        <div className="flex items-center gap-2">
-          <label className="relative inline-block w-[34px] h-5">
-            <input
-              type="checkbox"
-              checked={store.showInternals}
-              onChange={() => dispatchStore({type: 'toggleInternals'})}
-              className="absolute opacity-0 cursor-pointer h-full w-full m-0"
-            />
-            <span
-              className={clsx(
-                'absolute inset-0 rounded-full cursor-pointer transition-all duration-250',
-                "before:content-[''] before:absolute before:w-4 before:h-4 before:left-0.5 before:bottom-0.5",
-                'before:bg-white before:rounded-full before:transition-transform before:duration-250',
-                'focus-within:shadow-[0_0_1px_#2196F3]',
-                store.showInternals
-                  ? 'bg-blue-500 before:translate-x-3.5'
-                  : 'bg-gray-300',
-              )}></span>
-          </label>
-          <span className="text-secondary">Show Internals</span>
-        </div>
         <button
           title="Reset Playground"
           aria-label="Reset Playground"

compiler/apps/playground/components/StoreContext.tsx

@@ -56,11 +56,7 @@ type ReducerAction =
       type: 'updateFile';
       payload: {
         source: string;
-        config: string;
       };
-    }
-  | {
-      type: 'toggleInternals';
     };
 
 function storeReducer(store: Store, action: ReducerAction): Store {
@@ -70,18 +66,10 @@ function storeReducer(store: Store, action: ReducerAction): Store {
       return newStore;
     }
     case 'updateFile': {
-      const {source, config} = action.payload;
+      const {source} = action.payload;
       const newStore = {
         ...store,
         source,
-        config,
-      };
-      return newStore;
-    }
-    case 'toggleInternals': {
-      const newStore = {
-        ...store,
-        showInternals: !store.showInternals,
       };
       return newStore;
     }

compiler/apps/playground/lib/configUtils.ts

@@ -1,120 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import parserBabel from 'prettier/plugins/babel';
-import prettierPluginEstree from 'prettier/plugins/estree';
-import * as prettier from 'prettier/standalone';
-import {parsePluginOptions} from 'babel-plugin-react-compiler';
-import {parseConfigPragmaAsString} from '../../../packages/babel-plugin-react-compiler/src/Utils/TestUtils';
-
-export class ConfigError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = 'ConfigError';
-  }
-}
-/**
- * Parse config from pragma and format it with prettier
- */
-export async function parseAndFormatConfig(source: string): Promise<string> {
-  const pragma = source.substring(0, source.indexOf('\n'));
-  let configString = parseConfigPragmaAsString(pragma);
-  if (configString !== '') {
-    configString = `\
-    import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
-
-    (${configString} satisfies Partial<PluginOptions>)`;
-  }
-
-  try {
-    const formatted = await prettier.format(configString, {
-      semi: true,
-      parser: 'babel-ts',
-      plugins: [parserBabel, prettierPluginEstree],
-    });
-    return formatted;
-  } catch (error) {
-    console.error('Error formatting config:', error);
-    return ''; // Return empty string if not valid for now
-  }
-}
-
-function extractCurlyBracesContent(input: string): string {
-  const startIndex = input.indexOf('({') + 1;
-  const endIndex = input.lastIndexOf('}');
-  if (startIndex === -1 || endIndex === -1 || endIndex <= startIndex) {
-    throw new Error('No outer curly braces found in input.');
-  }
-  return input.slice(startIndex, endIndex + 1);
-}
-
-function cleanContent(content: string): string {
-  return content
-    .replace(/[\r\n]+/g, ' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-}
-
-/**
- * Validate that a config string can be parsed as a valid PluginOptions object
- * Throws an error if validation fails.
- */
-function validateConfigAsPluginOptions(configString: string): void {
-  // Validate that config can be parse as JS obj
-  let parsedConfig: unknown;
-  try {
-    parsedConfig = new Function(`return (${configString})`)();
-  } catch (_) {
-    throw new ConfigError('Config has invalid syntax.');
-  }
-
-  // Validate against PluginOptions schema
-  try {
-    parsePluginOptions(parsedConfig);
-  } catch (_) {
-    throw new ConfigError('Config does not match the expected schema.');
-  }
-}
-
-/**
- * Generate a the override pragma comment from a formatted config object string
- */
-export async function generateOverridePragmaFromConfig(
-  formattedConfigString: string,
-): Promise<string> {
-  const content = extractCurlyBracesContent(formattedConfigString);
-  const cleanConfig = cleanContent(content);
-
-  validateConfigAsPluginOptions(cleanConfig);
-
-  // Format the config to ensure it's valid
-  await prettier.format(`(${cleanConfig})`, {
-    semi: false,
-    parser: 'babel-ts',
-    plugins: [parserBabel, prettierPluginEstree],
-  });
-
-  return `// @OVERRIDE:${cleanConfig}`;
-}
-
-/**
- * Update the override pragma comment in source code.
- */
-export function updateSourceWithOverridePragma(
-  source: string,
-  newPragma: string,
-): string {
-  const firstLineEnd = source.indexOf('\n');
-  const firstLine = source.substring(0, firstLineEnd);
-
-  const pragmaRegex = /^\/\/\s*@/;
-  if (firstLineEnd !== -1 && pragmaRegex.test(firstLine.trim())) {
-    return newPragma + source.substring(firstLineEnd);
-  } else {
-    return newPragma + '\n' + source;
-  }
-}

compiler/apps/playground/lib/defaultStore.ts

@@ -13,36 +13,10 @@ export default function MyApp() {
 }
 `;
 
-export const defaultConfig = `\
-import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
-
-({
-  compilationMode: 'infer',
-  panicThreshold: 'none',
-  environment: {},
-  logger: null,
-  gating: null,
-  noEmit: false,
-  dynamicGating: null,
-  eslintSuppressionRules: null,
-  flowSuppressions: true,
-  ignoreUseNoForget: false,
-  sources: filename => {
-    return filename.indexOf('node_modules') === -1;
-  },
-  enableReanimatedCheck: true,
-  customOptOutDirectives: null,
-  target: '19',
-} satisfies Partial<PluginOptions>);`;
-
 export const defaultStore: Store = {
   source: index,
-  config: defaultConfig,
-  showInternals: false,
 };
 
 export const emptyStore: Store = {
   source: '',
-  config: '',
-  showInternals: false,
 };

compiler/apps/playground/lib/stores/store.ts

@@ -10,20 +10,18 @@ import {
   compressToEncodedURIComponent,
   decompressFromEncodedURIComponent,
 } from 'lz-string';
-import {defaultStore, defaultConfig} from '../defaultStore';
+import {defaultStore} from '../defaultStore';
 
 /**
  * Global Store for Playground
  */
 export interface Store {
   source: string;
-  config: string;
-  showInternals: boolean;
 }
 export function encodeStore(store: Store): string {
   return compressToEncodedURIComponent(JSON.stringify(store));
 }
-export function decodeStore(hash: string): any {
+export function decodeStore(hash: string): Store {
   return JSON.parse(decompressFromEncodedURIComponent(hash));
 }
 
@@ -64,14 +62,8 @@ export function initStoreFromUrlOrLocalStorage(): Store {
    */
   if (!encodedSource) return defaultStore;
 
-  const raw: any = decodeStore(encodedSource);
+  const raw = decodeStore(encodedSource);
 
   invariant(isValidStore(raw), 'Invalid Store');
-
-  // Make sure all properties are populated
-  return {
-    source: raw.source,
-    config: 'config' in raw ? raw.config : defaultConfig,
-    showInternals: 'showInternals' in raw ? raw.showInternals : false,
-  };
+  return raw;
 }

compiler/apps/playground/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

compiler/apps/playground/package.json

@@ -34,30 +34,26 @@
     "invariant": "^2.2.4",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.52.0",
-    "next": "15.5.2",
+    "next": "^15.2.0-canary.64",
     "notistack": "^3.0.0-alpha.7",
     "prettier": "^3.3.3",
     "pretty-format": "^29.3.1",
     "re-resizable": "^6.9.16",
-    "react": "19.1.1",
-    "react-dom": "19.1.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@types/node": "18.11.9",
-    "@types/react": "19.1.12",
-    "@types/react-dom": "19.1.9",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "autoprefixer": "^10.4.13",
     "clsx": "^1.2.1",
     "concurrently": "^7.4.0",
     "eslint": "^8.28.0",
-    "eslint-config-next": "15.5.2",
+    "eslint-config-next": "^15.0.1",
     "monaco-editor-webpack-plugin": "^7.1.0",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.2.4",
     "wait-on": "^7.2.0"
-  },
-  "resolutions": {
-    "@types/react": "19.1.12",
-    "@types/react-dom": "19.1.9"
   }
 }

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

@@ -14,30 +14,44 @@ import invariant from 'invariant';
 
 export enum ErrorSeverity {
   /**
-   * An actionable error that the developer can fix. For example, product code errors should be
-   * reported as such.
+   * Invalid JS syntax, or valid syntax that is semantically invalid which may indicate some
+   * misunderstanding on the user’s part.
    */
-  Error = 'Error',
+  InvalidJS = 'InvalidJS',
   /**
-   * An error that the developer may not necessarily be able to fix. For example, syntax not
-   * supported by the compiler does not indicate any fault in the product code.
+   * JS syntax that is not supported and which we do not plan to support. Developers should
+   * rewrite to use supported forms.
    */
-  Warning = 'Warning',
+  UnsupportedJS = 'UnsupportedJS',
   /**
-   * Not an error. These will not be surfaced in ESLint, but may be surfaced in other ways
-   * (eg Forgive) where informational hints can be shown.
+   * Code that breaks the rules of React.
    */
-  Hint = 'Hint',
+  InvalidReact = 'InvalidReact',
   /**
-   * These errors will not be reported anywhere. Useful for work in progress validations.
+   * Incorrect configuration of the compiler.
    */
-  Off = 'Off',
+  InvalidConfig = 'InvalidConfig',
+  /**
+   * Code that can reasonably occur and that doesn't break any rules, but is unsafe to preserve
+   * memoization.
+   */
+  CannotPreserveMemoization = 'CannotPreserveMemoization',
+  /**
+   * Unhandled syntax that we don't support yet.
+   */
+  Todo = 'Todo',
+  /**
+   * An unexpected internal error in the compiler that indicates critical issues that can panic
+   * the compiler.
+   */
+  Invariant = 'Invariant',
 }
 
 export type CompilerDiagnosticOptions = {
   category: ErrorCategory;
+  severity: ErrorSeverity;
   reason: string;
-  description: string | null;
+  description: string;
   details: Array<CompilerDiagnosticDetail>;
   suggestions?: Array<CompilerSuggestion> | null | undefined;
 };
@@ -49,7 +63,7 @@ export type CompilerDiagnosticDetail =
   | {
       kind: 'error';
       loc: SourceLocation | null;
-      message: string | null;
+      message: string;
     }
   | {
       kind: 'hint';
@@ -78,11 +92,9 @@ export type CompilerSuggestion =
       description: string;
     };
 
-/**
- * @deprecated use {@link CompilerDiagnosticOptions} instead
- */
 export type CompilerErrorDetailOptions = {
   category: ErrorCategory;
+  severity: ErrorSeverity;
   reason: string;
   description?: string | null | undefined;
   loc: SourceLocation | null;
@@ -116,8 +128,8 @@ export class CompilerDiagnostic {
   get description(): CompilerDiagnosticOptions['description'] {
     return this.options.description;
   }
-  get severity(): ErrorSeverity {
-    return getRuleForCategory(this.category).severity;
+  get severity(): CompilerDiagnosticOptions['severity'] {
+    return this.options.severity;
   }
   get suggestions(): CompilerDiagnosticOptions['suggestions'] {
     return this.options.suggestions;
@@ -126,8 +138,8 @@ export class CompilerDiagnostic {
     return this.options.category;
   }
 
-  withDetails(...details: Array<CompilerDiagnosticDetail>): CompilerDiagnostic {
-    this.options.details.push(...details);
+  withDetail(detail: CompilerDiagnosticDetail): CompilerDiagnostic {
+    this.options.details.push(detail);
     return this;
   }
 
@@ -141,10 +153,11 @@ export class CompilerDiagnostic {
   }
 
   printErrorMessage(source: string, options: PrintErrorMessageOptions): string {
-    const buffer = [printErrorSummary(this.category, this.reason)];
-    if (this.description != null) {
-      buffer.push('\n\n', `${this.description}.`);
-    }
+    const buffer = [
+      printErrorSummary(this.severity, this.reason),
+      '\n\n',
+      this.description,
+    ];
     for (const detail of this.options.details) {
       switch (detail.kind) {
         case 'error': {
@@ -154,9 +167,9 @@ export class CompilerDiagnostic {
           }
           let codeFrame: string;
           try {
-            codeFrame = printCodeFrame(source, loc, detail.message ?? '');
+            codeFrame = printCodeFrame(source, loc, detail.message);
           } catch (e) {
-            codeFrame = detail.message ?? '';
+            codeFrame = detail.message;
           }
           buffer.push('\n\n');
           if (loc.filename != null) {
@@ -186,7 +199,7 @@ export class CompilerDiagnostic {
   }
 
   toString(): string {
-    const buffer = [printErrorSummary(this.category, this.reason)];
+    const buffer = [printErrorSummary(this.severity, this.reason)];
     if (this.description != null) {
       buffer.push(`. ${this.description}.`);
     }
@@ -198,11 +211,9 @@ export class CompilerDiagnostic {
   }
 }
 
-/**
+/*
  * Each bailout or invariant in HIR lowering creates an {@link CompilerErrorDetail}, which is then
  * aggregated into a single {@link CompilerError} later.
- *
- * @deprecated use {@link CompilerDiagnostic} instead
  */
 export class CompilerErrorDetail {
   options: CompilerErrorDetailOptions;
@@ -217,8 +228,8 @@ export class CompilerErrorDetail {
   get description(): CompilerErrorDetailOptions['description'] {
     return this.options.description;
   }
-  get severity(): ErrorSeverity {
-    return getRuleForCategory(this.category).severity;
+  get severity(): CompilerErrorDetailOptions['severity'] {
+    return this.options.severity;
   }
   get loc(): CompilerErrorDetailOptions['loc'] {
     return this.options.loc;
@@ -235,7 +246,7 @@ export class CompilerErrorDetail {
   }
 
   printErrorMessage(source: string, options: PrintErrorMessageOptions): string {
-    const buffer = [printErrorSummary(this.category, this.reason)];
+    const buffer = [printErrorSummary(this.severity, this.reason)];
     if (this.description != null) {
       buffer.push(`\n\n${this.description}.`);
     }
@@ -260,7 +271,7 @@ export class CompilerErrorDetail {
   }
 
   toString(): string {
-    const buffer = [printErrorSummary(this.category, this.reason)];
+    const buffer = [printErrorSummary(this.severity, this.reason)];
     if (this.description != null) {
       buffer.push(`. ${this.description}.`);
     }
@@ -272,28 +283,22 @@ export class CompilerErrorDetail {
   }
 }
 
-/**
- * An aggregate of {@link CompilerDiagnostic}. This allows us to aggregate all issues found by the
- * compiler into a single error before we throw. Where possible, prefer to push diagnostics into
- * the error aggregate instead of throwing immediately.
- */
 export class CompilerError extends Error {
   details: Array<CompilerErrorDetail | CompilerDiagnostic> = [];
-  disabledDetails: Array<CompilerErrorDetail | CompilerDiagnostic> = [];
   printedMessage: string | null = null;
 
   static invariant(
     condition: unknown,
-    options: Omit<CompilerDiagnosticOptions, 'category'>,
+    options: Omit<CompilerErrorDetailOptions, 'severity' | 'category'>,
   ): asserts condition {
     if (!condition) {
       const errors = new CompilerError();
-      errors.pushDiagnostic(
-        CompilerDiagnostic.create({
-          reason: options.reason,
-          description: options.description,
+      errors.pushErrorDetail(
+        new CompilerErrorDetail({
+          ...options,
           category: ErrorCategory.Invariant,
-        }).withDetails(...options.details),
+          severity: ErrorSeverity.Invariant,
+        }),
       );
       throw errors;
     }
@@ -306,12 +311,13 @@ export class CompilerError extends Error {
   }
 
   static throwTodo(
-    options: Omit<CompilerErrorDetailOptions, 'category'>,
+    options: Omit<CompilerErrorDetailOptions, 'severity' | 'category'>,
   ): never {
     const errors = new CompilerError();
     errors.pushErrorDetail(
       new CompilerErrorDetail({
         ...options,
+        severity: ErrorSeverity.Todo,
         category: ErrorCategory.Todo,
       }),
     );
@@ -319,31 +325,40 @@ export class CompilerError extends Error {
   }
 
   static throwInvalidJS(
-    options: Omit<CompilerErrorDetailOptions, 'category'>,
+    options: Omit<CompilerErrorDetailOptions, 'severity' | 'category'>,
   ): never {
     const errors = new CompilerError();
     errors.pushErrorDetail(
       new CompilerErrorDetail({
         ...options,
+        severity: ErrorSeverity.InvalidJS,
         category: ErrorCategory.Syntax,
       }),
     );
     throw errors;
   }
 
-  static throwInvalidReact(options: CompilerErrorDetailOptions): never {
-    const errors = new CompilerError();
-    errors.pushErrorDetail(new CompilerErrorDetail(options));
-    throw errors;
-  }
-
-  static throwInvalidConfig(
-    options: Omit<CompilerErrorDetailOptions, 'category'>,
+  static throwInvalidReact(
+    options: Omit<CompilerErrorDetailOptions, 'severity'>,
   ): never {
     const errors = new CompilerError();
     errors.pushErrorDetail(
       new CompilerErrorDetail({
         ...options,
+        severity: ErrorSeverity.InvalidReact,
+      }),
+    );
+    throw errors;
+  }
+
+  static throwInvalidConfig(
+    options: Omit<CompilerErrorDetailOptions, 'severity' | 'category'>,
+  ): never {
+    const errors = new CompilerError();
+    errors.pushErrorDetail(
+      new CompilerErrorDetail({
+        ...options,
+        severity: ErrorSeverity.InvalidConfig,
         category: ErrorCategory.Config,
       }),
     );
@@ -360,7 +375,6 @@ export class CompilerError extends Error {
     super(...args);
     this.name = 'ReactCompilerError';
     this.details = [];
-    this.disabledDetails = [];
   }
 
   override get message(): string {
@@ -401,93 +415,61 @@ export class CompilerError extends Error {
 
   merge(other: CompilerError): void {
     this.details.push(...other.details);
-    this.disabledDetails.push(...other.disabledDetails);
   }
 
   pushDiagnostic(diagnostic: CompilerDiagnostic): void {
-    if (diagnostic.severity === ErrorSeverity.Off) {
-      this.disabledDetails.push(diagnostic);
-    } else {
-      this.details.push(diagnostic);
-    }
+    this.details.push(diagnostic);
   }
 
-  /**
-   * @deprecated use {@link pushDiagnostic} instead
-   */
   push(options: CompilerErrorDetailOptions): CompilerErrorDetail {
     const detail = new CompilerErrorDetail({
       category: options.category,
       reason: options.reason,
       description: options.description ?? null,
+      severity: options.severity,
       suggestions: options.suggestions,
       loc: typeof options.loc === 'symbol' ? null : options.loc,
     });
     return this.pushErrorDetail(detail);
   }
 
-  /**
-   * @deprecated use {@link pushDiagnostic} instead
-   */
   pushErrorDetail(detail: CompilerErrorDetail): CompilerErrorDetail {
-    if (detail.severity === ErrorSeverity.Off) {
-      this.disabledDetails.push(detail);
-    } else {
-      this.details.push(detail);
-    }
+    this.details.push(detail);
     return detail;
   }
 
-  hasAnyErrors(): boolean {
+  hasErrors(): boolean {
     return this.details.length > 0;
   }
 
   asResult(): Result<void, CompilerError> {
-    return this.hasAnyErrors() ? Err(this) : Ok(undefined);
+    return this.hasErrors() ? Err(this) : Ok(undefined);
   }
 
-  /**
-   * Returns true if any of the error details are of severity Error.
+  /*
+   * An error is critical if it means the compiler has entered into a broken state and cannot
+   * continue safely. Other expected errors such as Todos mean that we can skip over that component
+   * but otherwise continue compiling the rest of the app.
    */
-  hasErrors(): boolean {
-    for (const detail of this.details) {
-      if (detail.severity === ErrorSeverity.Error) {
-        return true;
+  isCritical(): boolean {
+    return this.details.some(detail => {
+      switch (detail.severity) {
+        case ErrorSeverity.Invariant:
+        case ErrorSeverity.InvalidJS:
+        case ErrorSeverity.InvalidReact:
+        case ErrorSeverity.InvalidConfig:
+        case ErrorSeverity.UnsupportedJS: {
+          return true;
+        }
+        case ErrorSeverity.CannotPreserveMemoization:
+        case ErrorSeverity.Todo: {
+          return false;
+        }
+        default: {
+          assertExhaustive(detail.severity, 'Unhandled error severity');
+        }
       }
-    }
-    return false;
-  }
-
-  /**
-   * Returns true if there are no Errors and there is at least one Warning.
-   */
-  hasWarning(): boolean {
-    let res = false;
-    for (const detail of this.details) {
-      if (detail.severity === ErrorSeverity.Error) {
-        return false;
-      }
-      if (detail.severity === ErrorSeverity.Warning) {
-        res = true;
-      }
-    }
-    return res;
-  }
-
-  hasHints(): boolean {
-    let res = false;
-    for (const detail of this.details) {
-      if (detail.severity === ErrorSeverity.Error) {
-        return false;
-      }
-      if (detail.severity === ErrorSeverity.Warning) {
-        return false;
-      }
-      if (detail.severity === ErrorSeverity.Hint) {
-        res = true;
-      }
-    }
-    return res;
+    });
   }
 }
 
@@ -514,158 +496,108 @@ function printCodeFrame(
   );
 }
 
-function printErrorSummary(category: ErrorCategory, message: string): string {
-  let heading: string;
-  switch (category) {
-    case ErrorCategory.AutomaticEffectDependencies:
-    case ErrorCategory.CapitalizedCalls:
-    case ErrorCategory.Config:
-    case ErrorCategory.EffectDerivationsOfState:
-    case ErrorCategory.EffectSetState:
-    case ErrorCategory.ErrorBoundaries:
-    case ErrorCategory.Factories:
-    case ErrorCategory.FBT:
-    case ErrorCategory.Fire:
-    case ErrorCategory.Gating:
-    case ErrorCategory.Globals:
-    case ErrorCategory.Hooks:
-    case ErrorCategory.Immutability:
-    case ErrorCategory.Purity:
-    case ErrorCategory.Refs:
-    case ErrorCategory.RenderSetState:
-    case ErrorCategory.StaticComponents:
-    case ErrorCategory.Suppression:
-    case ErrorCategory.Syntax:
-    case ErrorCategory.UseMemo: {
-      heading = 'Error';
+function printErrorSummary(severity: ErrorSeverity, message: string): string {
+  let severityCategory: string;
+  switch (severity) {
+    case ErrorSeverity.InvalidConfig:
+    case ErrorSeverity.InvalidJS:
+    case ErrorSeverity.InvalidReact:
+    case ErrorSeverity.UnsupportedJS: {
+      severityCategory = 'Error';
       break;
     }
-    case ErrorCategory.EffectDependencies:
-    case ErrorCategory.IncompatibleLibrary:
-    case ErrorCategory.PreserveManualMemo:
-    case ErrorCategory.UnsupportedSyntax: {
-      heading = 'Compilation Skipped';
+    case ErrorSeverity.CannotPreserveMemoization: {
+      severityCategory = 'Memoization';
       break;
     }
-    case ErrorCategory.Invariant: {
-      heading = 'Invariant';
+    case ErrorSeverity.Invariant: {
+      severityCategory = 'Invariant';
       break;
     }
-    case ErrorCategory.Todo: {
-      heading = 'Todo';
+    case ErrorSeverity.Todo: {
+      severityCategory = 'Todo';
       break;
     }
     default: {
-      assertExhaustive(category, `Unhandled category '${category}'`);
+      assertExhaustive(severity, `Unexpected severity '${severity}'`);
     }
   }
-  return `${heading}: ${message}`;
+  return `${severityCategory}: ${message}`;
 }
 
 /**
  * See getRuleForCategory() for how these map to ESLint rules
  */
 export enum ErrorCategory {
-  /**
-   * Checking for valid hooks usage (non conditional, non-first class, non reactive, etc)
-   */
+  // Checking for valid hooks usage (non conditional, non-first class, non reactive, etc)
   Hooks = 'Hooks',
-  /**
-   * Checking for no capitalized calls (not definitively an error, hence separating)
-   */
+
+  // Checking for no capitalized calls (not definitively an error, hence separating)
   CapitalizedCalls = 'CapitalizedCalls',
-  /**
-   * Checking for static components
-   */
+
+  // Checking for static components
   StaticComponents = 'StaticComponents',
-  /**
-   * Checking for valid usage of manual memoization
-   */
+
+  // Checking for valid usage of manual memoization
   UseMemo = 'UseMemo',
-  /**
-   * Checking for higher order functions acting as factories for components/hooks
-   */
-  Factories = 'Factories',
-  /**
-   * Checks that manual memoization is preserved
-   */
+
+  // Checks that manual memoization is preserved
   PreserveManualMemo = 'PreserveManualMemo',
-  /**
-   * Checks for known incompatible libraries
-   */
-  IncompatibleLibrary = 'IncompatibleLibrary',
-  /**
-   * Checking for no mutations of props, hook arguments, hook return values
-   */
+
+  // Checking for no mutations of props, hook arguments, hook return values
   Immutability = 'Immutability',
-  /**
-   * Checking for assignments to globals
-   */
+
+  // Checking for assignments to globals
   Globals = 'Globals',
-  /**
-   * Checking for valid usage of refs, ie no access during render
-   */
+
+  // Checking for valid usage of refs, ie no access during render
   Refs = 'Refs',
-  /**
-   * Checks for memoized effect deps
-   */
+
+  // Checks for memoized effect deps
   EffectDependencies = 'EffectDependencies',
-  /**
-   * Checks for no setState in effect bodies
-   */
+
+  // Checks for no setState in effect bodies
   EffectSetState = 'EffectSetState',
+
   EffectDerivationsOfState = 'EffectDerivationsOfState',
-  /**
-   * Validates against try/catch in place of error boundaries
-   */
+
+  // Validates against try/catch in place of error boundaries
   ErrorBoundaries = 'ErrorBoundaries',
-  /**
-   * Checking for pure functions
-   */
+
+  // Checking for pure functions
   Purity = 'Purity',
-  /**
-   * Validates against setState in render
-   */
+
+  // Validates against setState in render
   RenderSetState = 'RenderSetState',
-  /**
-   * Internal invariants
-   */
+
+  // Internal invariants
   Invariant = 'Invariant',
-  /**
-   * Todos
-   */
+
+  // Todos
   Todo = 'Todo',
-  /**
-   * Syntax errors
-   */
+
+  // Syntax errors
   Syntax = 'Syntax',
-  /**
-   * Checks for use of unsupported syntax
-   */
+
+  // Checks for use of unsupported syntax
   UnsupportedSyntax = 'UnsupportedSyntax',
-  /**
-   * Config errors
-   */
+
+  // Config errors
   Config = 'Config',
-  /**
-   * Gating error
-   */
+
+  // Gating error
   Gating = 'Gating',
-  /**
-   * Suppressions
-   */
+
+  // Suppressions
   Suppression = 'Suppression',
-  /**
-   * Issues with auto deps
-   */
+
+  // Issues with auto deps
   AutomaticEffectDependencies = 'AutomaticEffectDependencies',
-  /**
-   * Issues with `fire`
-   */
+
+  // Issues with `fire`
   Fire = 'Fire',
-  /**
-   * fbt-specific issues
-   */
+
+  // fbt-specific issues
   FBT = 'FBT',
 }
 
@@ -673,9 +605,6 @@ export type LintRule = {
   // Stores the category the rule corresponds to, used to filter errors when reporting
   category: ErrorCategory;
 
-  // Stores the severity of the error, which is used to map to lint levels such as error/warning.
-  severity: ErrorSeverity;
-
   /**
    * The "name" of the rule as it will be used by developers to enable/disable, eg
    * "eslint-disable-nest line <name>"
@@ -716,7 +645,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.AutomaticEffectDependencies: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'automatic-effect-dependencies',
         description:
           'Verifies that automatic effect dependencies are compiled if opted-in',
@@ -726,7 +654,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.CapitalizedCalls: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'capitalized-calls',
         description:
           'Validates against calling capitalized functions/methods instead of using JSX',
@@ -736,7 +663,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.Config: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'config',
         description: 'Validates the compiler configuration options',
         recommended: true,
@@ -745,7 +671,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.EffectDependencies: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'memoized-effect-dependencies',
         description: 'Validates that effect dependencies are memoized',
         recommended: false,
@@ -754,7 +679,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.EffectDerivationsOfState: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'no-deriving-state-in-effects',
         description:
           'Validates against deriving values from state in an effect',
@@ -764,7 +688,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.EffectSetState: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'set-state-in-effect',
         description:
           'Validates against calling setState synchronously in an effect, which can lead to re-renders that degrade performance',
@@ -774,28 +697,15 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.ErrorBoundaries: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'error-boundaries',
         description:
           'Validates usage of error boundaries instead of try/catch for errors in child components',
         recommended: true,
       };
     }
-    case ErrorCategory.Factories: {
-      return {
-        category,
-        severity: ErrorSeverity.Error,
-        name: 'component-hook-factories',
-        description:
-          'Validates against higher order functions defining nested components or hooks. ' +
-          'Components and hooks should be defined at the module level',
-        recommended: true,
-      };
-    }
     case ErrorCategory.FBT: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'fbt',
         description: 'Validates usage of fbt',
         recommended: false,
@@ -804,7 +714,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.Fire: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'fire',
         description: 'Validates usage of `fire`',
         recommended: false,
@@ -813,7 +722,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.Gating: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'gating',
         description:
           'Validates configuration of [gating mode](https://react.dev/reference/react-compiler/gating)',
@@ -823,7 +731,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.Globals: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'globals',
         description:
           'Validates against assignment/mutation of globals during render, part of ensuring that ' +
@@ -834,7 +741,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.Hooks: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'hooks',
         description: 'Validates the rules of hooks',
         /**
@@ -848,7 +754,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.Immutability: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'immutability',
         description:
           'Validates against mutating props, state, and other values that [are immutable](https://react.dev/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable)',
@@ -858,7 +763,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.Invariant: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'invariant',
         description: 'Internal invariants',
         recommended: false,
@@ -867,7 +771,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.PreserveManualMemo: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'preserve-manual-memoization',
         description:
           'Validates that existing manual memoized is preserved by the compiler. ' +
@@ -879,7 +782,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.Purity: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'purity',
         description:
           'Validates that [components/hooks are pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure) by checking that they do not call known-impure functions',
@@ -889,7 +791,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.Refs: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'refs',
         description:
           'Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](https://react.dev/reference/react/useRef#usage)',
@@ -899,7 +800,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.RenderSetState: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'set-state-in-render',
         description:
           'Validates against setting state during render, which can trigger additional renders and potential infinite render loops',
@@ -909,7 +809,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.StaticComponents: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'static-components',
         description:
           'Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering',
@@ -919,7 +818,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.Suppression: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'rule-suppression',
         description: 'Validates against suppression of other rules',
         recommended: false,
@@ -928,7 +826,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.Syntax: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'syntax',
         description: 'Validates against invalid syntax',
         recommended: false,
@@ -937,7 +834,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.Todo: {
       return {
         category,
-        severity: ErrorSeverity.Hint,
         name: 'todo',
         description: 'Unimplemented features',
         recommended: false,
@@ -946,7 +842,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.UnsupportedSyntax: {
       return {
         category,
-        severity: ErrorSeverity.Warning,
         name: 'unsupported-syntax',
         description:
           'Validates against syntax that we do not plan to support in React Compiler',
@@ -956,23 +851,12 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
     case ErrorCategory.UseMemo: {
       return {
         category,
-        severity: ErrorSeverity.Error,
         name: 'use-memo',
         description:
           'Validates usage of the useMemo() hook against common mistakes. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.',
         recommended: true,
       };
     }
-    case ErrorCategory.IncompatibleLibrary: {
-      return {
-        category,
-        severity: ErrorSeverity.Warning,
-        name: 'incompatible-library',
-        description:
-          'Validates against usage of libraries which are incompatible with memoization (manual or automatic)',
-        recommended: true,
-      };
-    }
     default: {
       assertExhaustive(category, `Unsupported category ${category}`);
     }

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

@@ -51,26 +51,12 @@ function insertAdditionalFunctionDeclaration(
   CompilerError.invariant(originalFnName != null && compiled.id != null, {
     reason:
       'Expected function declarations that are referenced elsewhere to have a named identifier',
-    description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: fnPath.node.loc ?? null,
-        message: null,
-      },
-    ],
+    loc: fnPath.node.loc ?? null,
   });
   CompilerError.invariant(originalFnParams.length === compiledParams.length, {
     reason:
       'Expected React Compiler optimized function declarations to have the same number of parameters as source',
-    description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: fnPath.node.loc ?? null,
-        message: null,
-      },
-    ],
+    loc: fnPath.node.loc ?? null,
   });
 
   const gatingCondition = t.identifier(
@@ -154,13 +140,7 @@ export function insertGatedFunctionDeclaration(
     CompilerError.invariant(compiled.type === 'FunctionDeclaration', {
       reason: 'Expected compiled node type to match input type',
       description: `Got ${compiled.type} but expected FunctionDeclaration`,
-      details: [
-        {
-          kind: 'error',
-          loc: fnPath.node.loc ?? null,
-          message: null,
-        },
-      ],
+      loc: fnPath.node.loc ?? null,
     });
     insertAdditionalFunctionDeclaration(
       fnPath,

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

@@ -9,7 +9,7 @@ import {NodePath} from '@babel/core';
 import * as t from '@babel/types';
 import {Scope as BabelScope} from '@babel/traverse';
 
-import {CompilerError, ErrorCategory} from '../CompilerError';
+import {CompilerError, ErrorCategory, ErrorSeverity} from '../CompilerError';
 import {
   EnvironmentConfig,
   GeneratedSource,
@@ -39,6 +39,7 @@ export function validateRestrictedImports(
       if (restrictedImports.has(importDeclPath.node.source.value)) {
         error.push({
           category: ErrorCategory.Todo,
+          severity: ErrorSeverity.Todo,
           reason: 'Bailing out due to blocklisted import',
           description: `Import from module ${importDeclPath.node.source.value}`,
           loc: importDeclPath.node.loc ?? null,
@@ -46,7 +47,7 @@ export function validateRestrictedImports(
       }
     },
   });
-  if (error.hasAnyErrors()) {
+  if (error.hasErrors()) {
     return error;
   } else {
     return null;
@@ -206,6 +207,7 @@ export class ProgramContext {
     const error = new CompilerError();
     error.push({
       category: ErrorCategory.Todo,
+      severity: ErrorSeverity.Todo,
       reason: 'Encountered conflicting global in generated program',
       description: `Conflict from local binding ${name}`,
       loc: scope.getBinding(name)?.path.node.loc ?? null,
@@ -256,14 +258,8 @@ export function addImportsToProgram(
         {
           reason:
             'Encountered conflicting import specifiers in generated program',
-          description: `Conflict from import ${loweredImport.module}:(${loweredImport.imported} as ${loweredImport.name})`,
-          details: [
-            {
-              kind: 'error',
-              loc: GeneratedSource,
-              message: null,
-            },
-          ],
+          description: `Conflict from import ${loweredImport.module}:(${loweredImport.imported} as ${loweredImport.name}).`,
+          loc: GeneratedSource,
           suggestions: null,
         },
       );
@@ -274,13 +270,7 @@ export function addImportsToProgram(
           reason:
             'Found inconsistent import specifier. This is an internal bug.',
           description: `Expected import ${moduleName}:${specifierName} but found ${loweredImport.module}:${loweredImport.imported}`,
-          details: [
-            {
-              kind: 'error',
-              loc: GeneratedSource,
-              message: null,
-            },
-          ],
+          loc: GeneratedSource,
         },
       );
     }

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

@@ -135,12 +135,7 @@ export type PluginOptions = {
    */
   eslintSuppressionRules: Array<string> | null | undefined;
 
-  /**
-   * Whether to report "suppression" errors for Flow suppressions. If false, suppression errors
-   * are only emitted for ESLint suppressions
-   */
   flowSuppressions: boolean;
-
   /*
    * Ignore 'use no forget' annotations. Helpful during testing but should not be used in production.
    */

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

@@ -103,7 +103,6 @@ import {validateNoFreezingKnownMutableFunctions} from '../Validation/ValidateNoF
 import {inferMutationAliasingEffects} from '../Inference/InferMutationAliasingEffects';
 import {inferMutationAliasingRanges} from '../Inference/InferMutationAliasingRanges';
 import {validateNoDerivedComputationsInEffects} from '../Validation/ValidateNoDerivedComputationsInEffects';
-import {nameAnonymousFunctions} from '../Transform/NameAnonymousFunctions';
 
 export type CompilerPipelineValue =
   | {kind: 'ast'; name: string; value: CodegenFunction}
@@ -325,15 +324,6 @@ function runWithEnvironment(
     outlineJSX(hir);
   }
 
-  if (env.config.enableNameAnonymousFunctions) {
-    nameAnonymousFunctions(hir);
-    log({
-      kind: 'hir',
-      name: 'NameAnonymousFunctions',
-      value: hir,
-    });
-  }
-
   if (env.config.enableFunctionOutlining) {
     outlineFunctions(hir, fbtOperands);
     log({kind: 'hir', name: 'OutlineFunctions', value: hir});

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

@@ -11,6 +11,7 @@ import {
   CompilerError,
   CompilerErrorDetail,
   ErrorCategory,
+  ErrorSeverity,
 } from '../CompilerError';
 import {ExternalFunction, ReactFunctionType} from '../HIR/Environment';
 import {CodegenFunction} from '../ReactiveScopes';
@@ -104,6 +105,7 @@ function findDirectivesDynamicGating(
         errors.push({
           reason: `Dynamic gating directive is not a valid JavaScript identifier`,
           description: `Found '${directive.value.value}'`,
+          severity: ErrorSeverity.InvalidReact,
           category: ErrorCategory.Gating,
           loc: directive.loc ?? null,
           suggestions: null,
@@ -111,7 +113,7 @@ function findDirectivesDynamicGating(
       }
     }
   }
-  if (errors.hasAnyErrors()) {
+  if (errors.hasErrors()) {
     return Err(errors);
   } else if (result.length > 1) {
     const error = new CompilerError();
@@ -120,6 +122,7 @@ function findDirectivesDynamicGating(
       description: `Expected a single directive but found [${result
         .map(r => r.directive.value.value)
         .join(', ')}]`,
+      severity: ErrorSeverity.InvalidReact,
       category: ErrorCategory.Gating,
       loc: result[0].directive.loc ?? null,
       suggestions: null,
@@ -138,13 +141,15 @@ function findDirectivesDynamicGating(
   }
 }
 
-function isError(err: unknown): boolean {
-  return !(err instanceof CompilerError) || err.hasErrors();
+function isCriticalError(err: unknown): boolean {
+  return !(err instanceof CompilerError) || err.isCritical();
 }
 
 function isConfigError(err: unknown): boolean {
   if (err instanceof CompilerError) {
-    return err.details.some(detail => detail.category === ErrorCategory.Config);
+    return err.details.some(
+      detail => detail.severity === ErrorSeverity.InvalidConfig,
+    );
   }
   return false;
 }
@@ -209,7 +214,8 @@ function handleError(
   logError(err, context, fnLoc);
   if (
     context.opts.panicThreshold === 'all_errors' ||
-    (context.opts.panicThreshold === 'critical_errors' && isError(err)) ||
+    (context.opts.panicThreshold === 'critical_errors' &&
+      isCriticalError(err)) ||
     isConfigError(err) // Always throws regardless of panic threshold
   ) {
     throw err;
@@ -310,13 +316,7 @@ function insertNewOutlinedFunctionNode(
       CompilerError.invariant(insertedFuncDecl.isFunctionDeclaration(), {
         reason: 'Expected inserted function declaration',
         description: `Got: ${insertedFuncDecl}`,
-        details: [
-          {
-            kind: 'error',
-            loc: insertedFuncDecl.node?.loc ?? null,
-            message: null,
-          },
-        ],
+        loc: insertedFuncDecl.node?.loc ?? null,
       });
       return insertedFuncDecl;
     }
@@ -425,14 +425,7 @@ export function compileProgram(
       for (const outlined of compiled.outlined) {
         CompilerError.invariant(outlined.fn.outlined.length === 0, {
           reason: 'Unexpected nested outlined functions',
-          description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: outlined.fn.loc,
-              message: null,
-            },
-          ],
+          loc: outlined.fn.loc,
         });
         const fn = insertNewOutlinedFunctionNode(
           program,
@@ -465,6 +458,7 @@ export function compileProgram(
         new CompilerErrorDetail({
           reason:
             'Unexpected compiled functions when module scope opt-out is present',
+          severity: ErrorSeverity.Invariant,
           category: ErrorCategory.Invariant,
           loc: null,
         }),
@@ -500,20 +494,7 @@ function findFunctionsToCompile(
 ): Array<CompileSource> {
   const queue: Array<CompileSource> = [];
   const traverseFunction = (fn: BabelFn, pass: CompilerPass): void => {
-    // In 'all' mode, compile only top level functions
-    if (
-      pass.opts.compilationMode === 'all' &&
-      fn.scope.getProgramParent() !== fn.scope.parent
-    ) {
-      return;
-    }
-
     const fnType = getReactFunctionType(fn, pass);
-
-    if (pass.opts.environment.validateNoDynamicallyCreatedComponentsOrHooks) {
-      validateNoDynamicallyCreatedComponentsOrHooks(fn, pass, programContext);
-    }
-
     if (fnType === null || programContext.alreadyCompiled.has(fn.node)) {
       return;
     }
@@ -833,6 +814,7 @@ function shouldSkipCompilation(
           reason: `Expected a filename but found none.`,
           description:
             "When the 'sources' config options is specified, the React compiler will only compile files with a name",
+          severity: ErrorSeverity.InvalidConfig,
           category: ErrorCategory.Config,
           loc: null,
         }),
@@ -857,72 +839,6 @@ function shouldSkipCompilation(
   return false;
 }
 
-/**
- * Validates that Components/Hooks are always defined at module level. This prevents scope reference
- * errors that occur when the compiler attempts to optimize the nested component/hook while its
- * parent function remains uncompiled.
- */
-function validateNoDynamicallyCreatedComponentsOrHooks(
-  fn: BabelFn,
-  pass: CompilerPass,
-  programContext: ProgramContext,
-): void {
-  const parentNameExpr = getFunctionName(fn);
-  const parentName =
-    parentNameExpr !== null && parentNameExpr.isIdentifier()
-      ? parentNameExpr.node.name
-      : '<anonymous>';
-
-  const validateNestedFunction = (
-    nestedFn: NodePath<
-      t.FunctionDeclaration | t.FunctionExpression | t.ArrowFunctionExpression
-    >,
-  ): void => {
-    if (
-      nestedFn.node === fn.node ||
-      programContext.alreadyCompiled.has(nestedFn.node)
-    ) {
-      return;
-    }
-
-    if (nestedFn.scope.getProgramParent() !== nestedFn.scope.parent) {
-      const nestedFnType = getReactFunctionType(nestedFn as BabelFn, pass);
-      const nestedFnNameExpr = getFunctionName(nestedFn as BabelFn);
-      const nestedName =
-        nestedFnNameExpr !== null && nestedFnNameExpr.isIdentifier()
-          ? nestedFnNameExpr.node.name
-          : '<anonymous>';
-      if (nestedFnType === 'Component' || nestedFnType === 'Hook') {
-        CompilerError.throwDiagnostic({
-          category: ErrorCategory.Factories,
-          reason: `Components and hooks cannot be created dynamically`,
-          description: `The function \`${nestedName}\` appears to be a React ${nestedFnType.toLowerCase()}, but it's defined inside \`${parentName}\`. Components and Hooks should always be declared at module scope`,
-          details: [
-            {
-              kind: 'error',
-              message: 'this function dynamically created a component/hook',
-              loc: parentNameExpr?.node.loc ?? fn.node.loc ?? null,
-            },
-            {
-              kind: 'error',
-              message: 'the component is created here',
-              loc: nestedFnNameExpr?.node.loc ?? nestedFn.node.loc ?? null,
-            },
-          ],
-        });
-      }
-    }
-
-    nestedFn.skip();
-  };
-
-  fn.traverse({
-    FunctionDeclaration: validateNestedFunction,
-    FunctionExpression: validateNestedFunction,
-    ArrowFunctionExpression: validateNestedFunction,
-  });
-}
-
 function getReactFunctionType(
   fn: BabelFn,
   pass: CompilerPass,
@@ -961,6 +877,11 @@ function getReactFunctionType(
       return componentSyntaxType;
     }
     case 'all': {
+      // Compile only top level functions
+      if (fn.scope.getProgramParent() !== fn.scope.parent) {
+        return null;
+      }
+
       return getComponentOrHookLike(fn, hookPattern) ?? 'Other';
     }
     default: {
@@ -1420,13 +1341,7 @@ export function getReactCompilerRuntimeModule(
       {
         reason: 'Expected target to already be validated',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
         suggestions: null,
       },
     );

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

@@ -12,6 +12,7 @@ import {
   CompilerError,
   CompilerSuggestionOperation,
   ErrorCategory,
+  ErrorSeverity,
 } from '../CompilerError';
 import {assertExhaustive} from '../Utils/utils';
 import {GeneratedSource} from '../HIR';
@@ -86,18 +87,12 @@ export function findProgramSuppressions(
   let enableComment: t.Comment | null = null;
   let source: SuppressionSource | null = null;
 
-  let disableNextLinePattern: RegExp | null = null;
-  let disablePattern: RegExp | null = null;
-  let enablePattern: RegExp | null = null;
-  if (ruleNames.length !== 0) {
-    const rulePattern = `(${ruleNames.join('|')})`;
-    disableNextLinePattern = new RegExp(
-      `eslint-disable-next-line ${rulePattern}`,
-    );
-    disablePattern = new RegExp(`eslint-disable ${rulePattern}`);
-    enablePattern = new RegExp(`eslint-enable ${rulePattern}`);
-  }
-
+  const rulePattern = `(${ruleNames.join('|')})`;
+  const disableNextLinePattern = new RegExp(
+    `eslint-disable-next-line ${rulePattern}`,
+  );
+  const disablePattern = new RegExp(`eslint-disable ${rulePattern}`);
+  const enablePattern = new RegExp(`eslint-enable ${rulePattern}`);
   const flowSuppressionPattern = new RegExp(
     '\\$(FlowFixMe\\w*|FlowExpectedError|FlowIssue)\\[react\\-rule',
   );
@@ -113,7 +108,6 @@ export function findProgramSuppressions(
        * CommentLine within the block.
        */
       disableComment == null &&
-      disableNextLinePattern != null &&
       disableNextLinePattern.test(comment.value)
     ) {
       disableComment = comment;
@@ -131,16 +125,12 @@ export function findProgramSuppressions(
       source = 'Flow';
     }
 
-    if (disablePattern != null && disablePattern.test(comment.value)) {
+    if (disablePattern.test(comment.value)) {
       disableComment = comment;
       source = 'Eslint';
     }
 
-    if (
-      enablePattern != null &&
-      enablePattern.test(comment.value) &&
-      source === 'Eslint'
-    ) {
+    if (enablePattern.test(comment.value) && source === 'Eslint') {
       enableComment = comment;
     }
 
@@ -163,14 +153,7 @@ export function suppressionsToCompilerError(
 ): CompilerError {
   CompilerError.invariant(suppressionRanges.length !== 0, {
     reason: `Expected at least suppression comment source range`,
-    description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: GeneratedSource,
-        message: null,
-      },
-    ],
+    loc: GeneratedSource,
   });
   const error = new CompilerError();
   for (const suppressionRange of suppressionRanges) {
@@ -203,6 +186,7 @@ export function suppressionsToCompilerError(
       CompilerDiagnostic.create({
         reason: 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()}\``,
+        severity: ErrorSeverity.InvalidReact,
         category: ErrorCategory.Suppression,
         suggestions: [
           {
@@ -214,7 +198,7 @@ export function suppressionsToCompilerError(
             op: CompilerSuggestionOperation.Remove,
           },
         ],
-      }).withDetails({
+      }).withDetail({
         kind: 'error',
         loc: suppressionRange.disableComment.loc ?? null,
         message: 'Found React rule suppression',

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

@@ -8,7 +8,7 @@
 import {NodePath} from '@babel/core';
 import * as t from '@babel/types';
 
-import {CompilerError, EnvironmentConfig, Logger} from '..';
+import {CompilerError, EnvironmentConfig, ErrorSeverity, Logger} from '..';
 import {getOrInsertWith} from '../Utils/utils';
 import {Environment, GeneratedSource} from '../HIR';
 import {DEFAULT_EXPORT} from '../HIR/Environment';
@@ -20,15 +20,19 @@ import {
 } from '../CompilerError';
 
 function throwInvalidReact(
-  options: CompilerDiagnosticOptions,
+  options: Omit<CompilerDiagnosticOptions, 'severity'>,
   {logger, filename}: TraversalState,
 ): never {
+  const detail: CompilerDiagnosticOptions = {
+    severity: ErrorSeverity.InvalidReact,
+    ...options,
+  };
   logger?.logEvent(filename, {
     kind: 'CompileError',
     fnLoc: null,
-    detail: new CompilerDiagnostic(options),
+    detail: new CompilerDiagnostic(detail),
   });
-  CompilerError.throwDiagnostic(options);
+  CompilerError.throwDiagnostic(detail);
 }
 
 function isAutodepsSigil(
@@ -96,7 +100,7 @@ function assertValidEffectImportReference(
             reason:
               'Cannot infer dependencies of this effect. This will break your build!',
             description:
-              'To resolve, either pass a dependency array or fix reported compiler bailout diagnostics' +
+              'To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.' +
               (maybeErrorDiagnostic ? ` ${maybeErrorDiagnostic}` : ''),
             details: [
               {
@@ -128,7 +132,9 @@ function assertValidFireImportReference(
         reason: '[Fire] Untransformed reference to compiler-required feature.',
         description:
           'Either remove this `fire` call or ensure it is successfully transformed by the compiler' +
-          (maybeErrorDiagnostic != null ? ` ${maybeErrorDiagnostic}` : ''),
+          maybeErrorDiagnostic
+            ? ` ${maybeErrorDiagnostic}`
+            : '',
         details: [
           {
             kind: 'error',
@@ -215,14 +221,7 @@ function validateImportSpecifier(
   const binding = local.scope.getBinding(local.node.name);
   CompilerError.invariant(binding != null, {
     reason: 'Expected binding to be found for import specifier',
-    description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: local.node.loc ?? null,
-        message: null,
-      },
-    ],
+    loc: local.node.loc ?? null,
   });
   checkFn(binding.referencePaths, state);
 }
@@ -242,14 +241,7 @@ function validateNamespacedImport(
 
   CompilerError.invariant(binding != null, {
     reason: 'Expected binding to be found for import specifier',
-    description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: local.node.loc ?? null,
-        message: null,
-      },
-    ],
+    loc: local.node.loc ?? null,
   });
   const filteredReferences = new Map<
     CheckInvalidReferenceFn,

compiler/packages/babel-plugin-react-compiler/src/Flood/TypeErrors.ts

@@ -46,14 +46,7 @@ export function raiseUnificationErrors(
     if (errs.length === 0) {
       CompilerError.invariant(false, {
         reason: 'Should not have array of zero errors',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc,
-            message: null,
-          },
-        ],
+        loc,
       });
     } else if (errs.length === 1) {
       CompilerError.throwInvalidJS({

compiler/packages/babel-plugin-react-compiler/src/Flood/Types.ts

@@ -152,13 +152,7 @@ export function makeLinearId(id: number): LinearId {
   CompilerError.invariant(id >= 0 && Number.isInteger(id), {
     reason: 'Expected LinearId id to be a non-negative integer',
     description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
+    loc: null,
     suggestions: null,
   });
   return id as LinearId;
@@ -173,13 +167,7 @@ export function makeTypeParameterId(id: number): TypeParameterId {
   CompilerError.invariant(id >= 0 && Number.isInteger(id), {
     reason: 'Expected TypeParameterId to be a non-negative integer',
     description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
+    loc: null,
     suggestions: null,
   });
   return id as TypeParameterId;
@@ -203,13 +191,7 @@ export function makeVariableId(id: number): VariableId {
   CompilerError.invariant(id >= 0 && Number.isInteger(id), {
     reason: 'Expected VariableId id to be a non-negative integer',
     description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
+    loc: null,
     suggestions: null,
   });
   return id as VariableId;
@@ -417,14 +399,7 @@ function convertFlowType(flowType: FlowType, loc: string): ResolvedType {
               } else {
                 CompilerError.invariant(false, {
                   reason: `Unsupported property kind ${prop.kind}`,
-                  description: null,
-                  details: [
-                    {
-                      kind: 'error',
-                      loc: GeneratedSource,
-                      message: null,
-                    },
-                  ],
+                  loc: GeneratedSource,
                 });
               }
             }
@@ -493,14 +468,7 @@ function convertFlowType(flowType: FlowType, loc: string): ResolvedType {
               } else {
                 CompilerError.invariant(false, {
                   reason: `Unsupported property kind ${prop.kind}`,
-                  description: null,
-                  details: [
-                    {
-                      kind: 'error',
-                      loc: GeneratedSource,
-                      message: null,
-                    },
-                  ],
+                  loc: GeneratedSource,
                 });
               }
             }
@@ -519,14 +487,7 @@ function convertFlowType(flowType: FlowType, loc: string): ResolvedType {
                 } else {
                   CompilerError.invariant(false, {
                     reason: `Unsupported property kind ${prop.kind}`,
-                    description: null,
-                    details: [
-                      {
-                        kind: 'error',
-                        loc: GeneratedSource,
-                        message: null,
-                      },
-                    ],
+                    loc: GeneratedSource,
                   });
                 }
               }
@@ -539,14 +500,7 @@ function convertFlowType(flowType: FlowType, loc: string): ResolvedType {
             }
             CompilerError.invariant(false, {
               reason: `Unsupported class instance type ${flowType.def.type.kind}`,
-              description: null,
-              details: [
-                {
-                  kind: 'error',
-                  loc: GeneratedSource,
-                  message: null,
-                },
-              ],
+              loc: GeneratedSource,
             });
           }
           case 'Fun':
@@ -605,14 +559,7 @@ function convertFlowType(flowType: FlowType, loc: string): ResolvedType {
             } else {
               CompilerError.invariant(false, {
                 reason: `Unsupported component props type ${propsType.type.kind}`,
-                description: null,
-                details: [
-                  {
-                    kind: 'error',
-                    loc: GeneratedSource,
-                    message: null,
-                  },
-                ],
+                loc: GeneratedSource,
               });
             }
 
@@ -765,14 +712,7 @@ export class FlowTypeEnv implements ITypeEnv {
     // TODO: use flow-js only for web environments (e.g. playground)
     CompilerError.invariant(env.config.flowTypeProvider != null, {
       reason: 'Expected flowDumpTypes to be defined in environment config',
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: GeneratedSource,
-          message: null,
-        },
-      ],
+      loc: GeneratedSource,
     });
     let stdout: any;
     if (source === lastFlowSource) {

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

@@ -38,13 +38,7 @@ export function assertConsistentIdentifiers(fn: HIRFunction): void {
       CompilerError.invariant(instr.lvalue.identifier.name === null, {
         reason: `Expected all lvalues to be temporaries`,
         description: `Found named lvalue \`${instr.lvalue.identifier.name}\``,
-        details: [
-          {
-            kind: 'error',
-            loc: instr.lvalue.loc,
-            message: null,
-          },
-        ],
+        loc: instr.lvalue.loc,
         suggestions: null,
       });
       CompilerError.invariant(!assignments.has(instr.lvalue.identifier.id), {
@@ -52,13 +46,7 @@ export function assertConsistentIdentifiers(fn: HIRFunction): void {
         description: `Found duplicate assignment of '${printPlace(
           instr.lvalue,
         )}'`,
-        details: [
-          {
-            kind: 'error',
-            loc: instr.lvalue.loc,
-            message: null,
-          },
-        ],
+        loc: instr.lvalue.loc,
         suggestions: null,
       });
       assignments.add(instr.lvalue.identifier.id);
@@ -89,13 +77,7 @@ function validate(
     CompilerError.invariant(identifier === previous, {
       reason: `Duplicate identifier object`,
       description: `Found duplicate identifier object for id ${identifier.id}`,
-      details: [
-        {
-          kind: 'error',
-          loc: loc ?? GeneratedSource,
-          message: null,
-        },
-      ],
+      loc: loc ?? GeneratedSource,
       suggestions: null,
     });
   }

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

@@ -18,13 +18,7 @@ export function assertTerminalSuccessorsExist(fn: HIRFunction): void {
         description: `Block bb${successor} does not exist for terminal '${printTerminal(
           block.terminal,
         )}'`,
-        details: [
-          {
-            kind: 'error',
-            loc: (block.terminal as any).loc ?? GeneratedSource,
-            message: null,
-          },
-        ],
+        loc: (block.terminal as any).loc ?? GeneratedSource,
         suggestions: null,
       });
       return successor;
@@ -39,26 +33,14 @@ export function assertTerminalPredsExist(fn: HIRFunction): void {
       CompilerError.invariant(predBlock != null, {
         reason: 'Expected predecessor block to exist',
         description: `Block ${block.id} references non-existent ${pred}`,
-        details: [
-          {
-            kind: 'error',
-            loc: GeneratedSource,
-            message: null,
-          },
-        ],
+        loc: GeneratedSource,
       });
       CompilerError.invariant(
         [...eachTerminalSuccessor(predBlock.terminal)].includes(block.id),
         {
           reason: 'Terminal successor does not reference correct predecessor',
           description: `Block bb${block.id} has bb${predBlock.id} as a predecessor, but bb${predBlock.id}'s successors do not include bb${block.id}`,
-          details: [
-            {
-              kind: 'error',
-              loc: GeneratedSource,
-              message: null,
-            },
-          ],
+          loc: GeneratedSource,
         },
       );
     }

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

@@ -131,13 +131,7 @@ export function recursivelyTraverseItems<T, TContext>(
       CompilerError.invariant(disjoint || nested, {
         reason: 'Invalid nesting in program blocks or scopes',
         description: `Items overlap but are not nested: ${maybeParentRange.start}:${maybeParentRange.end}(${currRange.start}:${currRange.end})`,
-        details: [
-          {
-            kind: 'error',
-            loc: GeneratedSource,
-            message: null,
-          },
-        ],
+        loc: GeneratedSource,
       });
       if (disjoint) {
         exit(maybeParent, context);

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

@@ -57,13 +57,7 @@ function validateMutableRange(
     {
       reason: `Invalid mutable range: [${range.start}:${range.end}]`,
       description: `${printPlace(place)} in ${description}`,
-      details: [
-        {
-          kind: 'error',
-          loc: place.loc,
-          message: null,
-        },
-      ],
+      loc: place.loc,
     },
   );
 }

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

@@ -13,6 +13,7 @@ import {
   CompilerError,
   CompilerSuggestionOperation,
   ErrorCategory,
+  ErrorSeverity,
 } from '../CompilerError';
 import {Err, Ok, Result} from '../Utils/Result';
 import {assertExhaustive, hasNode} from '../Utils/utils';
@@ -47,7 +48,6 @@ import {
   makePropertyLiteral,
   makeType,
   promoteTemporary,
-  validateIdentifierName,
 } from './HIR';
 import HIRBuilder, {Bindings, createTemporaryPlace} from './HIRBuilder';
 import {BuiltInArrayId} from './ObjectShape';
@@ -108,10 +108,11 @@ export function lower(
       if (binding.kind !== 'Identifier') {
         builder.errors.pushDiagnostic(
           CompilerDiagnostic.create({
+            severity: ErrorSeverity.Invariant,
             category: ErrorCategory.Invariant,
             reason: 'Could not find binding',
-            description: `[BuildHIR] Could not find binding for param \`${param.node.name}\``,
-          }).withDetails({
+            description: `[BuildHIR] Could not find binding for param \`${param.node.name}\`.`,
+          }).withDetail({
             kind: 'error',
             loc: param.node.loc ?? null,
             message: 'Could not find binding',
@@ -172,10 +173,11 @@ export function lower(
     } else {
       builder.errors.pushDiagnostic(
         CompilerDiagnostic.create({
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           reason: `Handle ${param.node.type} parameters`,
-          description: `[BuildHIR] Add support for ${param.node.type} parameters`,
-        }).withDetails({
+          description: `[BuildHIR] Add support for ${param.node.type} parameters.`,
+        }).withDetail({
           kind: 'error',
           loc: param.node.loc ?? null,
           message: 'Unsupported parameter type',
@@ -203,10 +205,11 @@ export function lower(
   } else {
     builder.errors.pushDiagnostic(
       CompilerDiagnostic.create({
+        severity: ErrorSeverity.InvalidJS,
         category: ErrorCategory.Syntax,
         reason: `Unexpected function body kind`,
-        description: `Expected function body to be an expression or a block statement, got \`${body.type}\``,
-      }).withDetails({
+        description: `Expected function body to be an expression or a block statement, got \`${body.type}\`.`,
+      }).withDetail({
         kind: 'error',
         loc: body.node.loc ?? null,
         message: 'Expected a block statement or expression',
@@ -214,17 +217,7 @@ export function lower(
     );
   }
 
-  let validatedId: HIRFunction['id'] = null;
-  if (id != null) {
-    const idResult = validateIdentifierName(id);
-    if (idResult.isErr()) {
-      builder.errors.merge(idResult.unwrapErr());
-    } else {
-      validatedId = idResult.unwrap().value;
-    }
-  }
-
-  if (builder.errors.hasAnyErrors()) {
+  if (builder.errors.hasErrors()) {
     return Err(builder.errors);
   }
 
@@ -245,8 +238,7 @@ export function lower(
   );
 
   return Ok({
-    id: validatedId,
-    nameHint: null,
+    id,
     params,
     fnType: bindings == null ? env.fnType : 'Other',
     returnTypeAnnotation: null, // TODO: extract the actual return type node if present
@@ -284,6 +276,7 @@ function lowerStatement(
         builder.errors.push({
           reason:
             '(BuildHIR::lowerStatement) Support ThrowStatement inside of try/catch',
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: stmt.node.loc ?? null,
           suggestions: null,
@@ -451,13 +444,7 @@ function lowerStatement(
             reason: 'Expected to find binding for hoisted identifier',
             description: `Could not find a binding for ${id.node.name}`,
             suggestions: null,
-            details: [
-              {
-                kind: 'error',
-                loc: id.node.loc ?? GeneratedSource,
-                message: null,
-              },
-            ],
+            loc: id.node.loc ?? GeneratedSource,
           });
           if (builder.environment.isHoistedIdentifier(binding.identifier)) {
             // Already hoisted
@@ -477,6 +464,7 @@ function lowerStatement(
             kind = InstructionKind.HoistedFunction;
           } else if (!binding.path.isVariableDeclarator()) {
             builder.errors.push({
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               reason: 'Unsupported declaration type for hoisting',
               description: `variable "${binding.identifier.name}" declared with ${binding.path.type}`,
@@ -486,6 +474,7 @@ function lowerStatement(
             continue;
           } else {
             builder.errors.push({
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               reason: 'Handle non-const declarations for hoisting',
               description: `variable "${binding.identifier.name}" declared with ${binding.kind}`,
@@ -499,14 +488,7 @@ function lowerStatement(
           CompilerError.invariant(identifier.kind === 'Identifier', {
             reason:
               'Expected hoisted binding to be a local identifier, not a global',
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: id.node.loc ?? GeneratedSource,
-                message: null,
-              },
-            ],
+            loc: id.node.loc ?? GeneratedSource,
           });
           const place: Place = {
             effect: Effect.Unknown,
@@ -573,6 +555,7 @@ function lowerStatement(
           builder.errors.push({
             reason:
               '(BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement',
+            severity: ErrorSeverity.Todo,
             category: ErrorCategory.Todo,
             loc: stmt.node.loc ?? null,
             suggestions: null,
@@ -645,6 +628,7 @@ function lowerStatement(
       if (test.node == null) {
         builder.errors.push({
           reason: `(BuildHIR::lowerStatement) Handle empty test in ForStatement`,
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: stmt.node.loc ?? null,
           suggestions: null,
@@ -796,6 +780,7 @@ function lowerStatement(
           if (hasDefault) {
             builder.errors.push({
               reason: `Expected at most one \`default\` branch in a switch statement, this code should have failed to parse`,
+              severity: ErrorSeverity.InvalidJS,
               category: ErrorCategory.Syntax,
               loc: case_.node.loc ?? null,
               suggestions: null,
@@ -868,6 +853,7 @@ function lowerStatement(
       if (nodeKind === 'var') {
         builder.errors.push({
           reason: `(BuildHIR::lowerStatement) Handle ${nodeKind} kinds in VariableDeclaration`,
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: stmt.node.loc ?? null,
           suggestions: null,
@@ -896,6 +882,7 @@ function lowerStatement(
           if (binding.kind !== 'Identifier') {
             builder.errors.push({
               reason: `(BuildHIR::lowerAssignment) Could not find binding for declaration.`,
+              severity: ErrorSeverity.Invariant,
               category: ErrorCategory.Invariant,
               loc: id.node.loc ?? null,
               suggestions: null,
@@ -913,6 +900,7 @@ function lowerStatement(
                 const declRangeStart = declaration.parentPath.node.start!;
                 builder.errors.push({
                   reason: `Expect \`const\` declaration not to be reassigned`,
+                  severity: ErrorSeverity.InvalidJS,
                   category: ErrorCategory.Syntax,
                   loc: id.node.loc ?? null,
                   suggestions: [
@@ -960,6 +948,7 @@ function lowerStatement(
           builder.errors.push({
             reason: `Expected variable declaration to be an identifier if no initializer was provided`,
             description: `Got a \`${id.type}\``,
+            severity: ErrorSeverity.InvalidJS,
             category: ErrorCategory.Syntax,
             loc: stmt.node.loc ?? null,
             suggestions: null,
@@ -1039,13 +1028,7 @@ function lowerStatement(
       CompilerError.invariant(stmt.get('id').type === 'Identifier', {
         reason: 'function declarations must have a name',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: stmt.node.loc ?? null,
-            message: null,
-          },
-        ],
+        loc: stmt.node.loc ?? null,
         suggestions: null,
       });
       const id = stmt.get('id') as NodePath<t.Identifier>;
@@ -1074,6 +1057,7 @@ function lowerStatement(
       if (stmt.node.await) {
         builder.errors.push({
           reason: `(BuildHIR::lowerStatement) Handle for-await loops`,
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: stmt.node.loc ?? null,
           suggestions: null,
@@ -1145,13 +1129,7 @@ function lowerStatement(
         CompilerError.invariant(declarations.length === 1, {
           reason: `Expected only one declaration in the init of a ForOfStatement, got ${declarations.length}`,
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: left.node.loc ?? null,
-              message: null,
-            },
-          ],
+          loc: left.node.loc ?? null,
           suggestions: null,
         });
         const id = declarations[0].get('id');
@@ -1166,15 +1144,8 @@ function lowerStatement(
         test = lowerValueToTemporary(builder, assign);
       } else {
         CompilerError.invariant(left.isLVal(), {
+          loc: leftLoc,
           reason: 'Expected ForOf init to be a variable declaration or lval',
-          description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: leftLoc,
-              message: null,
-            },
-          ],
         });
         const assign = lowerAssignment(
           builder,
@@ -1251,13 +1222,7 @@ function lowerStatement(
         CompilerError.invariant(declarations.length === 1, {
           reason: `Expected only one declaration in the init of a ForInStatement, got ${declarations.length}`,
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: left.node.loc ?? null,
-              message: null,
-            },
-          ],
+          loc: left.node.loc ?? null,
           suggestions: null,
         });
         const id = declarations[0].get('id');
@@ -1272,15 +1237,8 @@ function lowerStatement(
         test = lowerValueToTemporary(builder, assign);
       } else {
         CompilerError.invariant(left.isLVal(), {
+          loc: leftLoc,
           reason: 'Expected ForIn init to be a variable declaration or lval',
-          description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: leftLoc,
-              message: null,
-            },
-          ],
         });
         const assign = lowerAssignment(
           builder,
@@ -1332,6 +1290,7 @@ function lowerStatement(
       if (!hasNode(handlerPath)) {
         builder.errors.push({
           reason: `(BuildHIR::lowerStatement) Handle TryStatement without a catch clause`,
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: stmt.node.loc ?? null,
           suggestions: null,
@@ -1341,6 +1300,7 @@ function lowerStatement(
       if (hasNode(stmt.get('finalizer'))) {
         builder.errors.push({
           reason: `(BuildHIR::lowerStatement) Handle TryStatement with a finalizer ('finally') clause`,
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: stmt.node.loc ?? null,
           suggestions: null,
@@ -1434,6 +1394,7 @@ function lowerStatement(
       builder.errors.push({
         reason: `JavaScript 'with' syntax is not supported`,
         description: `'with' syntax is considered deprecated and removed from JavaScript standards, consider alternatives`,
+        severity: ErrorSeverity.UnsupportedJS,
         category: ErrorCategory.UnsupportedSyntax,
         loc: stmtPath.node.loc ?? null,
         suggestions: null,
@@ -1454,6 +1415,7 @@ function lowerStatement(
       builder.errors.push({
         reason: 'Inline `class` declarations are not supported',
         description: `Move class declarations outside of components/hooks`,
+        severity: ErrorSeverity.UnsupportedJS,
         category: ErrorCategory.UnsupportedSyntax,
         loc: stmtPath.node.loc ?? null,
         suggestions: null,
@@ -1483,6 +1445,7 @@ function lowerStatement(
       builder.errors.push({
         reason:
           'JavaScript `import` and `export` statements may only appear at the top level of a module',
+        severity: ErrorSeverity.InvalidJS,
         category: ErrorCategory.Syntax,
         loc: stmtPath.node.loc ?? null,
         suggestions: null,
@@ -1498,6 +1461,7 @@ function lowerStatement(
       builder.errors.push({
         reason:
           'TypeScript `namespace` statements may only appear at the top level of a module',
+        severity: ErrorSeverity.InvalidJS,
         category: ErrorCategory.Syntax,
         loc: stmtPath.node.loc ?? null,
         suggestions: null,
@@ -1576,6 +1540,7 @@ function lowerObjectPropertyKey(
        */
       builder.errors.push({
         reason: `(BuildHIR::lowerExpression) Expected Identifier, got ${key.type} key in ObjectExpression`,
+        severity: ErrorSeverity.Todo,
         category: ErrorCategory.Todo,
         loc: key.node.loc ?? null,
         suggestions: null,
@@ -1601,6 +1566,7 @@ function lowerObjectPropertyKey(
 
   builder.errors.push({
     reason: `(BuildHIR::lowerExpression) Expected Identifier, got ${key.type} key in ObjectExpression`,
+    severity: ErrorSeverity.Todo,
     category: ErrorCategory.Todo,
     loc: key.node.loc ?? null,
     suggestions: null,
@@ -1658,6 +1624,7 @@ function lowerExpression(
           if (!valuePath.isExpression()) {
             builder.errors.push({
               reason: `(BuildHIR::lowerExpression) Handle ${valuePath.type} values in ObjectExpression`,
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               loc: valuePath.node.loc ?? null,
               suggestions: null,
@@ -1684,6 +1651,7 @@ function lowerExpression(
           if (propertyPath.node.kind !== 'method') {
             builder.errors.push({
               reason: `(BuildHIR::lowerExpression) Handle ${propertyPath.node.kind} functions in ObjectExpression`,
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               loc: propertyPath.node.loc ?? null,
               suggestions: null,
@@ -1705,6 +1673,7 @@ function lowerExpression(
         } else {
           builder.errors.push({
             reason: `(BuildHIR::lowerExpression) Handle ${propertyPath.type} properties in ObjectExpression`,
+            severity: ErrorSeverity.Todo,
             category: ErrorCategory.Todo,
             loc: propertyPath.node.loc ?? null,
             suggestions: null,
@@ -1738,6 +1707,7 @@ function lowerExpression(
         } else {
           builder.errors.push({
             reason: `(BuildHIR::lowerExpression) Handle ${element.type} elements in ArrayExpression`,
+            severity: ErrorSeverity.Todo,
             category: ErrorCategory.Todo,
             loc: element.node.loc ?? null,
             suggestions: null,
@@ -1758,6 +1728,7 @@ function lowerExpression(
         builder.errors.push({
           reason: `Expected an expression as the \`new\` expression receiver (v8 intrinsics are not supported)`,
           description: `Got a \`${calleePath.node.type}\``,
+          severity: ErrorSeverity.InvalidJS,
           category: ErrorCategory.Syntax,
           loc: calleePath.node.loc ?? null,
           suggestions: null,
@@ -1784,6 +1755,7 @@ function lowerExpression(
       if (!calleePath.isExpression()) {
         builder.errors.push({
           reason: `Expected Expression, got ${calleePath.type} in CallExpression (v8 intrinsics not supported). This error is likely caused by a bug in React Compiler. Please file an issue`,
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: calleePath.node.loc ?? null,
           suggestions: null,
@@ -1818,6 +1790,7 @@ function lowerExpression(
       if (!leftPath.isExpression()) {
         builder.errors.push({
           reason: `(BuildHIR::lowerExpression) Expected Expression, got ${leftPath.type} lval in BinaryExpression`,
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: leftPath.node.loc ?? null,
           suggestions: null,
@@ -1830,6 +1803,7 @@ function lowerExpression(
       if (operator === '|>') {
         builder.errors.push({
           reason: `(BuildHIR::lowerExpression) Pipe operator not supported`,
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: leftPath.node.loc ?? null,
           suggestions: null,
@@ -1859,6 +1833,7 @@ function lowerExpression(
         if (last === null) {
           builder.errors.push({
             reason: `Expected sequence expression to have at least one expression`,
+            severity: ErrorSeverity.InvalidJS,
             category: ErrorCategory.Syntax,
             loc: expr.node.loc ?? null,
             suggestions: null,
@@ -2071,6 +2046,7 @@ function lowerExpression(
           builder.errors.push({
             reason: `(BuildHIR::lowerExpression) Unsupported syntax on the left side of an AssignmentExpression`,
             description: `Expected an LVal, got: ${left.type}`,
+            severity: ErrorSeverity.Todo,
             category: ErrorCategory.Todo,
             loc: left.node.loc ?? null,
             suggestions: null,
@@ -2099,6 +2075,7 @@ function lowerExpression(
       if (binaryOperator == null) {
         builder.errors.push({
           reason: `(BuildHIR::lowerExpression) Handle ${operator} operators in AssignmentExpression`,
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: expr.node.loc ?? null,
           suggestions: null,
@@ -2198,6 +2175,7 @@ function lowerExpression(
         default: {
           builder.errors.push({
             reason: `(BuildHIR::lowerExpression) Expected Identifier or MemberExpression, got ${expr.type} lval in AssignmentExpression`,
+            severity: ErrorSeverity.Todo,
             category: ErrorCategory.Todo,
             loc: expr.node.loc ?? null,
             suggestions: null,
@@ -2237,6 +2215,7 @@ function lowerExpression(
         if (!attribute.isJSXAttribute()) {
           builder.errors.push({
             reason: `(BuildHIR::lowerExpression) Handle ${attribute.type} attributes in JSXElement`,
+            severity: ErrorSeverity.Todo,
             category: ErrorCategory.Todo,
             loc: attribute.node.loc ?? null,
             suggestions: null,
@@ -2250,6 +2229,7 @@ function lowerExpression(
           if (propName.indexOf(':') !== -1) {
             builder.errors.push({
               reason: `(BuildHIR::lowerExpression) Unexpected colon in attribute name \`${propName}\``,
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               loc: namePath.node.loc ?? null,
               suggestions: null,
@@ -2259,13 +2239,7 @@ function lowerExpression(
           CompilerError.invariant(namePath.isJSXNamespacedName(), {
             reason: 'Refinement',
             description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: namePath.node.loc ?? null,
-                message: null,
-              },
-            ],
+            loc: namePath.node.loc ?? null,
             suggestions: null,
           });
           const namespace = namePath.node.namespace.name;
@@ -2286,6 +2260,7 @@ function lowerExpression(
           if (!valueExpr.isJSXExpressionContainer()) {
             builder.errors.push({
               reason: `(BuildHIR::lowerExpression) Handle ${valueExpr.type} attribute values in JSXElement`,
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               loc: valueExpr.node?.loc ?? null,
               suggestions: null,
@@ -2296,6 +2271,7 @@ function lowerExpression(
           if (!expression.isExpression()) {
             builder.errors.push({
               reason: `(BuildHIR::lowerExpression) Handle ${expression.type} expressions in JSXExpressionContainer within JSXElement`,
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               loc: valueExpr.node.loc ?? null,
               suggestions: null,
@@ -2319,14 +2295,8 @@ function lowerExpression(
           // This is already checked in builder.resolveIdentifier
           CompilerError.invariant(tagIdentifier.kind !== 'Identifier', {
             reason: `<${tagName}> tags should be module-level imports`,
+            loc: openingIdentifier.node.loc ?? GeneratedSource,
             description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: openingIdentifier.node.loc ?? GeneratedSource,
-                message: null,
-              },
-            ],
             suggestions: null,
           });
         }
@@ -2359,7 +2329,8 @@ function lowerExpression(
         for (const [name, locations] of Object.entries(fbtLocations)) {
           if (locations.length > 1) {
             CompilerError.throwDiagnostic({
-              category: ErrorCategory.Todo,
+              severity: ErrorSeverity.Todo,
+              category: ErrorCategory.FBT,
               reason: 'Support duplicate fbt tags',
               description: `Support \`<${tagName}>\` tags with multiple \`<${tagName}:${name}>\` values`,
               details: locations.map(loc => {
@@ -2420,6 +2391,7 @@ function lowerExpression(
         builder.errors.push({
           reason:
             '(BuildHIR::lowerExpression) Handle tagged template with interpolations',
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
@@ -2430,13 +2402,7 @@ function lowerExpression(
         reason:
           "there should be only one quasi as we don't support interpolations yet",
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: expr.node.loc ?? null,
-            message: null,
-          },
-        ],
+        loc: expr.node.loc ?? null,
         suggestions: null,
       });
       const value = expr.get('quasi').get('quasis').at(0)!.node.value;
@@ -2444,6 +2410,7 @@ function lowerExpression(
         builder.errors.push({
           reason:
             '(BuildHIR::lowerExpression) Handle tagged template where cooked value is different from raw value',
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
@@ -2466,6 +2433,7 @@ function lowerExpression(
       if (subexprs.length !== quasis.length - 1) {
         builder.errors.push({
           reason: `Unexpected quasi and subexpression lengths in template literal`,
+          severity: ErrorSeverity.InvalidJS,
           category: ErrorCategory.Syntax,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
@@ -2476,6 +2444,7 @@ function lowerExpression(
       if (subexprs.some(e => !e.isExpression())) {
         builder.errors.push({
           reason: `(BuildHIR::lowerAssignment) Handle TSType in TemplateLiteral.`,
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
@@ -2518,6 +2487,7 @@ function lowerExpression(
         } else {
           builder.errors.push({
             reason: `Only object properties can be deleted`,
+            severity: ErrorSeverity.InvalidJS,
             category: ErrorCategory.Syntax,
             loc: expr.node.loc ?? null,
             suggestions: [
@@ -2533,6 +2503,7 @@ function lowerExpression(
       } else if (expr.node.operator === 'throw') {
         builder.errors.push({
           reason: `Throw expressions are not supported`,
+          severity: ErrorSeverity.InvalidJS,
           category: ErrorCategory.Syntax,
           loc: expr.node.loc ?? null,
           suggestions: [
@@ -2654,6 +2625,7 @@ function lowerExpression(
       if (!argument.isIdentifier()) {
         builder.errors.push({
           reason: `(BuildHIR::lowerExpression) Handle UpdateExpression with ${argument.type} argument`,
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
@@ -2662,6 +2634,7 @@ function lowerExpression(
       } else if (builder.isContextIdentifier(argument)) {
         builder.errors.push({
           reason: `(BuildHIR::lowerExpression) Handle UpdateExpression to variables captured within lambdas.`,
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
@@ -2679,9 +2652,10 @@ function lowerExpression(
          * lowerIdentifierForAssignment should have already reported an error if it returned null,
          * we check here just in case
          */
-        if (!builder.errors.hasAnyErrors()) {
+        if (!builder.errors.hasErrors()) {
           builder.errors.push({
             reason: `(BuildHIR::lowerExpression) Found an invalid UpdateExpression without a previously reported error`,
+            severity: ErrorSeverity.Invariant,
             category: ErrorCategory.Invariant,
             loc: exprLoc,
             suggestions: null,
@@ -2691,6 +2665,7 @@ function lowerExpression(
       } else if (lvalue.kind === 'Global') {
         builder.errors.push({
           reason: `(BuildHIR::lowerExpression) Support UpdateExpression where argument is a global`,
+          severity: ErrorSeverity.Todo,
           category: ErrorCategory.Todo,
           loc: exprLoc,
           suggestions: null,
@@ -2746,6 +2721,7 @@ function lowerExpression(
 
       builder.errors.push({
         reason: `(BuildHIR::lowerExpression) Handle MetaProperty expressions other than import.meta`,
+        severity: ErrorSeverity.Todo,
         category: ErrorCategory.Todo,
         loc: exprPath.node.loc ?? null,
         suggestions: null,
@@ -2755,6 +2731,7 @@ function lowerExpression(
     default: {
       builder.errors.push({
         reason: `(BuildHIR::lowerExpression) Handle ${exprPath.type} expressions`,
+        severity: ErrorSeverity.Todo,
         category: ErrorCategory.Todo,
         loc: exprPath.node.loc ?? null,
         suggestions: null,
@@ -2834,13 +2811,7 @@ function lowerOptionalMemberExpression(
   CompilerError.invariant(object !== null, {
     reason: 'Satisfy type checker',
     description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
+    loc: null,
     suggestions: null,
   });
 
@@ -3058,6 +3029,7 @@ function lowerReorderableExpression(
   if (!isReorderableExpression(builder, expr, true)) {
     builder.errors.push({
       reason: `(BuildHIR::node.lowerReorderableExpression) Expression type \`${expr.type}\` cannot be safely reordered`,
+      severity: ErrorSeverity.Todo,
       category: ErrorCategory.Todo,
       loc: expr.node.loc ?? null,
       suggestions: null,
@@ -3254,6 +3226,7 @@ function lowerArguments(
     } else {
       builder.errors.push({
         reason: `(BuildHIR::lowerExpression) Handle ${argPath.type} arguments in CallExpression`,
+        severity: ErrorSeverity.Todo,
         category: ErrorCategory.Todo,
         loc: argPath.node.loc ?? null,
         suggestions: null,
@@ -3289,6 +3262,7 @@ function lowerMemberExpression(
     } else {
       builder.errors.push({
         reason: `(BuildHIR::lowerMemberExpression) Handle ${propertyNode.type} property`,
+        severity: ErrorSeverity.Todo,
         category: ErrorCategory.Todo,
         loc: propertyNode.node.loc ?? null,
         suggestions: null,
@@ -3310,6 +3284,7 @@ function lowerMemberExpression(
     if (!propertyNode.isExpression()) {
       builder.errors.push({
         reason: `(BuildHIR::lowerMemberExpression) Expected Expression, got ${propertyNode.type} property`,
+        severity: ErrorSeverity.Todo,
         category: ErrorCategory.Todo,
         loc: propertyNode.node.loc ?? null,
         suggestions: null,
@@ -3369,6 +3344,7 @@ function lowerJsxElementName(
       builder.errors.push({
         reason: `Expected JSXNamespacedName to have no colons in the namespace or name`,
         description: `Got \`${namespace}\` : \`${name}\``,
+        severity: ErrorSeverity.InvalidJS,
         category: ErrorCategory.Syntax,
         loc: exprPath.node.loc ?? null,
         suggestions: null,
@@ -3383,6 +3359,7 @@ function lowerJsxElementName(
   } else {
     builder.errors.push({
       reason: `(BuildHIR::lowerJsxElementName) Handle ${exprPath.type} tags`,
+      severity: ErrorSeverity.Todo,
       category: ErrorCategory.Todo,
       loc: exprPath.node.loc ?? null,
       suggestions: null,
@@ -3408,13 +3385,7 @@ function lowerJsxMemberExpression(
     CompilerError.invariant(object.isJSXIdentifier(), {
       reason: `TypeScript refinement fail: expected 'JsxIdentifier', got \`${object.node.type}\``,
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: object.node.loc ?? null,
-          message: null,
-        },
-      ],
+      loc: object.node.loc ?? null,
       suggestions: null,
     });
 
@@ -3456,13 +3427,7 @@ function lowerJsxElement(
       CompilerError.invariant(expression.isExpression(), {
         reason: `(BuildHIR::lowerJsxElement) Expected Expression but found ${expression.type}!`,
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: expression.node.loc ?? null,
-            message: null,
-          },
-        ],
+        loc: expression.node.loc ?? null,
         suggestions: null,
       });
       return lowerExpressionToTemporary(builder, expression);
@@ -3493,6 +3458,7 @@ function lowerJsxElement(
   } else {
     builder.errors.push({
       reason: `(BuildHIR::lowerJsxElement) Unhandled JsxElement, got: ${exprPath.type}`,
+      severity: ErrorSeverity.Todo,
       category: ErrorCategory.Todo,
       loc: exprPath.node.loc ?? null,
       suggestions: null,
@@ -3575,14 +3541,17 @@ function lowerFunctionToValue(
 ): InstructionValue {
   const exprNode = expr.node;
   const exprLoc = exprNode.loc ?? GeneratedSource;
+  let name: string | null = null;
+  if (expr.isFunctionExpression()) {
+    name = expr.get('id')?.node?.name ?? null;
+  }
   const loweredFunc = lowerFunction(builder, expr);
   if (!loweredFunc) {
     return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
   }
   return {
     kind: 'FunctionExpression',
-    name: loweredFunc.func.id,
-    nameHint: null,
+    name,
     type: expr.node.type,
     loc: exprLoc,
     loweredFunc,
@@ -3677,6 +3646,7 @@ function lowerIdentifier(
           reason: `The 'eval' function is not supported`,
           description:
             'Eval is an anti-pattern in JavaScript, and the code executed cannot be evaluated by React Compiler',
+          severity: ErrorSeverity.UnsupportedJS,
           category: ErrorCategory.UnsupportedSyntax,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
@@ -3733,6 +3703,7 @@ function lowerIdentifierForAssignment(
       // Else its an internal error bc we couldn't find the binding
       builder.errors.push({
         reason: `(BuildHIR::lowerAssignment) Could not find binding for declaration.`,
+        severity: ErrorSeverity.Invariant,
         category: ErrorCategory.Invariant,
         loc: path.node.loc ?? null,
         suggestions: null,
@@ -3745,6 +3716,7 @@ function lowerIdentifierForAssignment(
   ) {
     builder.errors.push({
       reason: `Cannot reassign a \`const\` variable`,
+      severity: ErrorSeverity.InvalidJS,
       category: ErrorCategory.Syntax,
       loc: path.node.loc ?? null,
       description:
@@ -3802,6 +3774,7 @@ function lowerAssignment(
         if (kind === InstructionKind.Const && !isHoistedIdentifier) {
           builder.errors.push({
             reason: `Expected \`const\` declaration not to be reassigned`,
+            severity: ErrorSeverity.InvalidJS,
             category: ErrorCategory.Syntax,
             loc: lvalue.node.loc ?? null,
             suggestions: null,
@@ -3816,6 +3789,7 @@ function lowerAssignment(
         ) {
           builder.errors.push({
             reason: `Unexpected context variable kind`,
+            severity: ErrorSeverity.InvalidJS,
             category: ErrorCategory.Syntax,
             loc: lvalue.node.loc ?? null,
             suggestions: null,
@@ -3860,13 +3834,7 @@ function lowerAssignment(
       CompilerError.invariant(kind === InstructionKind.Reassign, {
         reason: 'MemberExpression may only appear in an assignment expression',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: lvaluePath.node.loc ?? null,
-            message: null,
-          },
-        ],
+        loc: lvaluePath.node.loc ?? null,
         suggestions: null,
       });
       const lvalue = lvaluePath as NodePath<t.MemberExpression>;
@@ -3893,6 +3861,7 @@ function lowerAssignment(
         } else {
           builder.errors.push({
             reason: `(BuildHIR::lowerAssignment) Handle ${property.type} properties in MemberExpression`,
+            severity: ErrorSeverity.Todo,
             category: ErrorCategory.Todo,
             loc: property.node.loc ?? null,
             suggestions: null,
@@ -3905,6 +3874,7 @@ function lowerAssignment(
           builder.errors.push({
             reason:
               '(BuildHIR::lowerAssignment) Expected private name to appear as a non-computed property',
+            severity: ErrorSeverity.Todo,
             category: ErrorCategory.Todo,
             loc: property.node.loc ?? null,
             suggestions: null,
@@ -3970,6 +3940,7 @@ function lowerAssignment(
               continue;
             } else if (identifier.kind === 'Global') {
               builder.errors.push({
+                severity: ErrorSeverity.Todo,
                 category: ErrorCategory.Todo,
                 reason:
                   'Expected reassignment of globals to enable forceTemporaries',
@@ -4009,6 +3980,7 @@ function lowerAssignment(
             continue;
           } else if (identifier.kind === 'Global') {
             builder.errors.push({
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               reason:
                 'Expected reassignment of globals to enable forceTemporaries',
@@ -4082,6 +4054,7 @@ function lowerAssignment(
           if (!argument.isIdentifier()) {
             builder.errors.push({
               reason: `(BuildHIR::lowerAssignment) Handle ${argument.node.type} rest element in ObjectPattern`,
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               loc: argument.node.loc ?? null,
               suggestions: null,
@@ -4113,6 +4086,7 @@ function lowerAssignment(
               continue;
             } else if (identifier.kind === 'Global') {
               builder.errors.push({
+                severity: ErrorSeverity.Todo,
                 category: ErrorCategory.Todo,
                 reason:
                   'Expected reassignment of globals to enable forceTemporaries',
@@ -4130,6 +4104,7 @@ function lowerAssignment(
           if (!property.isObjectProperty()) {
             builder.errors.push({
               reason: `(BuildHIR::lowerAssignment) Handle ${property.type} properties in ObjectPattern`,
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               loc: property.node.loc ?? null,
               suggestions: null,
@@ -4139,6 +4114,7 @@ function lowerAssignment(
           if (property.node.computed) {
             builder.errors.push({
               reason: `(BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern`,
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               loc: property.node.loc ?? null,
               suggestions: null,
@@ -4153,6 +4129,7 @@ function lowerAssignment(
           if (!element.isLVal()) {
             builder.errors.push({
               reason: `(BuildHIR::lowerAssignment) Expected object property value to be an LVal, got: ${element.type}`,
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               loc: element.node.loc ?? null,
               suggestions: null,
@@ -4175,6 +4152,7 @@ function lowerAssignment(
               continue;
             } else if (identifier.kind === 'Global') {
               builder.errors.push({
+                severity: ErrorSeverity.Todo,
                 category: ErrorCategory.Todo,
                 reason:
                   'Expected reassignment of globals to enable forceTemporaries',
@@ -4324,6 +4302,7 @@ function lowerAssignment(
     default: {
       builder.errors.push({
         reason: `(BuildHIR::lowerAssignment) Handle ${lvaluePath.type} assignments`,
+        severity: ErrorSeverity.Todo,
         category: ErrorCategory.Todo,
         loc: lvaluePath.node.loc ?? null,
         suggestions: null,

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

@@ -234,14 +234,7 @@ function pushEndScopeTerminal(
   const fallthroughId = context.fallthroughs.get(scope.id);
   CompilerError.invariant(fallthroughId != null, {
     reason: 'Expected scope to exist',
-    description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: GeneratedSource,
-        message: null,
-      },
-    ],
+    loc: GeneratedSource,
   });
   context.rewrites.push({
     kind: 'EndScope',

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

@@ -269,14 +269,7 @@ class PropertyPathRegistry {
       CompilerError.invariant(reactive === rootNode.fullPath.reactive, {
         reason:
           '[HoistablePropertyLoads] Found inconsistencies in `reactive` flag when deduping identifier reads within the same scope',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: identifier.loc,
-            message: null,
-          },
-        ],
+        loc: identifier.loc,
       });
     }
     return rootNode;
@@ -505,14 +498,7 @@ function propagateNonNull(
     if (node == null) {
       CompilerError.invariant(false, {
         reason: `Bad node ${nodeId}, kind: ${direction}`,
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: GeneratedSource,
-            message: null,
-          },
-        ],
+        loc: GeneratedSource,
       });
     }
     const neighbors = Array.from(
@@ -584,14 +570,7 @@ function propagateNonNull(
     CompilerError.invariant(i++ < 100, {
       reason:
         '[CollectHoistablePropertyLoads] fixed point iteration did not terminate after 100 loops',
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: GeneratedSource,
-          message: null,
-        },
-      ],
+      loc: GeneratedSource,
     });
 
     changed = false;
@@ -623,13 +602,7 @@ export function assertNonNull<T extends NonNullable<U>, U>(
   CompilerError.invariant(value != null, {
     reason: 'Unexpected null',
     description: source != null ? `(from ${source})` : null,
-    details: [
-      {
-        kind: 'error',
-        loc: GeneratedSource,
-        message: null,
-      },
-    ],
+    loc: GeneratedSource,
   });
   return value;
 }

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

@@ -186,13 +186,7 @@ function matchOptionalTestBlock(
         reason:
           '[OptionalChainDeps] Inconsistent optional chaining property load',
         description: `Test=${printIdentifier(terminal.test.identifier)} PropertyLoad base=${printIdentifier(propertyLoad.value.object.identifier)}`,
-        details: [
-          {
-            kind: 'error',
-            loc: propertyLoad.loc,
-            message: null,
-          },
-        ],
+        loc: propertyLoad.loc,
       },
     );
 
@@ -200,14 +194,7 @@ function matchOptionalTestBlock(
       storeLocal.value.identifier.id === propertyLoad.lvalue.identifier.id,
       {
         reason: '[OptionalChainDeps] Unexpected storeLocal',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: propertyLoad.loc,
-            message: null,
-          },
-        ],
+        loc: propertyLoad.loc,
       },
     );
     if (
@@ -224,14 +211,7 @@ function matchOptionalTestBlock(
         alternate.instructions[1].value.kind === 'StoreLocal',
       {
         reason: 'Unexpected alternate structure',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: terminal.loc,
-            message: null,
-          },
-        ],
+        loc: terminal.loc,
       },
     );
 
@@ -267,14 +247,7 @@ function traverseOptionalBlock(
   if (maybeTest.terminal.kind === 'branch') {
     CompilerError.invariant(optional.terminal.optional, {
       reason: '[OptionalChainDeps] Expect base case to be always optional',
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: optional.terminal.loc,
-          message: null,
-        },
-      ],
+      loc: optional.terminal.loc,
     });
     /**
      * Optional base expressions are currently within value blocks which cannot
@@ -312,14 +285,7 @@ function traverseOptionalBlock(
         maybeTest.instructions.at(-1)!.lvalue.identifier.id,
       {
         reason: '[OptionalChainDeps] Unexpected test expression',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: maybeTest.terminal.loc,
-            message: null,
-          },
-        ],
+        loc: maybeTest.terminal.loc,
       },
     );
     baseObject = {
@@ -408,14 +374,7 @@ function traverseOptionalBlock(
       reason:
         '[OptionalChainDeps] Unexpected instructions an inner optional block. ' +
         'This indicates that the compiler may be incorrectly concatenating two unrelated optional chains',
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: optional.terminal.loc,
-          message: null,
-        },
-      ],
+      loc: optional.terminal.loc,
     });
   }
   const matchConsequentResult = matchOptionalTestBlock(test, context.blocks);
@@ -428,13 +387,7 @@ function traverseOptionalBlock(
     {
       reason: '[OptionalChainDeps] Unexpected optional goto-fallthrough',
       description: `${matchConsequentResult.consequentGoto} != ${optional.terminal.fallthrough}`,
-      details: [
-        {
-          kind: 'error',
-          loc: optional.terminal.loc,
-          message: null,
-        },
-      ],
+      loc: optional.terminal.loc,
     },
   );
   const load = {

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

@@ -24,14 +24,7 @@ export function computeUnconditionalBlocks(fn: HIRFunction): Set<BlockId> {
     CompilerError.invariant(!unconditionalBlocks.has(current), {
       reason:
         'Internal error: non-terminating loop in ComputeUnconditionalBlocks',
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     unconditionalBlocks.add(current);

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

@@ -1,91 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import {Effect, ValueKind} from '..';
-import {TypeConfig} from './TypeSchema';
-
-/**
- * Libraries developed before we officially documented the [Rules of React](https://react.dev/reference/rules)
- * implement APIs which cannot be memoized safely, either via manual or automatic memoization.
- *
- * Any non-hook API that is designed to be called during render (not events/effects) should be safe to memoize:
- *
- * ```js
- * function Component() {
- *   const {someFunction} = useLibrary();
- *   // it should always be safe to memoize functions like this
- *  const result = useMemo(() => someFunction(), [someFunction]);
- * }
- * ```
- *
- * However, some APIs implement "interior mutability" — mutating values rather than copying into a new value
- * and setting state with the new value. Such functions (`someFunction()` in the example) could return different
- * values even though the function itself is the same object. This breaks memoization, since React relies on
- * the outer object (or function) changing if part of its value has changed.
- *
- * Given that we didn't have the Rules of React precisely documented prior to the introduction of React compiler,
- * it's understandable that some libraries accidentally shipped APIs that break this rule. However, developers
- * can easily run into pitfalls with these APIs. They may manually memoize them, which can break their app. Or
- * they may try using React Compiler, and think that the compiler has broken their code.
- *
- * To help ensure that developers can successfully use the compiler with existing code, this file teaches the
- * compiler about specific APIs that are known to be incompatible with memoization. We've tried to be as precise
- * as possible.
- *
- * The React team is open to collaborating with library authors to help develop compatible versions of these APIs,
- * and we have already reached out to the teams who own any API listed here to ensure they are aware of the issue.
- */
-export function defaultModuleTypeProvider(
-  moduleName: string,
-): TypeConfig | null {
-  switch (moduleName) {
-    case 'react-hook-form': {
-      return {
-        kind: 'object',
-        properties: {
-          useForm: {
-            kind: 'hook',
-            returnType: {
-              kind: 'object',
-              properties: {
-                // Only the `watch()` function returned by react-hook-form's `useForm()` API is incompatible
-                watch: {
-                  kind: 'function',
-                  positionalParams: [],
-                  restParam: Effect.Read,
-                  calleeEffect: Effect.Read,
-                  returnType: {kind: 'type', name: 'Any'},
-                  returnValueKind: ValueKind.Mutable,
-                  knownIncompatible: `React Hook Form's \`useForm()\` API returns a \`watch()\` function which cannot be memoized safely.`,
-                },
-              },
-            },
-          },
-        },
-      };
-    }
-    case '@tanstack/react-table': {
-      return {
-        kind: 'object',
-        properties: {
-          /*
-           * Many of the properties of `useReactTable()`'s return value are incompatible, so we mark the entire hook
-           * as incompatible
-           */
-          useReactTable: {
-            kind: 'hook',
-            positionalParams: [],
-            restParam: Effect.Read,
-            returnType: {kind: 'type', name: 'Any'},
-            knownIncompatible: `TanStack Table's \`useReactTable()\` API returns functions that cannot be memoized safely`,
-          },
-        },
-      };
-    }
-  }
-  return null;
-}

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

@@ -54,14 +54,7 @@ export class ReactiveScopeDependencyTreeHIR {
           prevAccessType == null || prevAccessType === accessType,
           {
             reason: 'Conflicting access types',
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: GeneratedSource,
-                message: null,
-              },
-            ],
+            loc: GeneratedSource,
           },
         );
         let nextNode = currNode.properties.get(path[i].property);
@@ -97,13 +90,7 @@ export class ReactiveScopeDependencyTreeHIR {
       CompilerError.invariant(reactive === rootNode.reactive, {
         reason: '[DeriveMinimalDependenciesHIR] Conflicting reactive root flag',
         description: `Identifier ${printIdentifier(identifier)}`,
-        details: [
-          {
-            kind: 'error',
-            loc: GeneratedSource,
-            message: null,
-          },
-        ],
+        loc: GeneratedSource,
       });
     }
     return rootNode;

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

@@ -89,13 +89,7 @@ export class Dominator<T> {
     CompilerError.invariant(dominator !== undefined, {
       reason: 'Unknown node',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     return dominator === id ? null : dominator;
@@ -136,13 +130,7 @@ export class PostDominator<T> {
     CompilerError.invariant(dominator !== undefined, {
       reason: 'Unknown node',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     return dominator === id ? null : dominator;
@@ -187,13 +175,7 @@ function computeImmediateDominators<T>(graph: Graph<T>): Map<T, T> {
       CompilerError.invariant(newIdom !== null, {
         reason: `At least one predecessor must have been visited for block ${id}`,
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
         suggestions: null,
       });
 

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

@@ -50,7 +50,6 @@ import {
 import {Scope as BabelScope, NodePath} from '@babel/traverse';
 import {TypeSchema} from './TypeSchema';
 import {FlowTypeEnv} from '../Flood/Types';
-import {defaultModuleTypeProvider} from './DefaultModuleTypeProvider';
 
 export const ReactElementSymbolSchema = z.object({
   elementSymbol: z.union([
@@ -261,8 +260,6 @@ export const EnvironmentConfigSchema = z.object({
 
   enableFire: z.boolean().default(false),
 
-  enableNameAnonymousFunctions: z.boolean().default(false),
-
   /**
    * Enables inference and auto-insertion of effect dependencies. Takes in an array of
    * configurable module and import pairs to allow for user-land experimentation. For example,
@@ -653,13 +650,6 @@ export const EnvironmentConfigSchema = z.object({
    *   useMemo(() => { ... }, [...]);
    */
   validateNoVoidUseMemo: z.boolean().default(false),
-
-  /**
-   * Validates that Components/Hooks are always defined at module level. This prevents scope
-   * reference errors that occur when the compiler attempts to optimize the nested component/hook
-   * while its parent function remains uncompiled.
-   */
-  validateNoDynamicallyCreatedComponentsOrHooks: z.boolean().default(false),
 });
 
 export type EnvironmentConfig = z.infer<typeof EnvironmentConfigSchema>;
@@ -752,13 +742,7 @@ export class Environment {
       CompilerError.invariant(!this.#globals.has(hookName), {
         reason: `[Globals] Found existing definition in global registry for custom hook ${hookName}`,
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
         suggestions: null,
       });
       this.#globals.set(
@@ -791,14 +775,7 @@ export class Environment {
       CompilerError.invariant(code != null, {
         reason:
           'Expected Environment to be initialized with source code when a Flow type provider is specified',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
       });
       this.#flowTypeEnvironment.init(this, code);
     } else {
@@ -809,14 +786,7 @@ export class Environment {
   get typeContext(): FlowTypeEnv {
     CompilerError.invariant(this.#flowTypeEnvironment != null, {
       reason: 'Flow type environment not initialized',
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
     });
     return this.#flowTypeEnvironment;
   }
@@ -883,16 +853,10 @@ export class Environment {
   #resolveModuleType(moduleName: string, loc: SourceLocation): Global | null {
     let moduleType = this.#moduleTypes.get(moduleName);
     if (moduleType === undefined) {
-      /*
-       * NOTE: Zod doesn't work when specifying a function as a default, so we have to
-       * fallback to the default value here
-       */
-      const moduleTypeProvider =
-        this.config.moduleTypeProvider ?? defaultModuleTypeProvider;
-      if (moduleTypeProvider == null) {
+      if (this.config.moduleTypeProvider == null) {
         return null;
       }
-      const unparsedModuleConfig = moduleTypeProvider(moduleName);
+      const unparsedModuleConfig = this.config.moduleTypeProvider(moduleName);
       if (unparsedModuleConfig != null) {
         const parsedModuleConfig = TypeSchema.safeParse(unparsedModuleConfig);
         if (!parsedModuleConfig.success) {
@@ -1066,13 +1030,7 @@ export class Environment {
       CompilerError.invariant(shape !== undefined, {
         reason: `[HIR] Forget internal error: cannot resolve shape ${shapeId}`,
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
         suggestions: null,
       });
       return shape.properties.get('*') ?? null;
@@ -1097,13 +1055,7 @@ export class Environment {
       CompilerError.invariant(shape !== undefined, {
         reason: `[HIR] Forget internal error: cannot resolve shape ${shapeId}`,
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
         suggestions: null,
       });
       if (typeof property === 'string') {
@@ -1128,13 +1080,7 @@ export class Environment {
       CompilerError.invariant(shape !== undefined, {
         reason: `[HIR] Forget internal error: cannot resolve shape ${shapeId}`,
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
         suggestions: null,
       });
       return shape.functionType;

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

@@ -184,13 +184,7 @@ function handleAssignment(
           CompilerError.invariant(valuePath.isLVal(), {
             reason: `[FindContextIdentifiers] Expected object property value to be an LVal, got: ${valuePath.type}`,
             description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: valuePath.node.loc ?? GeneratedSource,
-                message: null,
-              },
-            ],
+            loc: valuePath.node.loc ?? GeneratedSource,
             suggestions: null,
           });
           handleAssignment(currentFn, identifiers, valuePath);
@@ -198,13 +192,7 @@ function handleAssignment(
           CompilerError.invariant(property.isRestElement(), {
             reason: `[FindContextIdentifiers] Invalid assumptions for babel types.`,
             description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: property.node.loc ?? GeneratedSource,
-                message: null,
-              },
-            ],
+            loc: property.node.loc ?? GeneratedSource,
             suggestions: null,
           });
           handleAssignment(currentFn, identifiers, property);

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

@@ -1001,7 +1001,6 @@ export function installTypeConfig(
         mutableOnlyIfOperandsAreMutable:
           typeConfig.mutableOnlyIfOperandsAreMutable === true,
         aliasing: typeConfig.aliasing,
-        knownIncompatible: typeConfig.knownIncompatible ?? null,
       });
     }
     case 'hook': {
@@ -1020,7 +1019,6 @@ export function installTypeConfig(
         returnValueKind: typeConfig.returnValueKind ?? ValueKind.Frozen,
         noAlias: typeConfig.noAlias === true,
         aliasing: typeConfig.aliasing,
-        knownIncompatible: typeConfig.knownIncompatible ?? null,
       });
     }
     case 'object': {

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

@@ -7,11 +7,7 @@
 
 import {BindingKind} from '@babel/traverse';
 import * as t from '@babel/types';
-import {
-  CompilerDiagnostic,
-  CompilerError,
-  ErrorCategory,
-} from '../CompilerError';
+import {CompilerError} from '../CompilerError';
 import {assertExhaustive} from '../Utils/utils';
 import {Environment, ReactFunctionType} from './Environment';
 import type {HookKind} from './ObjectShape';
@@ -19,7 +15,6 @@ import {Type, makeType} from './Types';
 import {z} from 'zod';
 import type {AliasingEffect} from '../Inference/AliasingEffects';
 import {isReservedWord} from '../Utils/Keyword';
-import {Err, Ok, Result} from '../Utils/Result';
 
 /*
  * *******************************************************************************************
@@ -58,8 +53,7 @@ export type SourceLocation = t.SourceLocation | typeof GeneratedSource;
  */
 export type ReactiveFunction = {
   loc: SourceLocation;
-  id: ValidIdentifierName | null;
-  nameHint: string | null;
+  id: string | null;
   params: Array<Place | SpreadPattern>;
   generator: boolean;
   async: boolean;
@@ -281,8 +275,7 @@ export type ReactiveTryTerminal = {
 // A function lowered to HIR form, ie where its body is lowered to an HIR control-flow graph
 export type HIRFunction = {
   loc: SourceLocation;
-  id: ValidIdentifierName | null;
-  nameHint: string | null;
+  id: string | null;
   fnType: ReactFunctionType;
   env: Environment;
   params: Array<Place | SpreadPattern>;
@@ -1130,8 +1123,7 @@ export type JsxAttribute =
 
 export type FunctionExpression = {
   kind: 'FunctionExpression';
-  name: ValidIdentifierName | null;
-  nameHint: string | null;
+  name: string | null;
   loweredFunc: LoweredFunction;
   type:
     | 'ArrowFunctionExpression'
@@ -1306,52 +1298,31 @@ export function forkTemporaryIdentifier(
   };
 }
 
-export function validateIdentifierName(
-  name: string,
-): Result<ValidatedIdentifier, CompilerError> {
-  if (isReservedWord(name)) {
-    const error = new CompilerError();
-    error.pushDiagnostic(
-      CompilerDiagnostic.create({
-        category: ErrorCategory.Syntax,
-        reason: 'Expected a non-reserved identifier name',
-        description: `\`${name}\` is a reserved word in JavaScript and cannot be used as an identifier name`,
-        suggestions: null,
-      }).withDetails({
-        kind: 'error',
-        loc: GeneratedSource,
-        message: 'reserved word',
-      }),
-    );
-    return Err(error);
-  } else if (!t.isValidIdentifier(name)) {
-    const error = new CompilerError();
-    error.pushDiagnostic(
-      CompilerDiagnostic.create({
-        category: ErrorCategory.Syntax,
-        reason: `Expected a valid identifier name`,
-        description: `\`${name}\` is not a valid JavaScript identifier`,
-        suggestions: null,
-      }).withDetails({
-        kind: 'error',
-        loc: GeneratedSource,
-        message: 'reserved word',
-      }),
-    );
-  }
-  return Ok({
-    kind: 'named',
-    value: name as ValidIdentifierName,
-  });
-}
-
 /**
  * Creates a valid identifier name. This should *not* be used for synthesizing
  * identifier names: only call this method for identifier names that appear in the
  * original source code.
  */
 export function makeIdentifierName(name: string): ValidatedIdentifier {
-  return validateIdentifierName(name).unwrap();
+  if (isReservedWord(name)) {
+    CompilerError.throwInvalidJS({
+      reason: 'Expected a non-reserved identifier name',
+      loc: GeneratedSource,
+      description: `\`${name}\` is a reserved word in JavaScript and cannot be used as an identifier name`,
+      suggestions: null,
+    });
+  } else {
+    CompilerError.invariant(t.isValidIdentifier(name), {
+      reason: `Expected a valid identifier name`,
+      loc: GeneratedSource,
+      description: `\`${name}\` is not a valid JavaScript identifier`,
+      suggestions: null,
+    });
+  }
+  return {
+    kind: 'named',
+    value: name as ValidIdentifierName,
+  };
 }
 
 /**
@@ -1363,14 +1334,8 @@ export function makeIdentifierName(name: string): ValidatedIdentifier {
 export function promoteTemporary(identifier: Identifier): void {
   CompilerError.invariant(identifier.name === null, {
     reason: `Expected a temporary (unnamed) identifier`,
+    loc: GeneratedSource,
     description: `Identifier already has a name, \`${identifier.name}\``,
-    details: [
-      {
-        kind: 'error',
-        loc: GeneratedSource,
-        message: null,
-      },
-    ],
     suggestions: null,
   });
   identifier.name = {
@@ -1393,14 +1358,8 @@ export function isPromotedTemporary(name: string): boolean {
 export function promoteTemporaryJsxTag(identifier: Identifier): void {
   CompilerError.invariant(identifier.name === null, {
     reason: `Expected a temporary (unnamed) identifier`,
+    loc: GeneratedSource,
     description: `Identifier already has a name, \`${identifier.name}\``,
-    details: [
-      {
-        kind: 'error',
-        loc: GeneratedSource,
-        message: null,
-      },
-    ],
     suggestions: null,
   });
   identifier.name = {
@@ -1568,13 +1527,7 @@ export function isMutableEffect(
       CompilerError.invariant(false, {
         reason: 'Unexpected unknown effect',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: location,
-            message: null,
-          },
-        ],
+        loc: location,
         suggestions: null,
       });
     }
@@ -1707,13 +1660,7 @@ export function makeBlockId(id: number): BlockId {
   CompilerError.invariant(id >= 0 && Number.isInteger(id), {
     reason: 'Expected block id to be a non-negative integer',
     description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
+    loc: null,
     suggestions: null,
   });
   return id as BlockId;
@@ -1730,13 +1677,7 @@ export function makeScopeId(id: number): ScopeId {
   CompilerError.invariant(id >= 0 && Number.isInteger(id), {
     reason: 'Expected block id to be a non-negative integer',
     description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
+    loc: null,
     suggestions: null,
   });
   return id as ScopeId;
@@ -1753,13 +1694,7 @@ export function makeIdentifierId(id: number): IdentifierId {
   CompilerError.invariant(id >= 0 && Number.isInteger(id), {
     reason: 'Expected identifier id to be a non-negative integer',
     description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
+    loc: null,
     suggestions: null,
   });
   return id as IdentifierId;
@@ -1776,13 +1711,7 @@ export function makeDeclarationId(id: number): DeclarationId {
   CompilerError.invariant(id >= 0 && Number.isInteger(id), {
     reason: 'Expected declaration id to be a non-negative integer',
     description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
+    loc: null,
     suggestions: null,
   });
   return id as DeclarationId;
@@ -1799,13 +1728,7 @@ export function makeInstructionId(id: number): InstructionId {
   CompilerError.invariant(id >= 0 && Number.isInteger(id), {
     reason: 'Expected instruction id to be a non-negative integer',
     description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
+    loc: null,
     suggestions: null,
   });
   return id as InstructionId;

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

@@ -7,7 +7,7 @@
 
 import {Binding, NodePath} from '@babel/traverse';
 import * as t from '@babel/types';
-import {CompilerError, ErrorCategory} from '../CompilerError';
+import {CompilerError, ErrorCategory, ErrorSeverity} from '../CompilerError';
 import {Environment} from './Environment';
 import {
   BasicBlock,
@@ -309,7 +309,8 @@ export default class HIRBuilder {
   resolveBinding(node: t.Identifier): Identifier {
     if (node.name === 'fbt') {
       CompilerError.throwDiagnostic({
-        category: ErrorCategory.Todo,
+        severity: ErrorSeverity.Todo,
+        category: ErrorCategory.FBT,
         reason: 'Support local variables named `fbt`',
         description:
           'Local variables named `fbt` may conflict with the fbt plugin and are not yet supported',
@@ -322,21 +323,6 @@ export default class HIRBuilder {
         ],
       });
     }
-    if (node.name === 'this') {
-      CompilerError.throwDiagnostic({
-        category: ErrorCategory.UnsupportedSyntax,
-        reason: '`this` is not supported syntax',
-        description:
-          'React Compiler does not support compiling functions that use `this`',
-        details: [
-          {
-            kind: 'error',
-            message: '`this` was used here',
-            loc: node.loc ?? GeneratedSource,
-          },
-        ],
-      });
-    }
     const originalName = node.name;
     let name = originalName;
     let index = 0;
@@ -507,13 +493,7 @@ export default class HIRBuilder {
       {
         reason: 'Mismatched label',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
         suggestions: null,
       },
     );
@@ -536,13 +516,7 @@ export default class HIRBuilder {
       {
         reason: 'Mismatched label',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
         suggestions: null,
       },
     );
@@ -578,13 +552,7 @@ export default class HIRBuilder {
       {
         reason: 'Mismatched loops',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
         suggestions: null,
       },
     );
@@ -609,13 +577,7 @@ export default class HIRBuilder {
     CompilerError.invariant(false, {
       reason: 'Expected a loop or switch to be in scope',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
   }
@@ -636,13 +598,7 @@ export default class HIRBuilder {
         CompilerError.invariant(false, {
           reason: 'Continue may only refer to a labeled loop',
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: null,
-              message: null,
-            },
-          ],
+          loc: null,
           suggestions: null,
         });
       }
@@ -650,13 +606,7 @@ export default class HIRBuilder {
     CompilerError.invariant(false, {
       reason: 'Expected a loop to be in scope',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
   }
@@ -679,13 +629,7 @@ function _shrink(func: HIR): void {
     CompilerError.invariant(block != null, {
       reason: `expected block ${blockId} to exist`,
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     target = getTargetIfIndirection(block);
@@ -817,13 +761,7 @@ function getReversePostorderedBlocks(func: HIR): HIR['blocks'] {
     CompilerError.invariant(block != null, {
       reason: '[HIRBuilder] Unexpected null block',
       description: `expected block ${blockId} to exist`,
-      details: [
-        {
-          kind: 'error',
-          loc: GeneratedSource,
-          message: null,
-        },
-      ],
+      loc: GeneratedSource,
     });
     const successors = [...eachTerminalSuccessor(block.terminal)].reverse();
     const fallthrough = terminalFallthrough(block.terminal);
@@ -879,13 +817,7 @@ export function markInstructionIds(func: HIR): void {
       CompilerError.invariant(!visited.has(instr), {
         reason: `${printInstruction(instr)} already visited!`,
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: instr.loc,
-            message: null,
-          },
-        ],
+        loc: instr.loc,
         suggestions: null,
       });
       visited.add(instr);
@@ -908,13 +840,7 @@ export function markPredecessors(func: HIR): void {
     CompilerError.invariant(block != null, {
       reason: 'unexpected missing block',
       description: `block ${blockId}`,
-      details: [
-        {
-          kind: 'error',
-          loc: GeneratedSource,
-          message: null,
-        },
-      ],
+      loc: GeneratedSource,
     });
     if (prevBlock) {
       block.preds.add(prevBlock.id);

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

@@ -61,13 +61,7 @@ export function mergeConsecutiveBlocks(fn: HIRFunction): void {
     CompilerError.invariant(predecessor !== undefined, {
       reason: `Expected predecessor ${predecessorId} to exist`,
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     if (predecessor.terminal.kind !== 'goto' || predecessor.kind !== 'block') {
@@ -83,13 +77,7 @@ export function mergeConsecutiveBlocks(fn: HIRFunction): void {
       CompilerError.invariant(phi.operands.size === 1, {
         reason: `Found a block with a single predecessor but where a phi has multiple (${phi.operands.size}) operands`,
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
         suggestions: null,
       });
       const operand = Array.from(phi.operands.values())[0]!;

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

@@ -119,13 +119,7 @@ function parseAliasingSignatureConfig(
     CompilerError.invariant(!lifetimes.has(temp), {
       reason: `Invalid type configuration for module`,
       description: `Expected aliasing signature to have unique names for receiver, params, rest, returns, and temporaries in module '${moduleName}'`,
-      details: [
-        {
-          kind: 'error',
-          loc,
-          message: null,
-        },
-      ],
+      loc,
     });
     const place = signatureArgument(lifetimes.size);
     lifetimes.set(temp, place);
@@ -136,13 +130,7 @@ function parseAliasingSignatureConfig(
     CompilerError.invariant(place != null, {
       reason: `Invalid type configuration for module`,
       description: `Expected aliasing signature effects to reference known names from receiver/params/rest/returns/temporaries, but '${temp}' is not a known name in '${moduleName}'`,
-      details: [
-        {
-          kind: 'error',
-          loc,
-          message: null,
-        },
-      ],
+      loc,
     });
     return place;
   }
@@ -277,13 +265,7 @@ function addShape(
   CompilerError.invariant(!registry.has(id), {
     reason: `[ObjectShape] Could not add shape to registry: name ${id} already exists.`,
     description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
+    loc: null,
     suggestions: null,
   });
   registry.set(id, shape);
@@ -350,7 +332,6 @@ export type FunctionSignature = {
   mutableOnlyIfOperandsAreMutable?: boolean;
 
   impure?: boolean;
-  knownIncompatible?: string | null | undefined;
 
   canonicalName?: string;
 

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

@@ -56,9 +56,6 @@ export function printFunction(fn: HIRFunction): string {
   } else {
     definition += '<<anonymous>>';
   }
-  if (fn.nameHint != null) {
-    definition += ` ${fn.nameHint}`;
-  }
   if (fn.params.length !== 0) {
     definition +=
       '(' +
@@ -599,13 +596,7 @@ export function printInstructionValue(instrValue: ReactiveValue): string {
         {
           reason: 'Bad assumption about quasi length.',
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: instrValue.loc,
-              message: null,
-            },
-          ],
+          loc: instrValue.loc,
           suggestions: null,
         },
       );
@@ -874,15 +865,8 @@ export function printManualMemoDependency(
   } else {
     CompilerError.invariant(val.root.value.identifier.name?.kind === 'named', {
       reason: 'DepsValidation: expected named local variable in depslist',
-      description: null,
       suggestions: null,
-      details: [
-        {
-          kind: 'error',
-          loc: val.root.value.loc,
-          message: null,
-        },
-      ],
+      loc: val.root.value.loc,
     });
     rootStr = nameOnly
       ? val.root.value.identifier.name.value
@@ -896,8 +880,7 @@ export function printType(type: Type): string {
   if (type.kind === 'Object' && type.shapeId != null) {
     return `:T${type.kind}<${type.shapeId}>`;
   } else if (type.kind === 'Function' && type.shapeId != null) {
-    const returnType = printType(type.return);
-    return `:T${type.kind}<${type.shapeId}>()${returnType !== '' ? `:  ${returnType}` : ''}`;
+    return `:T${type.kind}<${type.shapeId}>`;
   } else {
     return `:T${type.kind}`;
   }
@@ -1000,7 +983,7 @@ export function printAliasingEffect(effect: AliasingEffect): string {
     case 'MutateConditionally':
     case 'MutateTransitive':
     case 'MutateTransitiveConditionally': {
-      return `${effect.kind} ${printPlaceForAliasEffect(effect.value)}${effect.kind === 'Mutate' && effect.reason?.kind === 'AssignCurrentProperty' ? ' (assign `.current`)' : ''}`;
+      return `${effect.kind} ${printPlaceForAliasEffect(effect.value)}`;
     }
     case 'MutateFrozen': {
       return `MutateFrozen ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;

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

@@ -86,14 +86,7 @@ export function propagateScopeDependenciesHIR(fn: HIRFunction): void {
     const hoistables = hoistablePropertyLoads.get(scope.id);
     CompilerError.invariant(hoistables != null, {
       reason: '[PropagateScopeDependencies] Scope not found in tracked blocks',
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: GeneratedSource,
-          message: null,
-        },
-      ],
+      loc: GeneratedSource,
     });
     /**
      * Step 2: Calculate hoistable dependencies.
@@ -435,14 +428,7 @@ export class DependencyCollectionContext {
     const scopedDependencies = this.#dependencies.value;
     CompilerError.invariant(scopedDependencies != null, {
       reason: '[PropagateScopeDeps]: Unexpected scope mismatch',
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: scope.loc,
-          message: null,
-        },
-      ],
+      loc: scope.loc,
     });
 
     // Restore context of previous scope

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

@@ -53,14 +53,7 @@ export function pruneUnusedLabelsHIR(fn: HIRFunction): void {
       next.phis.size === 0 && fallthrough.phis.size === 0,
       {
         reason: 'Unexpected phis when merging label blocks',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: label.terminal.loc,
-            message: null,
-          },
-        ],
+        loc: label.terminal.loc,
       },
     );
 
@@ -71,14 +64,7 @@ export function pruneUnusedLabelsHIR(fn: HIRFunction): void {
         fallthrough.preds.has(nextId),
       {
         reason: 'Unexpected block predecessors when merging label blocks',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: label.terminal.loc,
-            message: null,
-          },
-        ],
+        loc: label.terminal.loc,
       },
     );
 

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

@@ -202,14 +202,8 @@ function writeOptionalDependency(
     CompilerError.invariant(firstOptional !== -1, {
       reason:
         '[ScopeDependencyUtils] Internal invariant broken: expected optional path',
+      loc: dep.identifier.loc,
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: dep.identifier.loc,
-          message: null,
-        },
-      ],
       suggestions: null,
     });
     if (firstOptional === dep.path.length - 1) {
@@ -245,13 +239,7 @@ function writeOptionalDependency(
     CompilerError.invariant(testIdentifier !== null, {
       reason: 'Satisfy type checker',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
 

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

@@ -251,7 +251,6 @@ export type FunctionTypeConfig = {
   impure?: boolean | null | undefined;
   canonicalName?: string | null | undefined;
   aliasing?: AliasingSignatureConfig | null | undefined;
-  knownIncompatible?: string | null | undefined;
 };
 export const FunctionTypeSchema: z.ZodType<FunctionTypeConfig> = z.object({
   kind: z.literal('function'),
@@ -265,7 +264,6 @@ export const FunctionTypeSchema: z.ZodType<FunctionTypeConfig> = z.object({
   impure: z.boolean().nullable().optional(),
   canonicalName: z.string().nullable().optional(),
   aliasing: AliasingSignatureSchema.nullable().optional(),
-  knownIncompatible: z.string().nullable().optional(),
 });
 
 export type HookTypeConfig = {
@@ -276,7 +274,6 @@ export type HookTypeConfig = {
   returnValueKind?: ValueKind | null | undefined;
   noAlias?: boolean | null | undefined;
   aliasing?: AliasingSignatureConfig | null | undefined;
-  knownIncompatible?: string | null | undefined;
 };
 export const HookTypeSchema: z.ZodType<HookTypeConfig> = z.object({
   kind: z.literal('hook'),
@@ -286,7 +283,6 @@ export const HookTypeSchema: z.ZodType<HookTypeConfig> = z.object({
   returnValueKind: ValueKindSchema.nullable().optional(),
   noAlias: z.boolean().nullable().optional(),
   aliasing: AliasingSignatureSchema.nullable().optional(),
-  knownIncompatible: z.string().nullable().optional(),
 });
 
 export type BuiltInTypeConfig =

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

@@ -87,13 +87,7 @@ export function makeTypeId(id: number): TypeId {
   CompilerError.invariant(id >= 0 && Number.isInteger(id), {
     reason: 'Expected instruction id to be a non-negative integer',
     description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
+    loc: null,
     suggestions: null,
   });
   return id as TypeId;

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

@@ -1233,14 +1233,7 @@ export class ScopeBlockTraversal {
       CompilerError.invariant(blockInfo.scope.id === top, {
         reason:
           'Expected traversed block fallthrough to match top-most active scope',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: block.instructions[0]?.loc ?? block.terminal.id,
-            message: null,
-          },
-        ],
+        loc: block.instructions[0]?.loc ?? block.terminal.id,
       });
       this.#activeScopes.pop();
     }
@@ -1254,14 +1247,7 @@ export class ScopeBlockTraversal {
           !this.blockInfos.has(block.terminal.fallthrough),
         {
           reason: 'Expected unique scope blocks and fallthroughs',
-          description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: block.terminal.loc,
-              message: null,
-            },
-          ],
+          loc: block.terminal.loc,
         },
       );
       this.blockInfos.set(block.terminal.block, {

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

@@ -78,14 +78,7 @@ function lowerWithMutationAliasing(fn: HIRFunction): void {
       case 'Apply': {
         CompilerError.invariant(false, {
           reason: `[AnalyzeFunctions] Expected Apply effects to be replaced with more precise effects`,
-          description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: effect.function.loc,
-              message: null,
-            },
-          ],
+          loc: effect.function.loc,
         });
       }
       case 'Mutate':

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

@@ -5,7 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerDiagnostic, CompilerError, SourceLocation} from '..';
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  ErrorSeverity,
+  SourceLocation,
+} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {
   CallExpression,
@@ -297,10 +302,11 @@ function extractManualMemoizationArgs(
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
         category: ErrorCategory.UseMemo,
+        severity: ErrorSeverity.InvalidReact,
         reason: `Expected a callback function to be passed to ${kind}`,
         description: `Expected a callback function to be passed to ${kind}`,
         suggestions: null,
-      }).withDetails({
+      }).withDetail({
         kind: 'error',
         loc: instr.value.loc,
         message: `Expected a callback function to be passed to ${kind}`,
@@ -312,10 +318,11 @@ function extractManualMemoizationArgs(
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
         category: ErrorCategory.UseMemo,
+        severity: ErrorSeverity.InvalidReact,
         reason: `Unexpected spread argument to ${kind}`,
         description: `Unexpected spread argument to ${kind}`,
         suggestions: null,
-      }).withDetails({
+      }).withDetail({
         kind: 'error',
         loc: instr.value.loc,
         message: `Unexpected spread argument to ${kind}`,
@@ -332,10 +339,11 @@ function extractManualMemoizationArgs(
       errors.pushDiagnostic(
         CompilerDiagnostic.create({
           category: ErrorCategory.UseMemo,
+          severity: ErrorSeverity.InvalidReact,
           reason: `Expected the dependency list for ${kind} to be an array literal`,
           description: `Expected the dependency list for ${kind} to be an array literal`,
           suggestions: null,
-        }).withDetails({
+        }).withDetail({
           kind: 'error',
           loc: depsListPlace.loc,
           message: `Expected the dependency list for ${kind} to be an array literal`,
@@ -350,10 +358,11 @@ function extractManualMemoizationArgs(
         errors.pushDiagnostic(
           CompilerDiagnostic.create({
             category: ErrorCategory.UseMemo,
+            severity: ErrorSeverity.InvalidReact,
             reason: `Expected the dependency list to be an array of simple expressions (e.g. \`x\`, \`x.y.z\`, \`x?.y?.z\`)`,
             description: `Expected the dependency list to be an array of simple expressions (e.g. \`x\`, \`x.y.z\`, \`x?.y?.z\`)`,
             suggestions: null,
-          }).withDetails({
+          }).withDetail({
             kind: 'error',
             loc: dep.loc,
             message: `Expected the dependency list to be an array of simple expressions (e.g. \`x\`, \`x.y.z\`, \`x?.y?.z\`)`,
@@ -454,15 +463,16 @@ export function dropManualMemoization(
               if (!hasNonVoidReturn(funcToCheck.loweredFunc.func)) {
                 errors.pushDiagnostic(
                   CompilerDiagnostic.create({
+                    severity: ErrorSeverity.InvalidReact,
                     category: ErrorCategory.UseMemo,
                     reason: 'useMemo() callbacks must return a value',
                     description: `This ${
                       manualMemo.loadInstr.value.kind === 'PropertyLoad'
                         ? 'React.useMemo'
                         : 'useMemo'
-                    } callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects`,
+                    } callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects.`,
                     suggestions: null,
-                  }).withDetails({
+                  }).withDetail({
                     kind: 'error',
                     loc: instr.value.loc,
                     message: 'useMemo() callbacks must return a value',
@@ -495,10 +505,11 @@ export function dropManualMemoization(
               errors.pushDiagnostic(
                 CompilerDiagnostic.create({
                   category: ErrorCategory.UseMemo,
+                  severity: ErrorSeverity.InvalidReact,
                   reason: `Expected the first argument to be an inline function expression`,
                   description: `Expected the first argument to be an inline function expression`,
                   suggestions: [],
-                }).withDetails({
+                }).withDetail({
                   kind: 'error',
                   loc: fnPlace.loc,
                   message: `Expected the first argument to be an inline function expression`,
@@ -613,14 +624,7 @@ function findOptionalPlaces(fn: HIRFunction): Set<IdentifierId> {
           default: {
             CompilerError.invariant(false, {
               reason: `Unexpected terminal in optional`,
-              description: null,
-              details: [
-                {
-                  kind: 'error',
-                  loc: terminal.loc,
-                  message: `Unexpected ${terminal.kind} in optional`,
-                },
-              ],
+              loc: terminal.loc,
             });
           }
         }

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

@@ -438,14 +438,7 @@ function rewriteSplices(
         {
           reason:
             '[InferEffectDependencies] Internal invariant broken: expected block instructions to be sorted',
-          description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: originalInstrs[cursor].loc,
-              message: null,
-            },
-          ],
+          loc: originalInstrs[cursor].loc,
         },
       );
       currBlock.instructions.push(originalInstrs[cursor]);
@@ -454,14 +447,7 @@ function rewriteSplices(
     CompilerError.invariant(originalInstrs[cursor].id === rewrite.location, {
       reason:
         '[InferEffectDependencies] Internal invariant broken: splice location not found',
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: originalInstrs[cursor].loc,
-          message: null,
-        },
-      ],
+      loc: originalInstrs[cursor].loc,
     });
 
     if (rewrite.kind === 'instr') {
@@ -481,14 +467,7 @@ function rewriteSplices(
           {
             reason:
               '[InferEffectDependencies] Internal invariant broken: expected entry block to have a fallthrough',
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: entryBlock.terminal.loc,
-                message: null,
-              },
-            ],
+            loc: entryBlock.terminal.loc,
           },
         );
         const originalTerminal = currBlock.terminal;
@@ -587,14 +566,7 @@ function inferMinimalDependencies(
   CompilerError.invariant(hoistableToFnEntry != null, {
     reason:
       '[InferEffectDependencies] Internal invariant broken: missing entry block',
-    description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: fnInstr.loc,
-        message: null,
-      },
-    ],
+    loc: fnInstr.loc,
   });
 
   const dependencies = inferDependencies(
@@ -650,14 +622,7 @@ function inferDependencies(
   CompilerError.invariant(resultUnfiltered != null, {
     reason:
       '[InferEffectDependencies] Internal invariant broken: missing scope dependencies',
-    description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: fn.loc,
-        message: null,
-      },
-    ],
+    loc: fn.loc,
   });
 
   const fnContext = new Set(fn.context.map(dep => dep.identifier.id));

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

@@ -9,6 +9,7 @@ import {
   CompilerDiagnostic,
   CompilerError,
   Effect,
+  ErrorSeverity,
   SourceLocation,
   ValueKind,
 } from '..';
@@ -26,7 +27,6 @@ import {
   InstructionKind,
   InstructionValue,
   isArrayType,
-  isJsxType,
   isMapType,
   isPrimitiveType,
   isRefOrRefValue,
@@ -58,6 +58,7 @@ import {
   printInstruction,
   printInstructionValue,
   printPlace,
+  printSourceLocation,
 } from '../HIR/PrintHIR';
 import {FunctionSignature} from '../HIR/ObjectShape';
 import prettyFormat from 'pretty-format';
@@ -134,13 +135,7 @@ export function inferMutationAliasingEffects(
       reason:
         'Expected React component to have not more than two parameters: one for props and for ref',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: fn.loc,
-          message: null,
-        },
-      ],
+      loc: fn.loc,
       suggestions: null,
     });
     const [props, ref] = fn.params;
@@ -207,13 +202,7 @@ export function inferMutationAliasingEffects(
       CompilerError.invariant(false, {
         reason: `[InferMutationAliasingEffects] Potential infinite loop`,
         description: `A value, temporary place, or effect was not cached properly`,
-        details: [
-          {
-            kind: 'error',
-            loc: fn.loc,
-            message: null,
-          },
-        ],
+        loc: fn.loc,
       });
     }
     for (const [blockId, block] of fn.body.blocks) {
@@ -368,14 +357,7 @@ function inferBlock(
       CompilerError.invariant(state.kind(handlerParam) != null, {
         reason:
           'Expected catch binding to be intialized with a DeclareLocal Catch instruction',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: terminal.loc,
-            message: null,
-          },
-        ],
+        loc: terminal.loc,
       });
       const effects: Array<AliasingEffect> = [];
       for (const instr of block.instructions) {
@@ -472,9 +454,10 @@ function applySignature(
                 : 'value';
             const diagnostic = CompilerDiagnostic.create({
               category: ErrorCategory.Immutability,
+              severity: ErrorSeverity.InvalidReact,
               reason: 'This value cannot be modified',
-              description: reason,
-            }).withDetails({
+              description: `${reason}.`,
+            }).withDetail({
               kind: 'error',
               loc: effect.value.loc,
               message: `${variable} cannot be modified`,
@@ -483,7 +466,7 @@ function applySignature(
               effect.kind === 'Mutate' &&
               effect.reason?.kind === 'AssignCurrentProperty'
             ) {
-              diagnostic.withDetails({
+              diagnostic.withDetail({
                 kind: 'hint',
                 message: `Hint: If this value is a Ref (value returned by \`useRef()\`), rename the variable to end in "Ref".`,
               });
@@ -525,14 +508,7 @@ function applySignature(
   ) {
     CompilerError.invariant(false, {
       reason: `Expected instruction lvalue to be initialized`,
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: instruction.loc,
-          message: null,
-        },
-      ],
+      loc: instruction.loc,
     });
   }
   return effects.length !== 0 ? effects : null;
@@ -561,13 +537,7 @@ function applyEffect(
       CompilerError.invariant(!initialized.has(effect.into.identifier.id), {
         reason: `Cannot re-initialize variable within an instruction`,
         description: `Re-initialized ${printPlace(effect.into)} in ${printAliasingEffect(effect)}`,
-        details: [
-          {
-            kind: 'error',
-            loc: effect.into.loc,
-            message: null,
-          },
-        ],
+        loc: effect.into.loc,
       });
       initialized.add(effect.into.identifier.id);
 
@@ -606,13 +576,7 @@ function applyEffect(
       CompilerError.invariant(!initialized.has(effect.into.identifier.id), {
         reason: `Cannot re-initialize variable within an instruction`,
         description: `Re-initialized ${printPlace(effect.into)} in ${printAliasingEffect(effect)}`,
-        details: [
-          {
-            kind: 'error',
-            loc: effect.into.loc,
-            message: null,
-          },
-        ],
+        loc: effect.into.loc,
       });
       initialized.add(effect.into.identifier.id);
 
@@ -672,13 +636,7 @@ function applyEffect(
       CompilerError.invariant(!initialized.has(effect.into.identifier.id), {
         reason: `Cannot re-initialize variable within an instruction`,
         description: `Re-initialized ${printPlace(effect.into)} in ${printAliasingEffect(effect)}`,
-        details: [
-          {
-            kind: 'error',
-            loc: effect.into.loc,
-            message: null,
-          },
-        ],
+        loc: effect.into.loc,
       });
       initialized.add(effect.into.identifier.id);
 
@@ -752,13 +710,7 @@ function applyEffect(
         {
           reason: `Expected destination value to already be initialized within this instruction for Alias effect`,
           description: `Destination ${printPlace(effect.into)} is not initialized in this instruction`,
-          details: [
-            {
-              kind: 'error',
-              loc: effect.into.loc,
-              message: null,
-            },
-          ],
+          loc: effect.into.loc,
         },
       );
       /*
@@ -817,13 +769,7 @@ function applyEffect(
       CompilerError.invariant(!initialized.has(effect.into.identifier.id), {
         reason: `Cannot re-initialize variable within an instruction`,
         description: `Re-initialized ${printPlace(effect.into)} in ${printAliasingEffect(effect)}`,
-        details: [
-          {
-            kind: 'error',
-            loc: effect.into.loc,
-            message: null,
-          },
-        ],
+        loc: effect.into.loc,
       });
       initialized.add(effect.into.identifier.id);
 
@@ -1093,17 +1039,18 @@ function applyEffect(
           );
           const diagnostic = CompilerDiagnostic.create({
             category: ErrorCategory.Immutability,
+            severity: ErrorSeverity.InvalidReact,
             reason: 'Cannot access variable before it is declared',
-            description: `${variable ?? 'This variable'} 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.withDetails({
+            diagnostic.withDetail({
               kind: 'error',
               loc: hoistedAccess.loc,
               message: `${variable ?? 'variable'} accessed before it is declared`,
             });
           }
-          diagnostic.withDetails({
+          diagnostic.withDetail({
             kind: 'error',
             loc: effect.value.loc,
             message: `${variable ?? 'variable'} is declared here`,
@@ -1132,9 +1079,10 @@ function applyEffect(
               : 'value';
           const diagnostic = CompilerDiagnostic.create({
             category: ErrorCategory.Immutability,
+            severity: ErrorSeverity.InvalidReact,
             reason: 'This value cannot be modified',
-            description: reason,
-          }).withDetails({
+            description: `${reason}.`,
+          }).withDetail({
             kind: 'error',
             loc: effect.value.loc,
             message: `${variable} cannot be modified`,
@@ -1143,7 +1091,7 @@ function applyEffect(
             effect.kind === 'Mutate' &&
             effect.reason?.kind === 'AssignCurrentProperty'
           ) {
-            diagnostic.withDetails({
+            diagnostic.withDetail({
               kind: 'hint',
               message: `Hint: If this value is a Ref (value returned by \`useRef()\`), rename the variable to end in "Ref".`,
             });
@@ -1224,13 +1172,7 @@ class InferenceState {
       reason:
         '[InferMutationAliasingEffects] Expected all top-level identifiers to be defined as variables, not values',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: value.loc,
-          message: null,
-        },
-      ],
+      loc: value.loc,
       suggestions: null,
     });
     this.#values.set(value, kind);
@@ -1241,13 +1183,7 @@ class InferenceState {
     CompilerError.invariant(values != null, {
       reason: `[InferMutationAliasingEffects] Expected value kind to be initialized`,
       description: `${printPlace(place)}`,
-      details: [
-        {
-          kind: 'error',
-          loc: place.loc,
-          message: 'this is uninitialized',
-        },
-      ],
+      loc: place.loc,
       suggestions: null,
     });
     return Array.from(values);
@@ -1259,13 +1195,7 @@ class InferenceState {
     CompilerError.invariant(values != null, {
       reason: `[InferMutationAliasingEffects] Expected value kind to be initialized`,
       description: `${printPlace(place)}`,
-      details: [
-        {
-          kind: 'error',
-          loc: place.loc,
-          message: 'this is uninitialized',
-        },
-      ],
+      loc: place.loc,
       suggestions: null,
     });
     let mergedKind: AbstractValue | null = null;
@@ -1277,13 +1207,7 @@ class InferenceState {
     CompilerError.invariant(mergedKind !== null, {
       reason: `[InferMutationAliasingEffects] Expected at least one value`,
       description: `No value found at \`${printPlace(place)}\``,
-      details: [
-        {
-          kind: 'error',
-          loc: place.loc,
-          message: null,
-        },
-      ],
+      loc: place.loc,
       suggestions: null,
     });
     return mergedKind;
@@ -1295,13 +1219,7 @@ class InferenceState {
     CompilerError.invariant(values != null, {
       reason: `[InferMutationAliasingEffects] Expected value for identifier to be initialized`,
       description: `${printIdentifier(value.identifier)}`,
-      details: [
-        {
-          kind: 'error',
-          loc: value.loc,
-          message: 'Expected value for identifier to be initialized',
-        },
-      ],
+      loc: value.loc,
       suggestions: null,
     });
     this.#variables.set(place.identifier.id, new Set(values));
@@ -1312,13 +1230,7 @@ class InferenceState {
     CompilerError.invariant(values != null, {
       reason: `[InferMutationAliasingEffects] Expected value for identifier to be initialized`,
       description: `${printIdentifier(value.identifier)}`,
-      details: [
-        {
-          kind: 'error',
-          loc: value.loc,
-          message: 'Expected value for identifier to be initialized',
-        },
-      ],
+      loc: value.loc,
       suggestions: null,
     });
     const prevValues = this.values(place);
@@ -1331,15 +1243,11 @@ class InferenceState {
   // Defines (initializing or updating) a variable with a specific kind of value.
   define(place: Place, value: InstructionValue): void {
     CompilerError.invariant(this.#values.has(value), {
-      reason: `[InferMutationAliasingEffects] Expected value to be initialized`,
+      reason: `[InferMutationAliasingEffects] Expected value to be initialized at '${printSourceLocation(
+        value.loc,
+      )}'`,
       description: printInstructionValue(value),
-      details: [
-        {
-          kind: 'error',
-          loc: value.loc,
-          message: 'Expected value for identifier to be initialized',
-        },
-      ],
+      loc: value.loc,
       suggestions: null,
     });
     this.#variables.set(place.identifier.id, new Set([value]));
@@ -1963,23 +1871,6 @@ function computeSignatureForInstruction(
             });
           }
         }
-        for (const prop of value.props) {
-          if (
-            prop.kind === 'JsxAttribute' &&
-            prop.place.identifier.type.kind === 'Function' &&
-            (isJsxType(prop.place.identifier.type.return) ||
-              (prop.place.identifier.type.return.kind === 'Phi' &&
-                prop.place.identifier.type.return.operands.some(operand =>
-                  isJsxType(operand),
-                )))
-          ) {
-            // Any props which return jsx are assumed to be called during render
-            effects.push({
-              kind: 'Render',
-              place: prop.place,
-            });
-          }
-        }
       }
       break;
     }
@@ -2147,10 +2038,11 @@ function computeSignatureForInstruction(
         place: value.value,
         error: CompilerDiagnostic.create({
           category: ErrorCategory.Globals,
+          severity: ErrorSeverity.InvalidReact,
           reason:
             'Cannot reassign variables declared outside of the component/hook',
           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)`,
-        }).withDetails({
+        }).withDetail({
           kind: 'error',
           loc: instr.loc,
           message: `${variable} cannot be reassigned`,
@@ -2179,7 +2071,7 @@ function computeSignatureForInstruction(
           effects.push({
             kind: 'Freeze',
             value: operand,
-            reason: ValueReason.HookCaptured,
+            reason: ValueReason.Other,
           });
         }
       }
@@ -2246,39 +2138,20 @@ function computeEffectsForLegacySignature(
       place: receiver,
       error: CompilerDiagnostic.create({
         category: ErrorCategory.Purity,
+        severity: ErrorSeverity.InvalidReact,
         reason: 'Cannot call impure function during render',
         description:
           (signature.canonicalName != null
             ? `\`${signature.canonicalName}\` is an impure function. `
             : '') +
           'Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)',
-      }).withDetails({
+      }).withDetail({
         kind: 'error',
         loc,
         message: 'Cannot call impure function',
       }),
     });
   }
-  if (signature.knownIncompatible != null && state.env.isInferredMemoEnabled) {
-    const errors = new CompilerError();
-    errors.pushDiagnostic(
-      CompilerDiagnostic.create({
-        category: ErrorCategory.IncompatibleLibrary,
-        reason: 'Use of incompatible library',
-        description: [
-          'This API returns functions which cannot be memoized without leading to stale UI. ' +
-            'To prevent this, by default React Compiler will skip memoizing this component/hook. ' +
-            'However, you may see issues if values from this API are passed to other components/hooks that are ' +
-            'memoized',
-        ].join(''),
-      }).withDetails({
-        kind: 'error',
-        loc: receiver.loc,
-        message: signature.knownIncompatible,
-      }),
-    );
-    throw errors;
-  }
   const stores: Array<Place> = [];
   const captures: Array<Place> = [];
   function visit(place: Place, effect: Effect): void {
@@ -2771,13 +2644,7 @@ export function isKnownMutableEffect(effect: Effect): boolean {
       CompilerError.invariant(false, {
         reason: 'Unexpected unknown effect',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: GeneratedSource,
-            message: null,
-          },
-        ],
+        loc: GeneratedSource,
         suggestions: null,
       });
     }
@@ -2886,13 +2753,7 @@ function mergeValueKinds(a: ValueKind, b: ValueKind): ValueKind {
       {
         reason: `Unexpected value kind in mergeValues()`,
         description: `Found kinds ${a} and ${b}`,
-        details: [
-          {
-            kind: 'error',
-            loc: GeneratedSource,
-            message: null,
-          },
-        ],
+        loc: GeneratedSource,
       },
     );
     return ValueKind.Primitive;

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

@@ -27,7 +27,7 @@ import {
 } from '../HIR/visitors';
 import {assertExhaustive, getOrInsertWith} from '../Utils/utils';
 import {Err, Ok, Result} from '../Utils/Result';
-import {AliasingEffect, MutationReason} from './AliasingEffects';
+import {AliasingEffect} from './AliasingEffects';
 
 /**
  * This pass builds an abstract model of the heap and interprets the effects of the
@@ -101,7 +101,6 @@ export function inferMutationAliasingRanges(
     transitive: boolean;
     kind: MutationKind;
     place: Place;
-    reason: MutationReason | null;
   }> = [];
   const renders: Array<{index: number; place: Place}> = [];
 
@@ -177,7 +176,6 @@ export function inferMutationAliasingRanges(
               effect.kind === 'MutateTransitive'
                 ? MutationKind.Definite
                 : MutationKind.Conditional,
-            reason: null,
             place: effect.value,
           });
         } else if (
@@ -192,7 +190,6 @@ export function inferMutationAliasingRanges(
               effect.kind === 'Mutate'
                 ? MutationKind.Definite
                 : MutationKind.Conditional,
-            reason: effect.kind === 'Mutate' ? (effect.reason ?? null) : null,
             place: effect.value,
           });
         } else if (
@@ -229,14 +226,7 @@ export function inferMutationAliasingRanges(
         } else {
           CompilerError.invariant(effect.kind === 'Freeze', {
             reason: `Unexpected '${effect.kind}' effect for MaybeThrow terminal`,
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: block.terminal.loc,
-                message: null,
-              },
-            ],
+            loc: block.terminal.loc,
           });
         }
       }
@@ -251,7 +241,6 @@ export function inferMutationAliasingRanges(
       mutation.transitive,
       mutation.kind,
       mutation.place.loc,
-      mutation.reason,
       errors,
     );
   }
@@ -278,7 +267,6 @@ export function inferMutationAliasingRanges(
         functionEffects.push({
           kind: 'Mutate',
           value: {...place, loc: node.local.loc},
-          reason: node.mutationReason,
         });
       }
     }
@@ -385,14 +373,7 @@ export function inferMutationAliasingRanges(
           case 'Apply': {
             CompilerError.invariant(false, {
               reason: `[AnalyzeFunctions] Expected Apply effects to be replaced with more precise effects`,
-              description: null,
-              details: [
-                {
-                  kind: 'error',
-                  loc: effect.function.loc,
-                  message: null,
-                },
-              ],
+              loc: effect.function.loc,
             });
           }
           case 'MutateTransitive':
@@ -526,7 +507,6 @@ export function inferMutationAliasingRanges(
       true,
       MutationKind.Conditional,
       into.loc,
-      null,
       ignoredErrors,
     );
     for (const from of tracked) {
@@ -539,14 +519,7 @@ export function inferMutationAliasingRanges(
       const fromNode = state.nodes.get(from.identifier);
       CompilerError.invariant(fromNode != null, {
         reason: `Expected a node to exist for all parameters and context variables`,
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: into.loc,
-            message: null,
-          },
-        ],
+        loc: into.loc,
       });
       if (fromNode.lastMutated === mutationIndex) {
         if (into.identifier.id === fn.returns.identifier.id) {
@@ -568,7 +541,7 @@ export function inferMutationAliasingRanges(
     }
   }
 
-  if (errors.hasAnyErrors() && !isFunctionExpression) {
+  if (errors.hasErrors() && !isFunctionExpression) {
     return Err(errors);
   }
   return Ok(functionEffects);
@@ -607,7 +580,6 @@ type Node = {
   transitive: {kind: MutationKind; loc: SourceLocation} | null;
   local: {kind: MutationKind; loc: SourceLocation} | null;
   lastMutated: number;
-  mutationReason: MutationReason | null;
   value:
     | {kind: 'Object'}
     | {kind: 'Phi'}
@@ -627,7 +599,6 @@ class AliasingState {
       transitive: null,
       local: null,
       lastMutated: 0,
-      mutationReason: null,
       value,
     });
   }
@@ -726,7 +697,6 @@ class AliasingState {
     transitive: boolean,
     startKind: MutationKind,
     loc: SourceLocation,
-    reason: MutationReason | null,
     errors: CompilerError,
   ): void {
     const seen = new Map<Identifier, MutationKind>();
@@ -747,7 +717,6 @@ class AliasingState {
       if (node == null) {
         continue;
       }
-      node.mutationReason ??= reason;
       node.lastMutated = Math.max(node.lastMutated, index);
       if (end != null) {
         node.id.mutableRange.end = makeInstructionId(

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

@@ -349,13 +349,7 @@ export function inferReactivePlaces(fn: HIRFunction): void {
                 CompilerError.invariant(false, {
                   reason: 'Unexpected unknown effect',
                   description: null,
-                  details: [
-                    {
-                      kind: 'error',
-                      loc: operand.loc,
-                      message: null,
-                    },
-                  ],
+                  loc: operand.loc,
                   suggestions: null,
                 });
               }

compiler/packages/babel-plugin-react-compiler/src/Optimization/ConstantPropagation.ts

@@ -191,14 +191,7 @@ function evaluatePhi(phi: Phi, constants: Constants): Constant | null {
       case 'Primitive': {
         CompilerError.invariant(value.kind === 'Primitive', {
           reason: 'value kind expected to be Primitive',
-          description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: null,
-              message: null,
-            },
-          ],
+          loc: null,
           suggestions: null,
         });
 
@@ -211,14 +204,7 @@ function evaluatePhi(phi: Phi, constants: Constants): Constant | null {
       case 'LoadGlobal': {
         CompilerError.invariant(value.kind === 'LoadGlobal', {
           reason: 'value kind expected to be LoadGlobal',
-          description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: null,
-              message: null,
-            },
-          ],
+          loc: null,
           suggestions: null,
         });
 

compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts

@@ -709,14 +709,7 @@ function createPropsProperties(
     const spreadProp = jsxSpreadAttributes[0];
     CompilerError.invariant(spreadProp.kind === 'JsxSpreadAttribute', {
       reason: 'Spread prop attribute must be of kind JSXSpreadAttribute',
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: instr.loc,
-          message: null,
-        },
-      ],
+      loc: instr.loc,
     });
     propsProperty = {
       kind: 'ObjectProperty',

compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts

@@ -78,17 +78,10 @@ export function instructionReordering(fn: HIRFunction): void {
   }
   CompilerError.invariant(shared.size === 0, {
     reason: `InstructionReordering: expected all reorderable nodes to have been emitted`,
-    description: null,
-    details: [
-      {
-        kind: 'error',
-        loc:
-          [...shared.values()]
-            .map(node => node.instruction?.loc)
-            .filter(loc => loc != null)[0] ?? GeneratedSource,
-        message: null,
-      },
-    ],
+    loc:
+      [...shared.values()]
+        .map(node => node.instruction?.loc)
+        .filter(loc => loc != null)[0] ?? GeneratedSource,
   });
   markInstructionIds(fn.body);
 }
@@ -309,13 +302,7 @@ function reorderBlock(
         node.reorderability === Reorderability.Reorderable,
         {
           reason: `Expected all remaining instructions to be reorderable`,
-          details: [
-            {
-              kind: 'error',
-              loc: node.instruction?.loc ?? block.terminal.loc,
-              message: null,
-            },
-          ],
+          loc: node.instruction?.loc ?? block.terminal.loc,
           description:
             node.instruction != null
               ? `Instruction [${node.instruction.id}] was not emitted yet but is not reorderable`

compiler/packages/babel-plugin-react-compiler/src/Optimization/LowerContextAccess.ts

@@ -249,7 +249,6 @@ function emitSelectorFn(env: Environment, keys: Array<string>): Instruction {
   const fn: HIRFunction = {
     loc: GeneratedSource,
     id: null,
-    nameHint: null,
     fnType: 'Other',
     env,
     params: [obj],
@@ -276,7 +275,6 @@ function emitSelectorFn(env: Environment, keys: Array<string>): Instruction {
     value: {
       kind: 'FunctionExpression',
       name: null,
-      nameHint: null,
       loweredFunc: {
         func: fn,
       },

compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineFunctions.ts

@@ -31,9 +31,7 @@ export function outlineFunctions(
       ) {
         const loweredFunc = value.loweredFunc.func;
 
-        const id = fn.env.generateGloballyUniqueIdentifierName(
-          loweredFunc.id ?? loweredFunc.nameHint,
-        );
+        const id = fn.env.generateGloballyUniqueIdentifierName(loweredFunc.id);
         loweredFunc.id = id.value;
 
         fn.env.outlineFunction(loweredFunc, null);

compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineJsx.ts

@@ -364,7 +364,6 @@ function emitOutlinedFn(
   const fn: HIRFunction = {
     loc: GeneratedSource,
     id: null,
-    nameHint: null,
     fnType: 'Other',
     env,
     params: [propsObj],

compiler/packages/babel-plugin-react-compiler/src/Optimization/PruneMaybeThrows.ts

@@ -52,13 +52,7 @@ export function pruneMaybeThrows(fn: HIRFunction): void {
             const mappedTerminal = terminalMapping.get(predecessor);
             CompilerError.invariant(mappedTerminal != null, {
               reason: `Expected non-existing phi operand's predecessor to have been mapped to a new terminal`,
-              details: [
-                {
-                  kind: 'error',
-                  loc: GeneratedSource,
-                  message: null,
-                },
-              ],
+              loc: GeneratedSource,
               description: `Could not find mapping for predecessor bb${predecessor} in block bb${
                 block.id
               } for phi ${printPlace(phi.place)}`,

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AlignObjectMethodScopes.ts

@@ -41,15 +41,8 @@ function findScopesToMerge(fn: HIRFunction): DisjointSet<ReactiveScope> {
               {
                 reason:
                   'Internal error: Expected all ObjectExpressions and ObjectMethods to have non-null scope.',
-                description: null,
                 suggestions: null,
-                details: [
-                  {
-                    kind: 'error',
-                    loc: GeneratedSource,
-                    message: null,
-                  },
-                ],
+                loc: GeneratedSource,
               },
             );
             mergeScopesBuilder.union([operandScope, lvalueScope]);

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AlignReactiveScopesToBlockScopesHIR.ts

@@ -170,53 +170,11 @@ export function alignReactiveScopesToBlockScopesHIR(fn: HIRFunction): void {
 
       CompilerError.invariant(!valueBlockNodes.has(fallthrough), {
         reason: 'Expect hir blocks to have unique fallthroughs',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: terminal.loc,
-            message: null,
-          },
-        ],
+        loc: terminal.loc,
       });
       if (node != null) {
         valueBlockNodes.set(fallthrough, node);
       }
-    } else if (terminal.kind === 'goto') {
-      /**
-       * If we encounter a goto that is not to the natural fallthrough of the current
-       * block (not the topmost fallthrough on the stack), then this is a goto to a
-       * label. Any scopes that extend beyond the goto must be extended to include
-       * the labeled range, so that the break statement doesn't accidentally jump
-       * out of the scope. We do this by extending the start and end of the scope's
-       * range to the label and its fallthrough respectively.
-       */
-      const start = activeBlockFallthroughRanges.find(
-        range => range.fallthrough === terminal.block,
-      );
-      if (start != null && start !== activeBlockFallthroughRanges.at(-1)) {
-        const fallthroughBlock = fn.body.blocks.get(start.fallthrough)!;
-        const firstId =
-          fallthroughBlock.instructions[0]?.id ?? fallthroughBlock.terminal.id;
-        for (const scope of activeScopes) {
-          /**
-           * activeScopes is only filtered at block start points, so some of the
-           * scopes may not actually be active anymore, ie we've past their end
-           * instruction. Only extend ranges for scopes that are actually active.
-           *
-           * TODO: consider pruning activeScopes per instruction
-           */
-          if (scope.range.end <= terminal.id) {
-            continue;
-          }
-          scope.range.start = makeInstructionId(
-            Math.min(start.range.start, scope.range.start),
-          );
-          scope.range.end = makeInstructionId(
-            Math.max(firstId, scope.range.end),
-          );
-        }
-      }
     }
 
     /*
@@ -259,14 +217,7 @@ export function alignReactiveScopesToBlockScopesHIR(fn: HIRFunction): void {
           // Transition from block->value block, derive the outer block range
           CompilerError.invariant(fallthrough !== null, {
             reason: `Expected a fallthrough for value block`,
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: terminal.loc,
-                message: null,
-              },
-            ],
+            loc: terminal.loc,
           });
           const fallthroughBlock = fn.body.blocks.get(fallthrough)!;
           const nextId =

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AssertScopeInstructionsWithinScope.ts

@@ -81,16 +81,10 @@ class CheckInstructionsAgainstScopesVisitor extends ReactiveFunctionVisitor<
       !this.activeScopes.has(scope.id)
     ) {
       CompilerError.invariant(false, {
+        description: `Instruction [${id}] is part of scope @${scope.id}, but that scope has already completed.`,
+        loc: place.loc,
         reason:
           'Encountered an instruction that should be part of a scope, but where that scope has already completed',
-        description: `Instruction [${id}] is part of scope @${scope.id}, but that scope has already completed`,
-        details: [
-          {
-            kind: 'error',
-            loc: place.loc,
-            message: null,
-          },
-        ],
         suggestions: null,
       });
     }

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AssertWellFormedBreakTargets.ts

@@ -28,14 +28,7 @@ class Visitor extends ReactiveFunctionVisitor<Set<BlockId>> {
     if (terminal.kind === 'break' || terminal.kind === 'continue') {
       CompilerError.invariant(seenLabels.has(terminal.target), {
         reason: 'Unexpected break to invalid label',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: stmt.terminal.loc,
-            message: null,
-          },
-        ],
+        loc: stmt.terminal.loc,
       });
     }
   }

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts

@@ -44,7 +44,6 @@ export function buildReactiveFunction(fn: HIRFunction): ReactiveFunction {
   return {
     loc: fn.loc,
     id: fn.id,
-    nameHint: fn.nameHint,
     params: fn.params,
     generator: fn.generator,
     async: fn.async,
@@ -71,13 +70,7 @@ class Driver {
     CompilerError.invariant(!this.cx.emitted.has(block.id), {
       reason: `Cannot emit the same block twice: bb${block.id}`,
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     this.cx.emitted.add(block.id);
@@ -137,14 +130,7 @@ class Driver {
         if (this.cx.isScheduled(terminal.consequent)) {
           CompilerError.invariant(false, {
             reason: `Unexpected 'if' where the consequent is already scheduled`,
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: terminal.loc,
-                message: null,
-              },
-            ],
+            loc: terminal.loc,
           });
         } else {
           consequent = this.traverseBlock(
@@ -157,14 +143,7 @@ class Driver {
           if (this.cx.isScheduled(alternateId)) {
             CompilerError.invariant(false, {
               reason: `Unexpected 'if' where the alternate is already scheduled`,
-              description: null,
-              details: [
-                {
-                  kind: 'error',
-                  loc: terminal.loc,
-                  message: null,
-                },
-              ],
+              loc: terminal.loc,
             });
           } else {
             alternate = this.traverseBlock(this.cx.ir.blocks.get(alternateId)!);
@@ -217,14 +196,7 @@ class Driver {
           if (this.cx.isScheduled(case_.block)) {
             CompilerError.invariant(case_.block === terminal.fallthrough, {
               reason: `Unexpected 'switch' where a case is already scheduled and block is not the fallthrough`,
-              description: null,
-              details: [
-                {
-                  kind: 'error',
-                  loc: terminal.loc,
-                  message: null,
-                },
-              ],
+              loc: terminal.loc,
             });
             return;
           } else {
@@ -283,14 +255,7 @@ class Driver {
         } else {
           CompilerError.invariant(false, {
             reason: `Unexpected 'do-while' where the loop is already scheduled`,
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: terminal.loc,
-                message: null,
-              },
-            ],
+            loc: terminal.loc,
           });
         }
 
@@ -351,14 +316,7 @@ class Driver {
         } else {
           CompilerError.invariant(false, {
             reason: `Unexpected 'while' where the loop is already scheduled`,
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: terminal.loc,
-                message: null,
-              },
-            ],
+            loc: terminal.loc,
           });
         }
 
@@ -444,14 +402,7 @@ class Driver {
         } else {
           CompilerError.invariant(false, {
             reason: `Unexpected 'for' where the loop is already scheduled`,
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: terminal.loc,
-                message: null,
-              },
-            ],
+            loc: terminal.loc,
           });
         }
 
@@ -549,14 +500,7 @@ class Driver {
         } else {
           CompilerError.invariant(false, {
             reason: `Unexpected 'for-of' where the loop is already scheduled`,
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: terminal.loc,
-                message: null,
-              },
-            ],
+            loc: terminal.loc,
           });
         }
 
@@ -628,14 +572,7 @@ class Driver {
         } else {
           CompilerError.invariant(false, {
             reason: `Unexpected 'for-in' where the loop is already scheduled`,
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: terminal.loc,
-                message: null,
-              },
-            ],
+            loc: terminal.loc,
           });
         }
 
@@ -678,14 +615,7 @@ class Driver {
         if (this.cx.isScheduled(terminal.alternate)) {
           CompilerError.invariant(false, {
             reason: `Unexpected 'branch' where the alternate is already scheduled`,
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: terminal.loc,
-                message: null,
-              },
-            ],
+            loc: terminal.loc,
           });
         } else {
           alternate = this.traverseBlock(
@@ -723,14 +653,7 @@ class Driver {
         if (this.cx.isScheduled(terminal.block)) {
           CompilerError.invariant(false, {
             reason: `Unexpected 'label' where the block is already scheduled`,
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: terminal.loc,
-                message: null,
-              },
-            ],
+            loc: terminal.loc,
           });
         } else {
           block = this.traverseBlock(this.cx.ir.blocks.get(terminal.block)!);
@@ -888,14 +811,7 @@ class Driver {
         if (this.cx.isScheduled(terminal.block)) {
           CompilerError.invariant(false, {
             reason: `Unexpected 'scope' where the block is already scheduled`,
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: terminal.loc,
-                message: null,
-              },
-            ],
+            loc: terminal.loc,
           });
         } else {
           block = this.traverseBlock(this.cx.ir.blocks.get(terminal.block)!);
@@ -921,13 +837,7 @@ class Driver {
         CompilerError.invariant(false, {
           reason: 'Unexpected unsupported terminal',
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: terminal.loc,
-              message: null,
-            },
-          ],
+          loc: terminal.loc,
           suggestions: null,
         });
       }
@@ -964,13 +874,7 @@ class Driver {
             reason:
               'Expected branch block to end in an instruction that sets the test value',
             description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: instr.lvalue.loc,
-                message: null,
-              },
-            ],
+            loc: instr.lvalue.loc,
             suggestions: null,
           },
         );
@@ -1002,13 +906,7 @@ class Driver {
         CompilerError.invariant(false, {
           reason: 'Expected goto value block to have at least one instruction',
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: null,
-              message: null,
-            },
-          ],
+          loc: null,
           suggestions: null,
         });
       } else if (defaultBlock.instructions.length === 1) {
@@ -1293,27 +1191,14 @@ class Driver {
       CompilerError.invariant(false, {
         reason: 'Expected a break target',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
         suggestions: null,
       });
     }
     if (this.cx.scopeFallthroughs.has(target.block)) {
       CompilerError.invariant(target.type === 'implicit', {
         reason: 'Expected reactive scope to implicitly break to fallthrough',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc,
-            message: null,
-          },
-        ],
+        loc,
       });
       return null;
     }
@@ -1339,13 +1224,7 @@ class Driver {
     CompilerError.invariant(target !== null, {
       reason: `Expected continue target to be scheduled for bb${block}`,
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
 
@@ -1420,13 +1299,7 @@ class Context {
     CompilerError.invariant(!this.#scheduled.has(block), {
       reason: `Break block is already scheduled: bb${block}`,
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     this.#scheduled.add(block);
@@ -1445,13 +1318,7 @@ class Context {
     CompilerError.invariant(!this.#scheduled.has(continueBlock), {
       reason: `Continue block is already scheduled: bb${continueBlock}`,
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     this.#scheduled.add(continueBlock);
@@ -1479,13 +1346,7 @@ class Context {
     CompilerError.invariant(last !== undefined && last.id === scheduleId, {
       reason: 'Can only unschedule the last target',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     if (last.type !== 'loop' || last.ownsBlock !== null) {
@@ -1560,13 +1421,7 @@ class Context {
     CompilerError.invariant(false, {
       reason: 'Expected a break target',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
   }

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts

@@ -13,7 +13,7 @@ import {
   pruneUnusedLabels,
   renameVariables,
 } from '.';
-import {CompilerError, ErrorCategory} from '../CompilerError';
+import {CompilerError, ErrorCategory, ErrorSeverity} from '../CompilerError';
 import {Environment, ExternalFunction} from '../HIR';
 import {
   ArrayPattern,
@@ -61,7 +61,6 @@ export const EARLY_RETURN_SENTINEL = 'react.early_return_sentinel';
 export type CodegenFunction = {
   type: 'CodegenFunction';
   id: t.Identifier | null;
-  nameHint: string | null;
   params: t.FunctionDeclaration['params'];
   body: t.BlockStatement;
   generator: boolean;
@@ -297,14 +296,7 @@ export function codegenFunction(
       CompilerError.invariant(globalGating != null, {
         reason:
           'Bad config not caught! Expected at least one of gating or globalGating',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
         suggestions: null,
       });
       ifTest = globalGating;
@@ -373,7 +365,7 @@ function codegenReactiveFunction(
     }
   }
 
-  if (cx.errors.hasAnyErrors()) {
+  if (cx.errors.hasErrors()) {
     return Err(cx.errors);
   }
 
@@ -384,7 +376,6 @@ function codegenReactiveFunction(
     type: 'CodegenFunction',
     loc: fn.loc,
     id: fn.id !== null ? t.identifier(fn.id) : null,
-    nameHint: fn.nameHint,
     params,
     body,
     generator: fn.generator,
@@ -508,16 +499,10 @@ function codegenBlock(cx: Context, block: ReactiveBlock): t.BlockStatement {
       continue;
     }
     CompilerError.invariant(temp.get(key)! === value, {
+      loc: null,
       reason: 'Expected temporary value to be unchanged',
       description: null,
       suggestions: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
     });
   }
   cx.temp = temp;
@@ -685,13 +670,7 @@ function codegenReactiveScope(
       description: `Declaration \`${printIdentifier(
         identifier,
       )}\` is unnamed in scope @${scope.id}`,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
 
@@ -728,13 +707,7 @@ function codegenReactiveScope(
     CompilerError.invariant(firstOutputIndex !== null, {
       reason: `Expected scope to have at least one declaration`,
       description: `Scope '@${scope.id}' has no declarations`,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     testCondition = t.binaryExpression(
@@ -757,13 +730,7 @@ function codegenReactiveScope(
       {
         reason: `Expected to not have both change detection enabled and memoization disabled`,
         description: `Incompatible config options`,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
       },
     );
     testCondition = t.logicalExpression(
@@ -947,14 +914,8 @@ function codegenReactiveScope(
         earlyReturnValue.value.name.kind === 'named',
       {
         reason: `Expected early return value to be promoted to a named variable`,
+        loc: earlyReturnValue.loc,
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: earlyReturnValue.loc,
-            message: null,
-          },
-        ],
         suggestions: null,
       },
     );
@@ -984,8 +945,7 @@ function codegenTerminal(
       if (terminal.targetKind === 'implicit') {
         return null;
       }
-      return createBreakStatement(
-        terminal.loc,
+      return t.breakStatement(
         terminal.targetKind === 'labeled'
           ? t.identifier(codegenLabel(terminal.target))
           : null,
@@ -995,16 +955,14 @@ function codegenTerminal(
       if (terminal.targetKind === 'implicit') {
         return null;
       }
-      return createContinueStatement(
-        terminal.loc,
+      return t.continueStatement(
         terminal.targetKind === 'labeled'
           ? t.identifier(codegenLabel(terminal.target))
           : null,
       );
     }
     case 'for': {
-      return createForStatement(
-        terminal.loc,
+      return t.forStatement(
         codegenForInit(cx, terminal.init),
         codegenInstructionValueToExpression(cx, terminal.test),
         terminal.update !== null
@@ -1017,13 +975,7 @@ function codegenTerminal(
       CompilerError.invariant(terminal.init.kind === 'SequenceExpression', {
         reason: `Expected a sequence expression init for for..in`,
         description: `Got \`${terminal.init.kind}\` expression instead`,
-        details: [
-          {
-            kind: 'error',
-            loc: terminal.init.loc,
-            message: null,
-          },
-        ],
+        loc: terminal.init.loc,
         suggestions: null,
       });
       if (terminal.init.instructions.length !== 2) {
@@ -1058,13 +1010,7 @@ function codegenTerminal(
           CompilerError.invariant(false, {
             reason: `Expected a StoreLocal or Destructure to be assigned to the collection`,
             description: `Found ${iterableItem.value.kind}`,
-            details: [
-              {
-                kind: 'error',
-                loc: iterableItem.value.loc,
-                message: null,
-              },
-            ],
+            loc: iterableItem.value.loc,
             suggestions: null,
           });
       }
@@ -1081,13 +1027,7 @@ function codegenTerminal(
             reason:
               'Destructure should never be Reassign as it would be an Object/ArrayPattern',
             description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: iterableItem.loc,
-                message: null,
-              },
-            ],
+            loc: iterableItem.loc,
             suggestions: null,
           });
         case InstructionKind.Catch:
@@ -1098,13 +1038,7 @@ function codegenTerminal(
           CompilerError.invariant(false, {
             reason: `Unexpected ${iterableItem.value.lvalue.kind} variable in for..in collection`,
             description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: iterableItem.loc,
-                message: null,
-              },
-            ],
+            loc: iterableItem.loc,
             suggestions: null,
           });
         default:
@@ -1113,8 +1047,7 @@ function codegenTerminal(
             `Unhandled lvalue kind: ${iterableItem.value.lvalue.kind}`,
           );
       }
-      return createForInStatement(
-        terminal.loc,
+      return t.forInStatement(
         /*
          * Special handling here since we only want the VariableDeclarators without any inits
          * This needs to be updated when we handle non-trivial ForOf inits
@@ -1134,13 +1067,7 @@ function codegenTerminal(
         {
           reason: `Expected a single-expression sequence expression init for for..of`,
           description: `Got \`${terminal.init.kind}\` expression instead`,
-          details: [
-            {
-              kind: 'error',
-              loc: terminal.init.loc,
-              message: null,
-            },
-          ],
+          loc: terminal.init.loc,
           suggestions: null,
         },
       );
@@ -1149,13 +1076,7 @@ function codegenTerminal(
       CompilerError.invariant(terminal.test.kind === 'SequenceExpression', {
         reason: `Expected a sequence expression test for for..of`,
         description: `Got \`${terminal.init.kind}\` expression instead`,
-        details: [
-          {
-            kind: 'error',
-            loc: terminal.test.loc,
-            message: null,
-          },
-        ],
+        loc: terminal.test.loc,
         suggestions: null,
       });
       if (terminal.test.instructions.length !== 2) {
@@ -1189,13 +1110,7 @@ function codegenTerminal(
           CompilerError.invariant(false, {
             reason: `Expected a StoreLocal or Destructure to be assigned to the collection`,
             description: `Found ${iterableItem.value.kind}`,
-            details: [
-              {
-                kind: 'error',
-                loc: iterableItem.value.loc,
-                message: null,
-              },
-            ],
+            loc: iterableItem.value.loc,
             suggestions: null,
           });
       }
@@ -1216,13 +1131,7 @@ function codegenTerminal(
           CompilerError.invariant(false, {
             reason: `Unexpected ${iterableItem.value.lvalue.kind} variable in for..of collection`,
             description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: iterableItem.loc,
-                message: null,
-              },
-            ],
+            loc: iterableItem.loc,
             suggestions: null,
           });
         default:
@@ -1231,8 +1140,7 @@ function codegenTerminal(
             `Unhandled lvalue kind: ${iterableItem.value.lvalue.kind}`,
           );
       }
-      return createForOfStatement(
-        terminal.loc,
+      return t.forOfStatement(
         /*
          * Special handling here since we only want the VariableDeclarators without any inits
          * This needs to be updated when we handle non-trivial ForOf inits
@@ -1254,7 +1162,7 @@ function codegenTerminal(
           alternate = block;
         }
       }
-      return createIfStatement(terminal.loc, test, consequent, alternate);
+      return t.ifStatement(test, consequent, alternate);
     }
     case 'return': {
       const value = codegenPlaceToExpression(cx, terminal.value);
@@ -1265,8 +1173,7 @@ function codegenTerminal(
       return t.returnStatement(value);
     }
     case 'switch': {
-      return createSwitchStatement(
-        terminal.loc,
+      return t.switchStatement(
         codegenPlaceToExpression(cx, terminal.test),
         terminal.cases.map(case_ => {
           const test =
@@ -1279,26 +1186,15 @@ function codegenTerminal(
       );
     }
     case 'throw': {
-      return createThrowStatement(
-        terminal.loc,
-        codegenPlaceToExpression(cx, terminal.value),
-      );
+      return t.throwStatement(codegenPlaceToExpression(cx, terminal.value));
     }
     case 'do-while': {
       const test = codegenInstructionValueToExpression(cx, terminal.test);
-      return createDoWhileStatement(
-        terminal.loc,
-        test,
-        codegenBlock(cx, terminal.loop),
-      );
+      return t.doWhileStatement(test, codegenBlock(cx, terminal.loop));
     }
     case 'while': {
       const test = codegenInstructionValueToExpression(cx, terminal.test);
-      return createWhileStatement(
-        terminal.loc,
-        test,
-        codegenBlock(cx, terminal.loop),
-      );
+      return t.whileStatement(test, codegenBlock(cx, terminal.loop));
     }
     case 'label': {
       return codegenBlock(cx, terminal.block);
@@ -1309,8 +1205,7 @@ function codegenTerminal(
         catchParam = convertIdentifier(terminal.handlerBinding.identifier);
         cx.temp.set(terminal.handlerBinding.identifier.declarationId, null);
       }
-      return createTryStatement(
-        terminal.loc,
+      return t.tryStatement(
         codegenBlock(cx, terminal.block),
         t.catchClause(catchParam, codegenBlock(cx, terminal.handler)),
       );
@@ -1377,13 +1272,7 @@ function codegenInstructionNullable(
           reason:
             'Encountered a destructuring operation where some identifiers are already declared (reassignments) but others are not (declarations)',
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: instr.loc,
-              message: null,
-            },
-          ],
+          loc: instr.loc,
           suggestions: null,
         });
       } else if (hasReassign) {
@@ -1396,13 +1285,7 @@ function codegenInstructionNullable(
         CompilerError.invariant(instr.lvalue === null, {
           reason: `Const declaration cannot be referenced as an expression`,
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: instr.value.loc,
-              message: `this is ${kind}`,
-            },
-          ],
+          loc: instr.value.loc,
           suggestions: null,
         });
         return createVariableDeclaration(instr.loc, 'const', [
@@ -1413,38 +1296,20 @@ function codegenInstructionNullable(
         CompilerError.invariant(instr.lvalue === null, {
           reason: `Function declaration cannot be referenced as an expression`,
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: instr.value.loc,
-              message: `this is ${kind}`,
-            },
-          ],
+          loc: instr.value.loc,
           suggestions: null,
         });
         const genLvalue = codegenLValue(cx, lvalue);
         CompilerError.invariant(genLvalue.type === 'Identifier', {
           reason: 'Expected an identifier as a function declaration lvalue',
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: instr.value.loc,
-              message: null,
-            },
-          ],
+          loc: instr.value.loc,
           suggestions: null,
         });
         CompilerError.invariant(value?.type === 'FunctionExpression', {
           reason: 'Expected a function as a function declaration value',
           description: `Got ${value == null ? String(value) : value.type} at ${printInstruction(instr)}`,
-          details: [
-            {
-              kind: 'error',
-              loc: instr.value.loc,
-              message: null,
-            },
-          ],
+          loc: instr.value.loc,
           suggestions: null,
         });
         return createFunctionDeclaration(
@@ -1460,13 +1325,7 @@ function codegenInstructionNullable(
         CompilerError.invariant(instr.lvalue === null, {
           reason: `Const declaration cannot be referenced as an expression`,
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: instr.value.loc,
-              message: 'this is const',
-            },
-          ],
+          loc: instr.value.loc,
           suggestions: null,
         });
         return createVariableDeclaration(instr.loc, 'let', [
@@ -1477,13 +1336,7 @@ function codegenInstructionNullable(
         CompilerError.invariant(value !== null, {
           reason: 'Expected a value for reassignment',
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: instr.value.loc,
-              message: null,
-            },
-          ],
+          loc: instr.value.loc,
           suggestions: null,
         });
         const expr = t.assignmentExpression(
@@ -1516,13 +1369,7 @@ function codegenInstructionNullable(
         CompilerError.invariant(false, {
           reason: `Expected ${kind} to have been pruned in PruneHoistedContexts`,
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: instr.loc,
-              message: null,
-            },
-          ],
+          loc: instr.loc,
           suggestions: null,
         });
       }
@@ -1540,14 +1387,7 @@ function codegenInstructionNullable(
   } else if (instr.value.kind === 'ObjectMethod') {
     CompilerError.invariant(instr.lvalue, {
       reason: 'Expected object methods to have a temp lvalue',
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     cx.objectMethods.set(instr.lvalue.identifier.id, instr.value);
@@ -1594,13 +1434,7 @@ function codegenForInit(
             (instr.kind === 'let' || instr.kind === 'const'),
           {
             reason: 'Expected a variable declaration',
-            details: [
-              {
-                kind: 'error',
-                loc: init.loc,
-                message: null,
-              },
-            ],
+            loc: init.loc,
             description: `Got ${instr.type}`,
             suggestions: null,
           },
@@ -1613,13 +1447,7 @@ function codegenForInit(
     });
     CompilerError.invariant(declarators.length > 0, {
       reason: 'Expected a variable declaration',
-      details: [
-        {
-          kind: 'error',
-          loc: init.loc,
-          message: null,
-        },
-      ],
+      loc: init.loc,
       description: null,
       suggestions: null,
     });
@@ -1715,13 +1543,7 @@ const createExpressionStatement = withLoc(t.expressionStatement);
 const _createLabelledStatement = withLoc(t.labeledStatement);
 const createVariableDeclaration = withLoc(t.variableDeclaration);
 const createFunctionDeclaration = withLoc(t.functionDeclaration);
-const createWhileStatement = withLoc(t.whileStatement);
-const createDoWhileStatement = withLoc(t.doWhileStatement);
-const createSwitchStatement = withLoc(t.switchStatement);
-const createIfStatement = withLoc(t.ifStatement);
-const createForStatement = withLoc(t.forStatement);
-const createForOfStatement = withLoc(t.forOfStatement);
-const createForInStatement = withLoc(t.forInStatement);
+const _createWhileStatement = withLoc(t.whileStatement);
 const createTaggedTemplateExpression = withLoc(t.taggedTemplateExpression);
 const createLogicalExpression = withLoc(t.logicalExpression);
 const createSequenceExpression = withLoc(t.sequenceExpression);
@@ -1736,10 +1558,6 @@ const createJsxText = withLoc(t.jsxText);
 const createJsxClosingElement = withLoc(t.jsxClosingElement);
 const createJsxOpeningElement = withLoc(t.jsxOpeningElement);
 const createStringLiteral = withLoc(t.stringLiteral);
-const createThrowStatement = withLoc(t.throwStatement);
-const createTryStatement = withLoc(t.tryStatement);
-const createBreakStatement = withLoc(t.breakStatement);
-const createContinueStatement = withLoc(t.continueStatement);
 
 function createHookGuard(
   guard: ExternalFunction,
@@ -1950,13 +1768,7 @@ function codegenInstructionValue(
           CompilerError.invariant(t.isExpression(optionalValue.callee), {
             reason: 'v8 intrinsics are validated during lowering',
             description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: optionalValue.callee.loc ?? null,
-                message: null,
-              },
-            ],
+            loc: optionalValue.callee.loc ?? null,
             suggestions: null,
           });
           value = t.optionalCallExpression(
@@ -1972,13 +1784,7 @@ function codegenInstructionValue(
           CompilerError.invariant(t.isExpression(property), {
             reason: 'Private names are validated during lowering',
             description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: property.loc ?? null,
-                message: null,
-              },
-            ],
+            loc: property.loc ?? null,
             suggestions: null,
           });
           value = t.optionalMemberExpression(
@@ -1994,13 +1800,7 @@ function codegenInstructionValue(
             reason:
               'Expected an optional value to resolve to a call expression or member expression',
             description: `Got a \`${optionalValue.type}\``,
-            details: [
-              {
-                kind: 'error',
-                loc: instrValue.loc,
-                message: null,
-              },
-            ],
+            loc: instrValue.loc,
             suggestions: null,
           });
         }
@@ -2016,15 +1816,10 @@ function codegenInstructionValue(
           t.isOptionalMemberExpression(memberExpr),
         {
           reason:
-            '[Codegen] Internal error: MethodCall::property must be an unpromoted + unmemoized MemberExpression',
+            '[Codegen] Internal error: MethodCall::property must be an unpromoted + unmemoized MemberExpression. ' +
+            `Got a \`${memberExpr.type}\``,
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: memberExpr.loc ?? null,
-              message: `Got: '${memberExpr.type}'`,
-            },
-          ],
+          loc: memberExpr.loc ?? null,
           suggestions: null,
         },
       );
@@ -2038,13 +1833,7 @@ function codegenInstructionValue(
             '[Codegen] Internal error: Forget should always generate MethodCall::property ' +
             'as a MemberExpression of MethodCall::receiver',
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: memberExpr.loc ?? null,
-              message: null,
-            },
-          ],
+          loc: memberExpr.loc ?? null,
           suggestions: null,
         },
       );
@@ -2089,14 +1878,7 @@ function codegenInstructionValue(
               const method = cx.objectMethods.get(property.place.identifier.id);
               CompilerError.invariant(method, {
                 reason: 'Expected ObjectMethod instruction',
-                description: null,
-                details: [
-                  {
-                    kind: 'error',
-                    loc: null,
-                    message: null,
-                  },
-                ],
+                loc: null,
                 suggestions: null,
               });
               const loweredFunc = method.loweredFunc;
@@ -2167,13 +1949,7 @@ function codegenInstructionValue(
         CompilerError.invariant(tagValue.type === 'StringLiteral', {
           reason: `Expected JSX tag to be an identifier or string, got \`${tagValue.type}\``,
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: tagValue.loc ?? null,
-              message: null,
-            },
-          ],
+          loc: tagValue.loc ?? null,
           suggestions: null,
         });
         if (tagValue.value.indexOf(':') >= 0) {
@@ -2193,13 +1969,7 @@ function codegenInstructionValue(
         SINGLE_CHILD_FBT_TAGS.has(tagValue.value)
       ) {
         CompilerError.invariant(instrValue.children != null, {
-          details: [
-            {
-              kind: 'error',
-              loc: instrValue.loc,
-              message: null,
-            },
-          ],
+          loc: instrValue.loc,
           reason: 'Expected fbt element to have children',
           suggestions: null,
           description: null,
@@ -2328,7 +2098,6 @@ function codegenInstructionValue(
         ),
         reactiveFunction,
       ).unwrap();
-
       if (instrValue.type === 'ArrowFunctionExpression') {
         let body: t.BlockStatement | t.Expression = fn.body;
         if (body.body.length === 1 && loweredFunc.directives.length == 0) {
@@ -2340,26 +2109,14 @@ function codegenInstructionValue(
         value = t.arrowFunctionExpression(fn.params, body, fn.async);
       } else {
         value = t.functionExpression(
-          instrValue.name != null ? t.identifier(instrValue.name) : null,
+          fn.id ??
+            (instrValue.name != null ? t.identifier(instrValue.name) : null),
           fn.params,
           fn.body,
           fn.generator,
           fn.async,
         );
       }
-      if (
-        cx.env.config.enableNameAnonymousFunctions &&
-        instrValue.name == null &&
-        instrValue.nameHint != null
-      ) {
-        const name = instrValue.nameHint;
-        value = t.memberExpression(
-          t.objectExpression([t.objectProperty(t.stringLiteral(name), value)]),
-          t.stringLiteral(name),
-          true,
-          false,
-        );
-      }
       break;
     }
     case 'TaggedTemplateExpression': {
@@ -2427,6 +2184,7 @@ function codegenInstructionValue(
               reason: `(CodegenReactiveFunction::codegenInstructionValue) Cannot declare variables in a value block, tried to declare '${
                 (declarator.id as t.Identifier).name
               }'`,
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               loc: declarator.loc ?? null,
               suggestions: null,
@@ -2435,6 +2193,7 @@ function codegenInstructionValue(
           } else {
             cx.errors.push({
               reason: `(CodegenReactiveFunction::codegenInstructionValue) Handle conversion of ${stmt.type} to expression`,
+              severity: ErrorSeverity.Todo,
               category: ErrorCategory.Todo,
               loc: stmt.loc ?? null,
               suggestions: null,
@@ -2514,13 +2273,7 @@ function codegenInstructionValue(
         {
           reason: `Unexpected StoreLocal in codegenInstructionValue`,
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: instrValue.loc,
-              message: null,
-            },
-          ],
+          loc: instrValue.loc,
           suggestions: null,
         },
       );
@@ -2550,13 +2303,7 @@ function codegenInstructionValue(
       CompilerError.invariant(false, {
         reason: `Unexpected ${instrValue.kind} in codegenInstructionValue`,
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: instrValue.loc,
-            message: null,
-          },
-        ],
+        loc: instrValue.loc,
         suggestions: null,
       });
     }
@@ -2567,9 +2314,6 @@ function codegenInstructionValue(
       );
     }
   }
-  if (instrValue.loc != null && instrValue.loc != GeneratedSource) {
-    value.loc = instrValue.loc;
-  }
   return value;
 }
 
@@ -2705,13 +2449,7 @@ function convertMemberExpressionToJsx(
   CompilerError.invariant(expr.property.type === 'Identifier', {
     reason: 'Expected JSX member expression property to be a string',
     description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: expr.loc ?? null,
-        message: null,
-      },
-    ],
+    loc: expr.loc ?? null,
     suggestions: null,
   });
   const property = t.jsxIdentifier(expr.property.name);
@@ -2722,13 +2460,7 @@ function convertMemberExpressionToJsx(
       reason:
         'Expected JSX member expression to be an identifier or nested member expression',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: expr.object.loc ?? null,
-          message: null,
-        },
-      ],
+      loc: expr.object.loc ?? null,
       suggestions: null,
     });
     const object = convertMemberExpressionToJsx(expr.object);
@@ -2752,13 +2484,7 @@ function codegenObjectPropertyKey(
       CompilerError.invariant(t.isExpression(expr), {
         reason: 'Expected object property key to be an expression',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: key.name.loc,
-            message: null,
-          },
-        ],
+        loc: key.name.loc,
         suggestions: null,
       });
       return expr;
@@ -2905,13 +2631,7 @@ function codegenPlace(cx: Context, place: Place): t.Expression | t.JSXText {
     description: `Value for '${printPlace(
       place,
     )}' was not set in the codegen context`,
-    details: [
-      {
-        kind: 'error',
-        loc: place.loc,
-        message: null,
-      },
-    ],
+    loc: place.loc,
     suggestions: null,
   });
   const identifier = convertIdentifier(place.identifier);
@@ -2924,13 +2644,7 @@ function convertIdentifier(identifier: Identifier): t.Identifier {
     identifier.name !== null && identifier.name.kind === 'named',
     {
       reason: `Expected temporaries to be promoted to named identifiers in an earlier pass`,
-      details: [
-        {
-          kind: 'error',
-          loc: GeneratedSource,
-          message: null,
-        },
-      ],
+      loc: GeneratedSource,
       description: `identifier ${identifier.id} is unnamed`,
       suggestions: null,
     },
@@ -2946,14 +2660,7 @@ function compareScopeDependency(
     a.identifier.name?.kind === 'named' && b.identifier.name?.kind === 'named',
     {
       reason: '[Codegen] Expected named identifier for dependency',
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: a.identifier.loc,
-          message: null,
-        },
-      ],
+      loc: a.identifier.loc,
     },
   );
   const aName = [
@@ -2977,14 +2684,7 @@ function compareScopeDeclaration(
     a.identifier.name?.kind === 'named' && b.identifier.name?.kind === 'named',
     {
       reason: '[Codegen] Expected named identifier for declaration',
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: a.identifier.loc,
-          message: null,
-        },
-      ],
+      loc: a.identifier.loc,
     },
   );
   const aName = a.identifier.name.value;

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/FlattenScopesWithHooksOrUseHIR.ts

@@ -75,13 +75,7 @@ export function flattenScopesWithHooksOrUseHIR(fn: HIRFunction): void {
     CompilerError.invariant(terminal.kind === 'scope', {
       reason: `Expected block to have a scope terminal`,
       description: `Expected block bb${block.id} to end in a scope terminal`,
-      details: [
-        {
-          kind: 'error',
-          loc: terminal.loc,
-          message: null,
-        },
-      ],
+      loc: terminal.loc,
     });
     const body = fn.body.blocks.get(terminal.block)!;
     if (

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts

@@ -162,13 +162,7 @@ export function inferReactiveScopeVariables(fn: HIRFunction): void {
       });
       CompilerError.invariant(false, {
         reason: `Invalid mutable range for scope`,
-        details: [
-          {
-            kind: 'error',
-            loc: GeneratedSource,
-            message: null,
-          },
-        ],
+        loc: GeneratedSource,
         description: `Scope @${scope.id} has range [${scope.range.start}:${
           scope.range.end
         }] but the valid range is [1:${maxInstruction + 1}]`,

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts

@@ -159,17 +159,11 @@ class Transform extends ReactiveFunctionTransform<ReactiveScopeDependencies | nu
     const merged: Array<MergedScope> = [];
     function reset(): void {
       CompilerError.invariant(current !== null, {
+        loc: null,
         reason:
           'MergeConsecutiveScopes: expected current scope to be non-null if reset()',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
         suggestions: null,
+        description: null,
       });
       if (current.to > current.from + 1) {
         merged.push(current);
@@ -381,16 +375,10 @@ class Transform extends ReactiveFunctionTransform<ReactiveScopeDependencies | nu
       }
       const mergedScope = block[entry.from]!;
       CompilerError.invariant(mergedScope.kind === 'scope', {
+        loc: null,
         reason:
           'MergeConsecutiveScopes: Expected scope starting index to be a scope',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
         suggestions: null,
       });
       nextInstructions.push(mergedScope);

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts

@@ -323,13 +323,7 @@ function writeTerminal(writer: Writer, terminal: ReactiveTerminal): void {
             CompilerError.invariant(block != null, {
               reason: 'Expected case to have a block',
               description: null,
-              details: [
-                {
-                  kind: 'error',
-                  loc: case_.test?.loc ?? null,
-                  message: null,
-                },
-              ],
+              loc: case_.test?.loc ?? null,
               suggestions: null,
             });
             writeReactiveInstructions(writer, block);

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PromoteUsedTemporaries.ts

@@ -290,14 +290,7 @@ class PromoteInterposedTemporaries extends ReactiveFunctionVisitor<InterState> {
       CompilerError.invariant(lval.identifier.name != null, {
         reason:
           'PromoteInterposedTemporaries: Assignment targets not expected to be temporaries',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: instruction.loc,
-            message: null,
-          },
-        ],
+        loc: instruction.loc,
       });
     }
 
@@ -461,13 +454,7 @@ function promoteIdentifier(identifier: Identifier, state: State): void {
     reason:
       'promoteTemporary: Expected to be called only for temporary variables',
     description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: GeneratedSource,
-        message: null,
-      },
-    ],
+    loc: GeneratedSource,
     suggestions: null,
   });
   if (state.tags.has(identifier.declarationId)) {

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneHoistedContexts.ts

@@ -145,14 +145,7 @@ class Visitor extends ReactiveFunctionTransform<VisitorState> {
           if (maybeHoistedFn != null) {
             CompilerError.invariant(maybeHoistedFn.kind === 'func', {
               reason: '[PruneHoistedContexts] Unexpected hoisted function',
-              description: null,
-              details: [
-                {
-                  kind: 'error',
-                  loc: instruction.loc,
-                  message: null,
-                },
-              ],
+              loc: instruction.loc,
             });
             maybeHoistedFn.definition = instruction.value.lvalue.place;
             /**

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneInitializationDependencies.ts

@@ -196,14 +196,7 @@ class Visitor extends ReactiveFunctionVisitor<CreateUpdate> {
   ): void {
     CompilerError.invariant(state !== 'Create', {
       reason: "Visiting a terminal statement with state 'Create'",
-      description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: stmt.terminal.loc,
-          message: null,
-        },
-      ],
+      loc: stmt.terminal.loc,
     });
     super.visitTerminal(stmt, state);
   }

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonEscapingScopes.ts

@@ -264,13 +264,7 @@ class State {
       CompilerError.invariant(identifierNode !== undefined, {
         reason: 'Expected identifier to be initialized',
         description: `[${id}] operand=${printPlace(place)} for identifier declaration ${identifier}`,
-        details: [
-          {
-            kind: 'error',
-            loc: place.loc,
-            message: null,
-          },
-        ],
+        loc: place.loc,
         suggestions: null,
       });
       identifierNode.scopes.add(scope.id);
@@ -292,13 +286,7 @@ function computeMemoizedIdentifiers(state: State): Set<DeclarationId> {
     CompilerError.invariant(node !== undefined, {
       reason: `Expected a node for all identifiers, none found for \`${id}\``,
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     if (node.seen) {
@@ -340,13 +328,7 @@ function computeMemoizedIdentifiers(state: State): Set<DeclarationId> {
     CompilerError.invariant(node !== undefined, {
       reason: 'Expected a node for all scopes',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     if (node.seen) {
@@ -429,9 +411,7 @@ class CollectDependenciesVisitor extends ReactiveFunctionVisitor<
     this.state = state;
     this.options = {
       memoizeJsxElements: !this.env.config.enableForest,
-      forceMemoizePrimitives:
-        this.env.config.enableForest ||
-        this.env.config.enablePreserveExistingMemoizationGuarantees,
+      forceMemoizePrimitives: this.env.config.enableForest,
     };
   }
 
@@ -554,23 +534,9 @@ class CollectDependenciesVisitor extends ReactiveFunctionVisitor<
       case 'JSXText':
       case 'BinaryExpression':
       case 'UnaryExpression': {
-        if (options.forceMemoizePrimitives) {
-          /**
-           * Because these instructions produce primitives we usually don't consider
-           * them as escape points: they are known to copy, not return references.
-           * However if we're forcing memoization of primitives then we mark these
-           * instructions as needing memoization and walk their rvalues to ensure
-           * any scopes transitively reachable from the rvalues are considered for
-           * memoization. Note: we may still prune primitive-producing scopes if
-           * they don't ultimately escape at all.
-           */
-          const level = MemoizationLevel.Conditional;
-          return {
-            lvalues: lvalue !== null ? [{place: lvalue, level}] : [],
-            rvalues: [...eachReactiveValueOperand(value)],
-          };
-        }
-        const level = MemoizationLevel.Never;
+        const level = options.forceMemoizePrimitives
+          ? MemoizationLevel.Memoized
+          : MemoizationLevel.Never;
         return {
           // All of these instructions return a primitive value and never need to be memoized
           lvalues: lvalue !== null ? [{place: lvalue, level}] : [],
@@ -719,7 +685,9 @@ class CollectDependenciesVisitor extends ReactiveFunctionVisitor<
       }
       case 'ComputedLoad':
       case 'PropertyLoad': {
-        const level = MemoizationLevel.Conditional;
+        const level = options.forceMemoizePrimitives
+          ? MemoizationLevel.Memoized
+          : MemoizationLevel.Conditional;
         return {
           // Indirection for the inner value, memoized if the value is
           lvalues: lvalue !== null ? [{place: lvalue, level}] : [],
@@ -995,13 +963,7 @@ class CollectDependenciesVisitor extends ReactiveFunctionVisitor<
       CompilerError.invariant(identifierNode !== undefined, {
         reason: 'Expected identifier to be initialized',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: stmt.terminal.loc,
-            message: null,
-          },
-        ],
+        loc: stmt.terminal.loc,
         suggestions: null,
       });
       for (const scope of scopes) {
@@ -1026,13 +988,7 @@ class CollectDependenciesVisitor extends ReactiveFunctionVisitor<
       CompilerError.invariant(identifierNode !== undefined, {
         reason: 'Expected identifier to be initialized',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: reassignment.loc,
-            message: null,
-          },
-        ],
+        loc: reassignment.loc,
         suggestions: null,
       });
       for (const scope of scopes) {

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/RenameVariables.ts

@@ -186,13 +186,7 @@ class Scopes {
     CompilerError.invariant(last === next, {
       reason: 'Mismatch push/pop calls',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
   }

compiler/packages/babel-plugin-react-compiler/src/SSA/EliminateRedundantPhi.ts

@@ -97,13 +97,7 @@ export function eliminateRedundantPhi(
         CompilerError.invariant(same !== null, {
           reason: 'Expected phis to be non-empty',
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: null,
-              message: null,
-            },
-          ],
+          loc: null,
           suggestions: null,
         });
         rewrites.set(phi.place.identifier, same);
@@ -155,26 +149,12 @@ export function eliminateRedundantPhi(
       for (const phi of block.phis) {
         CompilerError.invariant(!rewrites.has(phi.place.identifier), {
           reason: '[EliminateRedundantPhis]: rewrite not complete',
-          description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: phi.place.loc,
-              message: null,
-            },
-          ],
+          loc: phi.place.loc,
         });
         for (const [, operand] of phi.operands) {
           CompilerError.invariant(!rewrites.has(operand.identifier), {
             reason: '[EliminateRedundantPhis]: rewrite not complete',
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: phi.place.loc,
-                message: null,
-              },
-            ],
+            loc: phi.place.loc,
           });
         }
       }

compiler/packages/babel-plugin-react-compiler/src/SSA/EnterSSA.ts

@@ -70,13 +70,7 @@ class SSABuilder {
     CompilerError.invariant(this.#current !== null, {
       reason: 'we need to be in a block to access state!',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     return this.#states.get(this.#current)!;
@@ -259,13 +253,7 @@ function enterSSAImpl(
     CompilerError.invariant(!visitedBlocks.has(block), {
       reason: `found a cycle! visiting bb${block.id} again`,
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
 
@@ -278,13 +266,7 @@ function enterSSAImpl(
       CompilerError.invariant(func.context.length === 0, {
         reason: `Expected function context to be empty for outer function declarations`,
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: func.loc,
-            message: null,
-          },
-        ],
+        loc: func.loc,
         suggestions: null,
       });
       func.params = func.params.map(param => {
@@ -313,13 +295,7 @@ function enterSSAImpl(
           reason:
             'Expected function expression entry block to have zero predecessors',
           description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: null,
-              message: null,
-            },
-          ],
+          loc: null,
           suggestions: null,
         });
         entry.preds.add(blockId);

compiler/packages/babel-plugin-react-compiler/src/SSA/RewriteInstructionKindsBasedOnReassignment.ts

@@ -59,13 +59,7 @@ export function rewriteInstructionKindsBasedOnReassignment(
             {
               reason: `Expected variable not to be defined prior to declaration`,
               description: `${printPlace(lvalue.place)} was already defined`,
-              details: [
-                {
-                  kind: 'error',
-                  loc: lvalue.place.loc,
-                  message: null,
-                },
-              ],
+              loc: lvalue.place.loc,
             },
           );
           declarations.set(lvalue.place.identifier.declarationId, lvalue);
@@ -83,13 +77,7 @@ export function rewriteInstructionKindsBasedOnReassignment(
                 {
                   reason: `Expected variable not to be defined prior to declaration`,
                   description: `${printPlace(lvalue.place)} was already defined`,
-                  details: [
-                    {
-                      kind: 'error',
-                      loc: lvalue.place.loc,
-                      message: null,
-                    },
-                  ],
+                  loc: lvalue.place.loc,
                 },
               );
               declarations.set(lvalue.place.identifier.declarationId, lvalue);
@@ -113,13 +101,7 @@ export function rewriteInstructionKindsBasedOnReassignment(
                   description: `other places were \`${kind}\` but '${printPlace(
                     place,
                   )}' is const`,
-                  details: [
-                    {
-                      kind: 'error',
-                      loc: place.loc,
-                      message: 'Expected consistent kind for destructuring',
-                    },
-                  ],
+                  loc: place.loc,
                   suggestions: null,
                 },
               );
@@ -132,13 +114,7 @@ export function rewriteInstructionKindsBasedOnReassignment(
                 CompilerError.invariant(block.kind !== 'value', {
                   reason: `TODO: Handle reassignment in a value block where the original declaration was removed by dead code elimination (DCE)`,
                   description: null,
-                  details: [
-                    {
-                      kind: 'error',
-                      loc: place.loc,
-                      message: null,
-                    },
-                  ],
+                  loc: place.loc,
                   suggestions: null,
                 });
                 declarations.set(place.identifier.declarationId, lvalue);
@@ -149,13 +125,7 @@ export function rewriteInstructionKindsBasedOnReassignment(
                     description: `Other places were \`${kind}\` but '${printPlace(
                       place,
                     )}' is const`,
-                    details: [
-                      {
-                        kind: 'error',
-                        loc: place.loc,
-                        message: 'Expected consistent kind for destructuring',
-                      },
-                    ],
+                    loc: place.loc,
                     suggestions: null,
                   },
                 );
@@ -168,13 +138,7 @@ export function rewriteInstructionKindsBasedOnReassignment(
                     description: `Other places were \`${kind}\` but '${printPlace(
                       place,
                     )}' is reassigned`,
-                    details: [
-                      {
-                        kind: 'error',
-                        loc: place.loc,
-                        message: 'Expected consistent kind for destructuring',
-                      },
-                    ],
+                    loc: place.loc,
                     suggestions: null,
                   },
                 );
@@ -186,13 +150,7 @@ export function rewriteInstructionKindsBasedOnReassignment(
           CompilerError.invariant(kind !== null, {
             reason: 'Expected at least one operand',
             description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: null,
-                message: null,
-              },
-            ],
+            loc: null,
             suggestions: null,
           });
           lvalue.kind = kind;
@@ -205,13 +163,7 @@ export function rewriteInstructionKindsBasedOnReassignment(
           CompilerError.invariant(declaration !== undefined, {
             reason: `Expected variable to have been defined`,
             description: `No declaration for ${printPlace(lvalue)}`,
-            details: [
-              {
-                kind: 'error',
-                loc: lvalue.loc,
-                message: null,
-              },
-            ],
+            loc: lvalue.loc,
           });
           declaration.kind = InstructionKind.Let;
           break;

compiler/packages/babel-plugin-react-compiler/src/Transform/NameAnonymousFunctions.ts

@@ -1,174 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import {
-  FunctionExpression,
-  getHookKind,
-  HIRFunction,
-  IdentifierId,
-} from '../HIR';
-
-export function nameAnonymousFunctions(fn: HIRFunction): void {
-  if (fn.id == null) {
-    return;
-  }
-  const parentName = fn.id;
-  const functions = nameAnonymousFunctionsImpl(fn);
-  function visit(node: Node, prefix: string): void {
-    if (node.generatedName != null) {
-      /**
-       * Note that we don't generate a name for functions that already had one,
-       * so we'll only add the prefix to anonymous functions regardless of
-       * nesting depth.
-       */
-      const name = `${prefix}${node.generatedName}]`;
-      node.fn.nameHint = name;
-      node.fn.loweredFunc.func.nameHint = name;
-    }
-    /**
-     * Whether or not we generated a name for the function at this node,
-     * traverse into its nested functions to assign them names
-     */
-    const nextPrefix = `${prefix}${node.generatedName ?? node.fn.name ?? '<anonymous>'} > `;
-    for (const inner of node.inner) {
-      visit(inner, nextPrefix);
-    }
-  }
-  for (const node of functions) {
-    visit(node, `${parentName}[`);
-  }
-}
-
-type Node = {
-  fn: FunctionExpression;
-  generatedName: string | null;
-  inner: Array<Node>;
-};
-
-function nameAnonymousFunctionsImpl(fn: HIRFunction): Array<Node> {
-  // Functions that we track to generate names for
-  const functions: Map<IdentifierId, Node> = new Map();
-  // Tracks temporaries that read from variables/globals/properties
-  const names: Map<IdentifierId, string> = new Map();
-  // Tracks all function nodes to bubble up for later renaming
-  const nodes: Array<Node> = [];
-  for (const block of fn.body.blocks.values()) {
-    for (const instr of block.instructions) {
-      const {lvalue, value} = instr;
-      switch (value.kind) {
-        case 'LoadGlobal': {
-          names.set(lvalue.identifier.id, value.binding.name);
-          break;
-        }
-        case 'LoadContext':
-        case 'LoadLocal': {
-          const name = value.place.identifier.name;
-          if (name != null && name.kind === 'named') {
-            names.set(lvalue.identifier.id, name.value);
-          }
-          break;
-        }
-        case 'PropertyLoad': {
-          const objectName = names.get(value.object.identifier.id);
-          if (objectName != null) {
-            names.set(
-              lvalue.identifier.id,
-              `${objectName}.${String(value.property)}`,
-            );
-          }
-          break;
-        }
-        case 'FunctionExpression': {
-          const inner = nameAnonymousFunctionsImpl(value.loweredFunc.func);
-          const node: Node = {
-            fn: value,
-            generatedName: null,
-            inner,
-          };
-          /**
-           * Bubble-up all functions, even if they're named, so that we can
-           * later generate names for any inner anonymous functions
-           */
-          nodes.push(node);
-          if (value.name == null) {
-            // but only generate names for anonymous functions
-            functions.set(lvalue.identifier.id, node);
-          }
-          break;
-        }
-        case 'StoreContext':
-        case 'StoreLocal': {
-          const node = functions.get(value.value.identifier.id);
-          const variableName = value.lvalue.place.identifier.name;
-          if (
-            node != null &&
-            variableName != null &&
-            variableName.kind === 'named'
-          ) {
-            node.generatedName = variableName.value;
-            functions.delete(value.value.identifier.id);
-          }
-          break;
-        }
-        case 'CallExpression':
-        case 'MethodCall': {
-          const callee =
-            value.kind === 'MethodCall' ? value.property : value.callee;
-          const hookKind = getHookKind(fn.env, callee.identifier);
-          let calleeName: string | null = null;
-          if (hookKind != null && hookKind !== 'Custom') {
-            calleeName = hookKind;
-          } else {
-            calleeName = names.get(callee.identifier.id) ?? '(anonymous)';
-          }
-          let fnArgCount = 0;
-          for (const arg of value.args) {
-            if (arg.kind === 'Identifier' && functions.has(arg.identifier.id)) {
-              fnArgCount++;
-            }
-          }
-          for (let i = 0; i < value.args.length; i++) {
-            const arg = value.args[i]!;
-            if (arg.kind === 'Spread') {
-              continue;
-            }
-            const node = functions.get(arg.identifier.id);
-            if (node != null) {
-              const generatedName =
-                fnArgCount > 1 ? `${calleeName}(arg${i})` : `${calleeName}()`;
-              node.generatedName = generatedName;
-              functions.delete(arg.identifier.id);
-            }
-          }
-          break;
-        }
-        case 'JsxExpression': {
-          for (const attr of value.props) {
-            if (attr.kind === 'JsxSpreadAttribute') {
-              continue;
-            }
-            const node = functions.get(attr.place.identifier.id);
-            if (node != null) {
-              const elementName =
-                value.tag.kind === 'BuiltinTag'
-                  ? value.tag.name
-                  : (names.get(value.tag.identifier.id) ?? null);
-              const propName =
-                elementName == null
-                  ? attr.name
-                  : `<${elementName}>.${attr.name}`;
-              node.generatedName = `${propName}`;
-              functions.delete(attr.place.identifier.id);
-            }
-          }
-          break;
-        }
-      }
-    }
-  }
-  return nodes;
-}

compiler/packages/babel-plugin-react-compiler/src/Transform/TransformFire.ts

@@ -5,7 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerError, CompilerErrorDetailOptions, SourceLocation} from '..';
+import {
+  CompilerError,
+  CompilerErrorDetailOptions,
+  ErrorSeverity,
+  SourceLocation,
+} from '..';
 import {
   ArrayExpression,
   CallExpression,
@@ -128,6 +133,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
                 context.pushError({
                   loc: value.loc,
                   description: null,
+                  severity: ErrorSeverity.Invariant,
                   category: ErrorCategory.Invariant,
                   reason: '[InsertFire] No LoadGlobal found for useEffect call',
                   suggestions: null,
@@ -174,6 +180,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
                 loc: value.args[1].loc,
                 description:
                   'You must use an array literal for an effect dependency array when that effect uses `fire()`',
+                severity: ErrorSeverity.Invariant,
                 category: ErrorCategory.Fire,
                 reason: CANNOT_COMPILE_FIRE,
                 suggestions: null,
@@ -184,6 +191,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
               loc: value.args[1].place.loc,
               description:
                 'You must use an array literal for an effect dependency array when that effect uses `fire()`',
+              severity: ErrorSeverity.Invariant,
               category: ErrorCategory.Fire,
               reason: CANNOT_COMPILE_FIRE,
               suggestions: null,
@@ -218,6 +226,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
               context.pushError({
                 loc: value.loc,
                 description: null,
+                severity: ErrorSeverity.Invariant,
                 category: ErrorCategory.Invariant,
                 reason:
                   '[InsertFire] No loadLocal found for fire call argument',
@@ -241,6 +250,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
               loc: value.loc,
               description:
                 '`fire()` can only receive a function call such as `fire(fn(a,b)). Method calls and other expressions are not allowed',
+              severity: ErrorSeverity.InvalidReact,
               category: ErrorCategory.Fire,
               reason: CANNOT_COMPILE_FIRE,
               suggestions: null,
@@ -259,6 +269,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
           context.pushError({
             loc: value.loc,
             description,
+            severity: ErrorSeverity.InvalidReact,
             category: ErrorCategory.Fire,
             reason: CANNOT_COMPILE_FIRE,
             suggestions: null,
@@ -390,6 +401,7 @@ function ensureNoRemainingCalleeCaptures(
         description: `All uses of ${calleeName} must be either used with a fire() call in \
 this effect or not used with a fire() call at all. ${calleeName} was used with fire() on line \
 ${printSourceLocationLine(calleeInfo.fireLoc)} in this effect`,
+        severity: ErrorSeverity.InvalidReact,
         category: ErrorCategory.Fire,
         reason: CANNOT_COMPILE_FIRE,
         suggestions: null,
@@ -408,6 +420,7 @@ function ensureNoMoreFireUses(fn: HIRFunction, context: Context): void {
         loc: place.identifier.loc,
         description: 'Cannot use `fire` outside of a useEffect function',
         category: ErrorCategory.Fire,
+        severity: ErrorSeverity.Invariant,
         reason: CANNOT_COMPILE_FIRE,
         suggestions: null,
       });
@@ -698,7 +711,7 @@ class Context {
   }
 
   hasErrors(): boolean {
-    return this.#errors.hasAnyErrors();
+    return this.#errors.hasErrors();
   }
 
   throwIfErrorsFound(): void {

compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts

@@ -616,13 +616,7 @@ class Unifier {
       CompilerError.invariant(type.operands.length > 0, {
         reason: 'there should be at least one operand',
         description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
         suggestions: null,
       });
 
@@ -783,15 +777,6 @@ class Unifier {
       return {kind: 'Phi', operands: type.operands.map(o => this.get(o))};
     }
 
-    if (type.kind === 'Function') {
-      return {
-        kind: 'Function',
-        isConstructor: type.isConstructor,
-        shapeId: type.shapeId,
-        return: this.get(type.return),
-      };
-    }
-
     return type;
   }
 }

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

@@ -21,13 +21,7 @@ export default class DisjointSet<T> {
     CompilerError.invariant(first != null, {
       reason: 'Expected set to be non-empty',
       description: null,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
+      loc: null,
       suggestions: null,
     });
     /*

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

@@ -164,13 +164,7 @@ function parseConfigPragmaEnvironmentForTest(
   CompilerError.invariant(false, {
     reason: 'Internal error, could not parse config from pragma string',
     description: `${fromZodError(config.error)}`,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
+    loc: null,
     suggestions: null,
   });
 }
@@ -188,11 +182,6 @@ export function parseConfigPragmaForTests(
     environment?: PartialEnvironmentConfig;
   },
 ): PluginOptions {
-  const overridePragma = parseConfigPragmaAsString(pragma);
-  if (overridePragma !== '') {
-    return parseConfigStringAsJS(overridePragma, defaults);
-  }
-
   const environment = parseConfigPragmaEnvironmentForTest(
     pragma,
     defaults.environment ?? {},
@@ -228,100 +217,3 @@ export function parseConfigPragmaForTests(
   }
   return parsePluginOptions(options);
 }
-
-export function parseConfigPragmaAsString(pragma: string): string {
-  // Check if it's in JS override format
-  for (const {key, value: val} of splitPragma(pragma)) {
-    if (key === 'OVERRIDE' && val != null) {
-      return val;
-    }
-  }
-  return '';
-}
-
-function parseConfigStringAsJS(
-  configString: string,
-  defaults: {
-    compilationMode: CompilationMode;
-    environment?: PartialEnvironmentConfig;
-  },
-): PluginOptions {
-  let parsedConfig: any;
-  try {
-    // Parse the JavaScript object literal
-    parsedConfig = new Function(`return ${configString}`)();
-  } catch (error) {
-    CompilerError.invariant(false, {
-      reason: 'Failed to parse config pragma as JavaScript object',
-      description: `Could not parse: ${configString}. Error: ${error}`,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
-      suggestions: null,
-    });
-  }
-
-  const environment = parseConfigPragmaEnvironmentForTest(
-    '',
-    defaults.environment ?? {},
-  );
-
-  const options: Record<keyof PluginOptions, unknown> = {
-    ...defaultOptions,
-    panicThreshold: 'all_errors',
-    compilationMode: defaults.compilationMode,
-    environment,
-  };
-
-  // Apply parsed config, merging environment if it exists
-  if (parsedConfig.environment) {
-    const mergedEnvironment = {
-      ...(options.environment as Record<string, unknown>),
-      ...parsedConfig.environment,
-    };
-
-    // Validate environment config
-    const validatedEnvironment =
-      EnvironmentConfigSchema.safeParse(mergedEnvironment);
-    if (!validatedEnvironment.success) {
-      CompilerError.invariant(false, {
-        reason: 'Invalid environment configuration in config pragma',
-        description: `${fromZodError(validatedEnvironment.error)}`,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
-        suggestions: null,
-      });
-    }
-
-    options.environment = validatedEnvironment.data;
-  }
-
-  // Apply other config options
-  for (const [key, value] of Object.entries(parsedConfig)) {
-    if (key === 'environment') {
-      continue;
-    }
-
-    if (hasOwnProperty(defaultOptions, key)) {
-      if (key === 'target' && value === 'donotuse_meta_internal') {
-        options[key] = {
-          kind: value,
-          runtimeModule: 'react',
-        };
-      } else {
-        options[key] = value;
-      }
-    }
-  }
-
-  return parsePluginOptions(options);
-}

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

@@ -106,19 +106,12 @@ function visit(
       }
 
       CompilerError.invariant(false, {
-        reason:
-          'Expected all references to a variable to be consistently local or context references',
+        reason: `Expected all references to a variable to be consistently local or context references`,
+        loc: place.loc,
         description: `Identifier ${printPlace(
           place,
-        )} is referenced as a ${kind} variable, but was previously referenced as a ${prev.kind} variable`,
+        )} is referenced as a ${kind} variable, but was previously referenced as a ${prev} variable`,
         suggestions: null,
-        details: [
-          {
-            kind: 'error',
-            loc: place.loc,
-            message: `this is ${prev.kind}`,
-          },
-        ],
       });
     }
   }

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

@@ -10,6 +10,7 @@ import {
   CompilerError,
   CompilerErrorDetail,
   ErrorCategory,
+  ErrorSeverity,
 } from '../CompilerError';
 import {computeUnconditionalBlocks} from '../HIR/ComputeUnconditionalBlocks';
 import {isHookName} from '../HIR/Environment';
@@ -128,6 +129,7 @@ export function validateHooksUsage(
           description: null,
           reason,
           loc: place.loc,
+          severity: ErrorSeverity.InvalidReact,
           suggestions: null,
         }),
       );
@@ -145,6 +147,7 @@ export function validateHooksUsage(
           reason:
             'Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values',
           loc: place.loc,
+          severity: ErrorSeverity.InvalidReact,
           suggestions: null,
         }),
       );
@@ -162,6 +165,7 @@ export function validateHooksUsage(
           reason:
             'Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks',
           loc: place.loc,
+          severity: ErrorSeverity.InvalidReact,
           suggestions: null,
         }),
       );
@@ -449,6 +453,7 @@ function visitFunctionExpression(errors: CompilerError, fn: HIRFunction): void {
             errors.pushErrorDetail(
               new CompilerErrorDetail({
                 category: ErrorCategory.Hooks,
+                severity: ErrorSeverity.InvalidReact,
                 reason:
                   'Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)',
                 loc: callee.loc,

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerDiagnostic, CompilerError, Effect} from '..';
+import {CompilerDiagnostic, CompilerError, Effect, ErrorSeverity} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {HIRFunction, IdentifierId, Place} from '../HIR';
 import {
@@ -38,9 +38,10 @@ export function validateLocalsNotReassignedAfterRender(fn: HIRFunction): void {
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
         category: ErrorCategory.Immutability,
+        severity: ErrorSeverity.InvalidReact,
         reason: 'Cannot reassign variable after render completes',
-        description: `Reassigning ${variable} after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead`,
-      }).withDetails({
+        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`,
@@ -93,10 +94,11 @@ function getContextReassignment(
               errors.pushDiagnostic(
                 CompilerDiagnostic.create({
                   category: ErrorCategory.Immutability,
+                  severity: ErrorSeverity.InvalidReact,
                   reason: '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',
-                }).withDetails({
+                }).withDetail({
                   kind: 'error',
                   loc: reassignment.loc,
                   message: `Cannot reassign ${variable}`,
@@ -191,14 +193,7 @@ function getContextReassignment(
           for (const operand of operands) {
             CompilerError.invariant(operand.effect !== Effect.Unknown, {
               reason: `Expected effects to be inferred prior to ValidateLocalsNotReassignedAfterRender`,
-              description: null,
-              details: [
-                {
-                  kind: 'error',
-                  loc: operand.loc,
-                  message: '',
-                },
-              ],
+              loc: operand.loc,
             });
             const reassignment = reassigningFunctions.get(
               operand.identifier.id,

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerError} from '..';
+import {CompilerError, ErrorSeverity} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {
   Identifier,
@@ -113,6 +113,7 @@ class Visitor extends ReactiveFunctionVisitor<CompilerError> {
           reason:
             'React Compiler has skipped optimizing this component because the effect dependencies could not be memoized. Unmemoized effect dependencies can trigger an infinite loop or other unexpected behavior',
           description: null,
+          severity: ErrorSeverity.CannotPreserveMemoization,
           loc: typeof instruction.loc !== 'symbol' ? instruction.loc : null,
           suggestions: null,
         });

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerError, EnvironmentConfig} from '..';
+import {CompilerError, EnvironmentConfig, ErrorSeverity} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {HIRFunction, IdentifierId} from '../HIR';
 import {DEFAULT_GLOBALS} from '../HIR/Globals';
@@ -59,7 +59,7 @@ export function validateNoCapitalizedCalls(
             CompilerError.throwInvalidReact({
               category: ErrorCategory.CapitalizedCalls,
               reason,
-              description: `${calleeName} may be a component`,
+              description: `${calleeName} may be a component.`,
               loc: value.loc,
               suggestions: null,
             });
@@ -82,8 +82,9 @@ export function validateNoCapitalizedCalls(
           if (propertyName != null) {
             errors.push({
               category: ErrorCategory.CapitalizedCalls,
+              severity: ErrorSeverity.InvalidReact,
               reason,
-              description: `${propertyName} may be a component`,
+              description: `${propertyName} may be a component.`,
               loc: value.loc,
               suggestions: null,
             });

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerError, SourceLocation} from '..';
+import {CompilerError, ErrorSeverity, SourceLocation} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {
   ArrayExpression,
@@ -83,14 +83,7 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
             const dependencies: Array<IdentifierId> = deps.elements.map(dep => {
               CompilerError.invariant(dep.kind === 'Identifier', {
                 reason: `Dependency is checked as a place above`,
-                description: null,
-                details: [
-                  {
-                    kind: 'error',
-                    loc: value.loc,
-                    message: 'this is checked as a place above',
-                  },
-                ],
+                loc: value.loc,
               });
               return locals.get(dep.identifier.id) ?? dep.identifier.id;
             });
@@ -104,7 +97,7 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
       }
     }
   }
-  if (errors.hasAnyErrors()) {
+  if (errors.hasErrors()) {
     throw errors;
   }
 }
@@ -231,6 +224,7 @@ function validateEffect(
       reason:
         'Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)',
       description: null,
+      severity: ErrorSeverity.InvalidReact,
       loc,
       suggestions: null,
     });

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerDiagnostic, CompilerError, Effect} from '..';
+import {CompilerDiagnostic, CompilerError, Effect, ErrorSeverity} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {
   HIRFunction,
@@ -66,15 +66,16 @@ export function validateNoFreezingKnownMutableFunctions(
         errors.pushDiagnostic(
           CompilerDiagnostic.create({
             category: ErrorCategory.Immutability,
+            severity: ErrorSeverity.InvalidReact,
             reason: 'Cannot modify local variables after render completes',
-            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`,
+            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.`,
           })
-            .withDetails({
+            .withDetail({
               kind: 'error',
               loc: operand.loc,
               message: `This function may (indirectly) reassign or modify ${variable} after render`,
             })
-            .withDetails({
+            .withDetail({
               kind: 'error',
               loc: effect.value.loc,
               message: `This modifies ${variable}`,

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerDiagnostic, CompilerError} from '..';
+import {CompilerDiagnostic, CompilerError, ErrorSeverity} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {HIRFunction} from '../HIR';
 import {getFunctionCallSignature} from '../Inference/InferMutationAliasingEffects';
@@ -44,8 +44,9 @@ export function validateNoImpureFunctionsInRender(
                   ? `\`${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)',
+              severity: ErrorSeverity.InvalidReact,
               suggestions: null,
-            }).withDetails({
+            }).withDetail({
               kind: 'error',
               loc: callee.loc,
               message: 'Cannot call impure function',

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerDiagnostic, CompilerError} from '..';
+import {CompilerDiagnostic, CompilerError, ErrorSeverity} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {BlockId, HIRFunction} from '../HIR';
 import {Result} from '../Utils/Result';
@@ -38,9 +38,10 @@ export function validateNoJSXInTryStatement(
             errors.pushDiagnostic(
               CompilerDiagnostic.create({
                 category: ErrorCategory.ErrorBoundaries,
+                severity: ErrorSeverity.InvalidReact,
                 reason: 'Avoid constructing JSX within try/catch',
                 description: `React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)`,
-              }).withDetails({
+              }).withDetail({
                 kind: 'error',
                 loc: value.loc,
                 message: 'Avoid constructing JSX within try/catch',

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

@@ -9,6 +9,7 @@ import {
   CompilerDiagnostic,
   CompilerError,
   ErrorCategory,
+  ErrorSeverity,
 } from '../CompilerError';
 import {
   BlockId,
@@ -57,14 +58,8 @@ function makeRefId(id: number): RefId {
   CompilerError.invariant(id >= 0 && Number.isInteger(id), {
     reason: 'Expected identifier id to be a non-negative integer',
     description: null,
+    loc: null,
     suggestions: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
   });
   return id as RefId;
 }
@@ -197,40 +192,19 @@ function tyEqual(a: RefAccessType, b: RefAccessType): boolean {
     case 'Guard':
       CompilerError.invariant(b.kind === 'Guard', {
         reason: 'Expected ref value',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
       });
       return a.refId === b.refId;
     case 'RefValue':
       CompilerError.invariant(b.kind === 'RefValue', {
         reason: 'Expected ref value',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
       });
       return a.loc == b.loc;
     case 'Structure': {
       CompilerError.invariant(b.kind === 'Structure', {
         reason: 'Expected structure',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
+        loc: null,
       });
       const fnTypesEqual =
         (a.fn === null && b.fn === null) ||
@@ -269,14 +243,7 @@ function joinRefAccessTypes(...types: Array<RefAccessType>): RefAccessType {
         a.kind === 'Structure' && b.kind === 'Structure',
         {
           reason: 'Expected structure',
-          description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: null,
-              message: null,
-            },
-          ],
+          loc: null,
         },
       );
       const fn =
@@ -503,9 +470,10 @@ function validateNoRefAccessInRenderImpl(
                 errors.pushDiagnostic(
                   CompilerDiagnostic.create({
                     category: ErrorCategory.Refs,
+                    severity: ErrorSeverity.InvalidReact,
                     reason: 'Cannot access refs during render',
                     description: ERROR_DESCRIPTION,
-                  }).withDetails({
+                  }).withDetail({
                     kind: 'error',
                     loc: callee.loc,
                     message: `This function accesses a ref value`,
@@ -735,21 +703,14 @@ function validateNoRefAccessInRenderImpl(
       }
     }
 
-    if (errors.hasAnyErrors()) {
+    if (errors.hasErrors()) {
       return Err(errors);
     }
   }
 
   CompilerError.invariant(!env.hasChanged(), {
     reason: 'Ref type environment did not converge',
-    description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
+    loc: null,
   });
 
   return Ok(
@@ -773,9 +734,10 @@ function guardCheck(errors: CompilerError, operand: Place, env: Env): void {
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
         category: ErrorCategory.Refs,
+        severity: ErrorSeverity.InvalidReact,
         reason: 'Cannot access refs during render',
         description: ERROR_DESCRIPTION,
-      }).withDetails({
+      }).withDetail({
         kind: 'error',
         loc: operand.loc,
         message: `Cannot access ref value during render`,
@@ -797,9 +759,10 @@ function validateNoRefValueAccess(
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
         category: ErrorCategory.Refs,
+        severity: ErrorSeverity.InvalidReact,
         reason: 'Cannot access refs during render',
         description: ERROR_DESCRIPTION,
-      }).withDetails({
+      }).withDetail({
         kind: 'error',
         loc: (type.kind === 'RefValue' && type.loc) || operand.loc,
         message: `Cannot access ref value during render`,
@@ -823,9 +786,10 @@ function validateNoRefPassedToFunction(
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
         category: ErrorCategory.Refs,
+        severity: ErrorSeverity.InvalidReact,
         reason: 'Cannot access refs during render',
         description: ERROR_DESCRIPTION,
-      }).withDetails({
+      }).withDetail({
         kind: 'error',
         loc: (type.kind === 'RefValue' && type.loc) || loc,
         message: `Passing a ref to a function may read its value during render`,
@@ -845,9 +809,10 @@ function validateNoRefUpdate(
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
         category: ErrorCategory.Refs,
+        severity: ErrorSeverity.InvalidReact,
         reason: 'Cannot access refs during render',
         description: ERROR_DESCRIPTION,
-      }).withDetails({
+      }).withDetail({
         kind: 'error',
         loc: (type.kind === 'RefValue' && type.loc) || loc,
         message: `Cannot update ref during render`,
@@ -866,9 +831,10 @@ function validateNoDirectRefValueAccess(
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
         category: ErrorCategory.Refs,
+        severity: ErrorSeverity.InvalidReact,
         reason: 'Cannot access refs during render',
         description: ERROR_DESCRIPTION,
-      }).withDetails({
+      }).withDetail({
         kind: 'error',
         loc: type.loc ?? operand.loc,
         message: `Cannot access ref value during render`,

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

@@ -9,6 +9,7 @@ import {
   CompilerDiagnostic,
   CompilerError,
   ErrorCategory,
+  ErrorSeverity,
 } from '../CompilerError';
 import {
   HIRFunction,
@@ -106,8 +107,9 @@ export function validateNoSetStateInEffects(
                       '* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\n' +
                       'Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. ' +
                       '(https://react.dev/learn/you-might-not-need-an-effect)',
+                    severity: ErrorSeverity.InvalidReact,
                     suggestions: null,
-                  }).withDetails({
+                  }).withDetail({
                     kind: 'error',
                     loc: setState.loc,
                     message: