feat: eslint-plugin-react supports ESLint v9

lib/config-generator.js

@@ -74,19 +74,6 @@ export class ConfigGenerator {
                     { message: "None of these", name: "none" }
                 ]
             },
-            {
-                type: "select",
-                name: "eslintVersion",
-                message: "The React plugin doesn't officially support ESLint v9 yet. What would you like to do?",
-                initial: 0,
-                choices: [
-                    { message: "Install ESLint v9.x with compatibility utilities", name: "9.x" },
-                    { message: "Install ESLint v8.x", name: "8.x" }
-                ],
-                skip() {
-                    return this.state.answers.framework !== "react";
-                }
-            },
             {
                 type: "select",
                 name: "language",
@@ -193,23 +180,10 @@ const compat = new FlatCompat({baseDirectory: __dirname, recommendedConfig: plug
             if (this.answers.language === "typescript") {
                 extensions.push("tsx");
             }
-            // eslint-plugin-react's flat configs have languageOptions as a non-enumerable property
-            exportContent = `  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },\n${exportContent}`;
 
-            if (this.answers.eslintVersion === "9.x") {
-                this.result.devDependencies.push("eslint-plugin-react", "@eslint/compat");
-                if (!this.result.installFlags.includes("--force")) {
-                    this.result.installFlags.push("--force");
-                }
-                importContent += "import pluginReactConfig from \"eslint-plugin-react/configs/recommended.js\";\n";
-                importContent += "import { fixupConfigRules } from \"@eslint/compat\";\n";
-                exportContent += "  ...fixupConfigRules(pluginReactConfig),\n";
-            } else if (this.answers.eslintVersion === "8.x") {
-                this.result.devDependencies[0] = "eslint@8.x";
-                this.result.devDependencies.push("eslint-plugin-react");
-                importContent += "import pluginReactConfig from \"eslint-plugin-react/configs/recommended.js\";\n";
-                exportContent += "  pluginReactConfig,\n";
-            }
+            this.result.devDependencies.push("eslint-plugin-react");
+            importContent += "import pluginReact from \"eslint-plugin-react\";\n";
+            exportContent += "  pluginReact.configs.flat.recommended,\n";
         }
 
         if (this.answers.config) {
@@ -294,8 +268,7 @@ export default [\n${exportContent}];`;
 
             // removing `--force` when:
             // 1. yarn v2+ -- it does not support it.
-            // 2. eslint v8.x -- it does not need it.
-            if (packageManager === "yarn" || this.answers.eslintVersion === "8.x") {
+            if (packageManager === "yarn") {
                 const index = this.result.installFlags.indexOf("--force");
 
                 if (index !== -1) {

tests/__snapshots__/problems-esm-react-eslint9.x-javascript → tests/__snapshots__/problems-commonjs-react-javascript

@@ -1,27 +1,24 @@
 {
   "configContent": "import globals from "globals";
 import pluginJs from "@eslint/js";
-import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
-import { fixupConfigRules } from "@eslint/compat";
+import pluginReact from "eslint-plugin-react";
 
 
 export default [
   {files: ["**/*.{js,mjs,cjs,jsx}"]},
-  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
-  {languageOptions: { globals: globals.browser }},
+  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
   pluginJs.configs.recommended,
-  ...fixupConfigRules(pluginReactConfig),
+  pluginReact.configs.flat.recommended,
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
     "eslint@9.x",
     "globals",
     "@eslint/js",
     "eslint-plugin-react",
-    "@eslint/compat",
   ],
   "installFlags": [
     "-D",
-    "--force",
   ],
 }

tests/__snapshots__/problems-esm-react-eslint9.x-typescript → tests/__snapshots__/problems-commonjs-react-typescript

@@ -2,17 +2,16 @@
   "configContent": "import globals from "globals";
 import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
-import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
-import { fixupConfigRules } from "@eslint/compat";
+import pluginReact from "eslint-plugin-react";
 
 
 export default [
   {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
-  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
-  {languageOptions: { globals: globals.browser }},
+  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
-  ...fixupConfigRules(pluginReactConfig),
+  pluginReact.configs.flat.recommended,
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
@@ -21,7 +20,6 @@ export default [
     "@eslint/js",
     "typescript-eslint",
     "eslint-plugin-react",
-    "@eslint/compat",
   ],
   "installFlags": [
     "-D",

tests/__snapshots__/problems-esm-react-eslint8.x-javascript → tests/__snapshots__/problems-esm-react-javascript

@@ -1,19 +1,18 @@
 {
   "configContent": "import globals from "globals";
 import pluginJs from "@eslint/js";
-import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import pluginReact from "eslint-plugin-react";
 
 
 export default [
   {files: ["**/*.{js,mjs,cjs,jsx}"]},
-  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
-  {languageOptions: { globals: globals.browser }},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
   pluginJs.configs.recommended,
-  pluginReactConfig,
+  pluginReact.configs.flat.recommended,
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
-    "eslint@8.x",
+    "eslint@9.x",
     "globals",
     "@eslint/js",
     "eslint-plugin-react",

tests/__snapshots__/problems-esm-react-eslint8.x-typescript → tests/__snapshots__/problems-esm-react-typescript

@@ -2,20 +2,19 @@
   "configContent": "import globals from "globals";
 import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
-import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import pluginReact from "eslint-plugin-react";
 
 
 export default [
   {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
-  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
-  {languageOptions: { globals: globals.browser }},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
-  pluginReactConfig,
+  pluginReact.configs.flat.recommended,
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
-    "eslint@8.x",
+    "eslint@9.x",
     "globals",
     "@eslint/js",
     "typescript-eslint",

tests/__snapshots__/problems-script-react-javascript

@@ -0,0 +1,24 @@
+{
+  "configContent": "import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReact from "eslint-plugin-react";
+
+
+export default [
+  {files: ["**/*.{js,mjs,cjs,jsx}"]},
+  {files: ["**/*.js"], languageOptions: {sourceType: "script"}},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
+  pluginJs.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];",
+  "configFilename": "eslint.config.js",
+  "devDependencies": [
+    "eslint@9.x",
+    "globals",
+    "@eslint/js",
+    "eslint-plugin-react",
+  ],
+  "installFlags": [
+    "-D",
+  ],
+}

tests/__snapshots__/syntax-esm-react-eslint9.x-typescript → tests/__snapshots__/problems-script-react-typescript

@@ -1,24 +1,25 @@
 {
   "configContent": "import globals from "globals";
+import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
-import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
-import { fixupConfigRules } from "@eslint/compat";
+import pluginReact from "eslint-plugin-react";
 
 
 export default [
   {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
-  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
-  {languageOptions: { globals: globals.browser }},
+  {files: ["**/*.js"], languageOptions: {sourceType: "script"}},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
+  pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
-  ...fixupConfigRules(pluginReactConfig),
+  pluginReact.configs.flat.recommended,
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
     "eslint@9.x",
     "globals",
+    "@eslint/js",
     "typescript-eslint",
     "eslint-plugin-react",
-    "@eslint/compat",
   ],
   "installFlags": [
     "-D",

tests/__snapshots__/syntax-commonjs-react-javascript

@@ -0,0 +1,21 @@
+{
+  "configContent": "import globals from "globals";
+import pluginReact from "eslint-plugin-react";
+
+
+export default [
+  {files: ["**/*.{js,mjs,cjs,jsx}"]},
+  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
+  pluginReact.configs.flat.recommended,
+];",
+  "configFilename": "eslint.config.js",
+  "devDependencies": [
+    "eslint@9.x",
+    "globals",
+    "eslint-plugin-react",
+  ],
+  "installFlags": [
+    "-D",
+  ],
+}

tests/__snapshots__/syntax-commonjs-react-typescript

@@ -0,0 +1,25 @@
+{
+  "configContent": "import globals from "globals";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+
+export default [
+  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
+  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];",
+  "configFilename": "eslint.config.js",
+  "devDependencies": [
+    "eslint@9.x",
+    "globals",
+    "typescript-eslint",
+    "eslint-plugin-react",
+  ],
+  "installFlags": [
+    "-D",
+    "--force",
+  ],
+}

tests/__snapshots__/syntax-esm-react-eslint8.x-javascript → tests/__snapshots__/syntax-esm-react-javascript

@@ -1,17 +1,16 @@
 {
   "configContent": "import globals from "globals";
-import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import pluginReact from "eslint-plugin-react";
 
 
 export default [
   {files: ["**/*.{js,mjs,cjs,jsx}"]},
-  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
-  {languageOptions: { globals: globals.browser }},
-  pluginReactConfig,
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
+  pluginReact.configs.flat.recommended,
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
-    "eslint@8.x",
+    "eslint@9.x",
     "globals",
     "eslint-plugin-react",
   ],

tests/__snapshots__/syntax-esm-react-eslint8.x-typescript → tests/__snapshots__/syntax-esm-react-typescript

@@ -1,19 +1,18 @@
 {
   "configContent": "import globals from "globals";
 import tseslint from "typescript-eslint";
-import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import pluginReact from "eslint-plugin-react";
 
 
 export default [
   {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
-  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
-  {languageOptions: { globals: globals.browser }},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
   ...tseslint.configs.recommended,
-  pluginReactConfig,
+  pluginReact.configs.flat.recommended,
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
-    "eslint@8.x",
+    "eslint@9.x",
     "globals",
     "typescript-eslint",
     "eslint-plugin-react",

tests/__snapshots__/syntax-script-react-javascript

@@ -0,0 +1,21 @@
+{
+  "configContent": "import globals from "globals";
+import pluginReact from "eslint-plugin-react";
+
+
+export default [
+  {files: ["**/*.{js,mjs,cjs,jsx}"]},
+  {files: ["**/*.js"], languageOptions: {sourceType: "script"}},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
+  pluginReact.configs.flat.recommended,
+];",
+  "configFilename": "eslint.config.js",
+  "devDependencies": [
+    "eslint@9.x",
+    "globals",
+    "eslint-plugin-react",
+  ],
+  "installFlags": [
+    "-D",
+  ],
+}

tests/__snapshots__/syntax-script-react-typescript

@@ -0,0 +1,25 @@
+{
+  "configContent": "import globals from "globals";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+
+export default [
+  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
+  {files: ["**/*.js"], languageOptions: {sourceType: "script"}},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];",
+  "configFilename": "eslint.config.js",
+  "devDependencies": [
+    "eslint@9.x",
+    "globals",
+    "typescript-eslint",
+    "eslint-plugin-react",
+  ],
+  "installFlags": [
+    "-D",
+    "--force",
+  ],
+}