Cannot redefine plugin "react-hooks"

[patrik-csak]

I'm trying to use XO with Next.js v16 (related: #635)

I'm getting this error when I try to add XO to a Next.js v16 project via xoToEslintConfig():

ConfigError: Config (unnamed): Key "plugins": Cannot redefine plugin "react-hooks".

---

Steps to reproduce:

1. Create a Next.js project

   npx create-next-app@latest

2. Add XO to the project

   npm install xo --save-dev

3. Add XO to eslint.config.mjs

     // ...
   
     const eslintConfig = defineConfig([
       ...nextVitals,
       ...nextTs,
   +   ...xo.xoToEslintConfig([{ react: true }]),
       // ...
     ]);
   
     // ...

4. Run ESLint

   npm run lint

   > next-xo@0.1.0 lint
   > eslint
   
   
   Oops! Something went wrong! :(
   
   ESLint: 9.39.1
   
   ConfigError: Config (unnamed): Key "plugins": Cannot redefine plugin "react-hooks".
   		at rethrowConfigError (/Users/user/next-xo/node_modules/@eslint/config-array/dist/cjs/index.cjs:343:8)
   		at /Users/user/next-xo/node_modules/@eslint/config-array/dist/cjs/index.cjs:1405:5
   		at Array.reduce (<anonymous>)
   		at FlatConfigArray.getConfigWithStatus (/Users/user/next-xo/node_modules/@eslint/config-array/dist/cjs/index.cjs:1398:43)
   		at FlatConfigArray.getConfig (/Users/user/next-xo/node_modules/@eslint/config-array/dist/cjs/index.cjs:1427:15)
   		at entryFilter (/Users/user/next-xo/node_modules/eslint/lib/eslint/eslint-helpers.js:323:27)
   		at async NodeHfs.<anonymous> (file:///Users/user/next-xo/node_modules/@humanfs/core/src/hfs.js:574:24)
   		at async NodeHfs.<anonymous> (file:///Users/user/next-xo/node_modules/@humanfs/core/src/hfs.js:604:6)
   		at async NodeHfs.walk (file:///Users/user/next-xo/node_modules/@humanfs/core/src/hfs.js:614:3)
   		at async globSearch (/Users/user/next-xo/node_modules/eslint/lib/eslint/eslint-helpers.js:364:20)
   

---

I'm currently getting around this by deleting XO's react-hooks plugin:

xo.xoToEslintConfig([{ react: true }]).map((config) => {
  if (config.plugins === undefined) return config;

  const plugins = { ...config.plugins };
  delete plugins["react-hooks"];
  return { ...config, plugins };
});

[spence-s]

Seems like expected behavior to me.

https://nextjs.org/docs/app/api-reference/config/eslint

Next is including the same plugin already. You could just as easily delete the plugin on the next config.

---

The best fix for this is NOT use eslint-config-next

Instead, use @next/eslint-plugin and add the recommended config. You can also optionally install jsxa11y and copy over the rules in the next config.

You have it set up for xo to override the entire rest of the next config anyway and the next config include a competing import plugin that xo already takes care of.