feat(eslint-config-fluid): switch from eslint-plugin-react to @eslint-react/eslint-plugin (#27011)

## Summary

- Replace `eslint-plugin-react` (~7.37.5) with
`@eslint-react/eslint-plugin` (~2.13.0) in
`@fluidframework/eslint-config-fluid` to unblock ESLint 10 adoption
- Use the `recommended-typescript` preset which auto-disables rules
already handled by TypeScript
- Keep `eslint-plugin-react-hooks` separately — it already has ESLint 10
support and provides React Compiler rules
- Switch `print-configs` script from `tsx` to `jiti` to fix ESM-only
package resolution

### Why

`eslint-plugin-react` 7.37.5 is broken with ESLint 10 — it calls
`context.getFilename()` which was removed. The upstream fix
([jsx-eslint/eslint-plugin-react#3979](jsx-eslint/eslint-plugin-react#3979))
has been blocked since February 2026. `@eslint-react` v2.13.0 supports
ESLint 8/9/10, so this works now and won't block the ESLint 10 upgrade.

### Consumer updates

Per-package eslint config and package.json updates (rule renames,
removing redundant devDeps) will come in a follow-up PR stacked on this
one.

Resolves #27009

Author: tylerbutler

common/build/eslint-config-fluid/CHANGELOG.md

@@ -1,6 +1,78 @@
 # @fluidframework/eslint-config-fluid Changelog
 
-## [9.0.0](https://github.com/microsoft/FluidFramework/releases/tag/eslint-config-fluid_v9.0_0)
+## [10.0.0](https://github.com/microsoft/FluidFramework/releases/tag/eslint-config-fluid_v10.0.0)
+
+### eslint-plugin-react replaced by @eslint-react/eslint-plugin
+
+The `eslint-plugin-react` dependency has been replaced with
+[`@eslint-react/eslint-plugin`](https://eslint-react.xyz/) v2.13.0. This change is required because
+`eslint-plugin-react` 7.37.5 is incompatible with ESLint 10 (it calls the removed `context.getFilename()` API), and the
+upstream fix has been blocked since February 2026.
+
+`@eslint-react/eslint-plugin` v2.13.0 supports ESLint 8, 9, and 10, so this version works with the current ESLint 9
+setup and will not block the future ESLint 10 upgrade.
+
+`eslint-plugin-react-hooks` is unchanged — it already supports ESLint 10 and continues to provide React Compiler rules.
+
+#### Breaking: Rule names changed
+
+All `react/*` rules from `eslint-plugin-react` are replaced by `@eslint-react/*` rules. Any `eslint-disable` comments
+or per-package rule overrides referencing `react/*` rules must be updated to the new names.
+
+Key rule mapping:
+
+| Old rule (`eslint-plugin-react`)      | New rule (`@eslint-react`)                                                               |
+| ------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `react/jsx-key`                       | `@eslint-react/no-missing-key`                                                           |
+| `react/jsx-no-comment-textnodes`      | `@eslint-react/jsx-no-comment-textnodes`                                                 |
+| `react/jsx-no-target-blank`           | `@eslint-react/dom/no-unsafe-target-blank`                                               |
+| `react/no-children-prop`              | `@eslint-react/no-children-prop`                                                         |
+| `react/no-danger-with-children`       | `@eslint-react/dom/no-dangerously-set-innerhtml-with-children`                           |
+| `react/no-deprecated`                 | Multiple rules (see below)                                                               |
+| `react/no-direct-mutation-state`      | `@eslint-react/no-direct-mutation-state`                                                 |
+| `react/no-find-dom-node`              | `@eslint-react/dom/no-find-dom-node`                                                     |
+| `react/no-render-return-value`        | `@eslint-react/dom/no-render-return-value`                                               |
+| `react/no-string-refs`                | `@eslint-react/no-string-refs`                                                           |
+| `react/no-unstable-nested-components` | `@eslint-react/no-nested-component-definitions`                                          |
+| `react/jsx-no-useless-fragment`       | `@eslint-react/no-useless-fragment`                                                      |
+| `react/prop-types`                    | `@eslint-react/no-prop-types` (bans PropTypes usage; TypeScript handles prop validation) |
+
+The `react/no-deprecated` rule is replaced by individual rules for each deprecated API:
+`@eslint-react/no-component-will-mount`, `@eslint-react/no-component-will-receive-props`,
+`@eslint-react/no-component-will-update`, `@eslint-react/no-create-ref`, `@eslint-react/dom/no-find-dom-node`,
+`@eslint-react/dom/no-hydrate`, `@eslint-react/dom/no-render`, `@eslint-react/dom/no-render-return-value`.
+
+#### Breaking: Rules removed (no equivalent)
+
+The following rules have no `@eslint-react` equivalent and are no longer enforced:
+
+- `react/no-unescaped-entities` — Low priority; JSX transpilation handles this correctly.
+- `react/no-is-mounted` — Legacy class component pattern; TypeScript discourages this.
+- `react/require-render-return` — TypeScript enforces return types.
+
+#### New rules enabled
+
+The `recommended-typescript` preset enables many rules not previously configured. These are set at `warn` severity
+unless otherwise noted:
+
+- `@eslint-react/no-nested-component-definitions` (`error`) — Catches component definitions inside render functions.
+- `@eslint-react/no-array-index-key` — Warns against using array index as key.
+- `@eslint-react/no-clone-element` — Warns against `React.cloneElement`.
+- `@eslint-react/no-context-provider` — Warns against deprecated `Context.Provider` (React 19).
+- `@eslint-react/no-forward-ref` — Warns against deprecated `React.forwardRef` (React 19).
+- `@eslint-react/web-api/no-leaked-event-listener` — Catches leaked event listeners.
+- `@eslint-react/web-api/no-leaked-interval` — Catches leaked `setInterval` calls.
+- `@eslint-react/web-api/no-leaked-timeout` — Catches leaked `setTimeout` calls.
+- `@eslint-react/web-api/no-leaked-resize-observer` — Catches leaked resize observers.
+- `@eslint-react/naming-convention/*` — React naming convention rules.
+
+#### Settings namespace changed
+
+The `@eslint-react` plugin uses `react-x` for its settings namespace instead of `react`. If you have custom
+`settings.react` configuration for React version detection, it should be changed to `settings["react-x"]`. The
+`recommended-typescript` preset configures `react-x.version: "detect"` automatically.
+
+## [9.0.0](https://github.com/microsoft/FluidFramework/releases/tag/eslint-config-fluid_v9.0.0)
 
 ### Native ESLint 9 Flat Config (No FlatCompat)
 
@@ -125,7 +197,7 @@ The package now uses rules from [eslint-plugin-import-x](https://github.com/un-t
 eslint-plugin-import. Integrating this change will require renaming eslint disable comments and overrides, but the
 changes are mechanical.
 
-## [7.0.0](https://github.com/microsoft/FluidFramework/releases/tag/eslint-config-fluid_v7.0_0)
+## [7.0.0](https://github.com/microsoft/FluidFramework/releases/tag/eslint-config-fluid_v7.0.0)
 
 ### New Rules
 
@@ -179,14 +251,14 @@ Enables the following new rules as warnings (they will be promoted to errors in
 - [@typescript-eslint/no-unsafe-function-type](https://typescript-eslint.io/rules/no-unsafe-function-type/)
 - [@typescript-eslint/no-wrapper-object-types](https://typescript-eslint.io/rules/no-wrapper-object-types/)
 
-## [6.0.1](https://github.com/microsoft/FluidFramework/releases/tag/eslint-config-fluid_v6.0_1)
+## [6.0.1](https://github.com/microsoft/FluidFramework/releases/tag/eslint-config-fluid_v6.0.1)
 
 Update dependencies on the following packages:
 
 - `@typescript-eslint/eslint-plugin` (from 7.0.0 to 7.18.0)
 - `@typescript-eslint/parser` (from 7.0.0 to 7.18.0)
 
-## [6.0.0](https://github.com/microsoft/FluidFramework/releases/tag/eslint-config-fluid_v6.0_0)
+## [6.0.0](https://github.com/microsoft/FluidFramework/releases/tag/eslint-config-fluid_v6.0.0)
 
 Adds the following [@typescript-eslint/no-restricted-imports](https://typescript-eslint.io/rules/no-restricted-imports/) rules:
 
@@ -195,7 +267,7 @@ Adds the following [@typescript-eslint/no-restricted-imports](https://typescript
 2. Don't import from parent index file.
     - E.g. prefer `import { Foo } from "./Foo.js";` over `import { Foo } from "./index.js";`
 
-## [5.8.0](https://github.com/microsoft/FluidFramework/releases/tag/eslint-config-fluid_v5.8_0)
+## [5.8.0](https://github.com/microsoft/FluidFramework/releases/tag/eslint-config-fluid_v5.8.0)
 
 Promotes the following rules from the `strict` ruleset to the `recommended` ruleset:
 

common/build/eslint-config-fluid/library/configs/overrides.mts

@@ -17,19 +17,25 @@
  * - cjsFileConfig: CommonJS file rule overrides
  * - jsNoProject: Disables type-aware parsing for JS and .d.ts files
  * - jsTypeAwareDisable: Disables type-aware rules for JS files
- * - reactRecommendedOverride: React file overrides for recommended config
+ * - reactRecommendedOverride: React file overrides for recommended config factory
  * - testRecommendedOverride: Test file overrides for recommended config
  * - sharedConfigs: Collection of all shared configs in a config array
  */
 
+import eslintReact from "@eslint-react/eslint-plugin";
 import dependPlugin from "eslint-plugin-depend";
-import reactPlugin from "eslint-plugin-react";
 import reactHooksPlugin from "eslint-plugin-react-hooks";
 import type { ESLint, Linter } from "eslint";
 
 import { permittedImports, restrictedImportPaths, testFilePatterns } from "../constants.mjs";
 import type { FlatConfigArray } from "./base.mjs";
 
+const reactFilePatterns = ["**/*.jsx", "**/*.tsx"] as const;
+const reactRecommendedTypeScript = eslintReact.configs[
+	"recommended-typescript"
+] satisfies Linter.Config;
+const reactHooksRecommended = reactHooksPlugin.configs.flat.recommended satisfies Linter.Config;
+
 /**
  * eslint-plugin-depend configuration.
  */
@@ -127,37 +133,36 @@ export const internalModulesConfig = {
 } as const satisfies Linter.Config;
 
 /**
- * React rules for ESLint 9 - extends react/recommended and react-hooks/recommended.
+ * React rules - extends @eslint-react recommended-typescript and react-hooks/recommended.
+ *
+ * Uses @eslint-react/eslint-plugin instead of eslint-plugin-react for ESLint 10 compatibility.
+ * eslint-plugin-react-hooks is kept separately because it provides React Compiler rules
+ * and already supports ESLint 10.
  */
 export const reactConfig = [
-	// react/flat.recommended
+	// @eslint-react recommended-typescript preset
 	{
-		files: ["**/*.jsx", "**/*.tsx"],
-		...reactPlugin.configs.flat.recommended,
+		...reactRecommendedTypeScript,
+		files: [...reactFilePatterns],
+		rules: {
+			...reactRecommendedTypeScript.rules,
+			"@eslint-react/dom/no-unsafe-target-blank": "error",
+			"@eslint-react/no-children-prop": "error",
+			"@eslint-react/no-useless-fragment": "error",
+			"@eslint-react/jsx-no-comment-textnodes": "error",
+		},
 	},
-	// react-hooks/recommended rules
+	// react-hooks/recommended rules with custom overrides
 	{
-		files: ["**/*.jsx", "**/*.tsx"],
+		...reactHooksRecommended,
+		files: [...reactFilePatterns],
 		plugins: {
+			...reactHooksRecommended.plugins,
 			// reactHooksPlugin.configs.flat does not conform. It is not a `ConfigObject`.
 			"react-hooks": reactHooksPlugin as ESLint.Plugin,
 		},
-		rules: reactHooksPlugin.configs.recommended.rules,
-		settings: {
-			react: {
-				version: "detect",
-			},
-		},
-	},
-	// react/flat["jsx-runtime"]
-	{
-		files: ["**/*.jsx", "**/*.tsx"],
-		...reactPlugin.configs.flat["jsx-runtime"],
-	},
-	// Custom overrides for react-hooks rules
-	{
-		files: ["**/*.jsx", "**/*.tsx"],
 		rules: {
+			...reactHooksRecommended.rules,
 			"react-hooks/immutability": "warn",
 			"react-hooks/refs": "warn",
 			"react-hooks/rules-of-hooks": "warn",
@@ -252,17 +257,17 @@ export const jsTypeAwareDisable = {
 } as const satisfies Linter.Config;
 
 /**
- * React file overrides for recommended config (from recommended.js).
+ * React file overrides for recommended config factory.
  */
 export const reactRecommendedOverride = {
-	files: ["**/*.jsx", "**/*.tsx"],
+	files: [...reactFilePatterns],
 	rules: {
 		"unicorn/consistent-function-scoping": "off",
 	},
 } as const satisfies Linter.Config;
 
 /**
- * Test file overrides for recommended config (from recommended.js).
+ * Test file overrides for recommended config factory.
  */
 export const testRecommendedOverride = {
 	// Use of spread operator shouldn't really be needed here. Under VS Code, a

common/build/eslint-config-fluid/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@fluidframework/eslint-config-fluid",
-	"version": "9.0.0",
+	"version": "10.0.0",
 	"description": "Shareable ESLint config for the Fluid Framework",
 	"homepage": "https://fluidframework.com",
 	"repository": {
@@ -18,11 +18,12 @@
 		"format": "npm run prettier:fix",
 		"prettier": "prettier --check . --cache --ignore-path ../../../.prettierignore",
 		"prettier:fix": "prettier --write . --cache --ignore-path ../../../.prettierignore",
-		"print-configs": "tsx scripts/print-configs.ts printed-configs",
+		"print-configs": "jiti scripts/print-configs.ts printed-configs",
 		"test": "echo TODO: add tests"
 	},
 	"dependencies": {
 		"@eslint-community/eslint-plugin-eslint-comments": "~4.5.0",
+		"@eslint-react/eslint-plugin": "~2.13.0",
 		"@eslint/eslintrc": "~3.3.3",
 		"@eslint/js": "~9.39.2",
 		"@fluid-internal/eslint-plugin-fluid": "^0.4.1",
@@ -36,7 +37,6 @@
 		"eslint-plugin-import-x": "~4.16.1",
 		"eslint-plugin-jsdoc": "~61.4.1",
 		"eslint-plugin-promise": "~7.2.1",
-		"eslint-plugin-react": "~7.37.5",
 		"eslint-plugin-react-hooks": "~7.0.1",
 		"eslint-plugin-tsdoc": "~0.5.0",
 		"eslint-plugin-unicorn": "~54.0.0",
@@ -55,7 +55,6 @@
 		"prettier": "~3.6.2",
 		"rimraf": "^6.1.3",
 		"sort-json": "^2.0.1",
-		"tsx": "^4.21.0",
 		"typescript": "~5.4.5"
 	},
 	"packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319",