reactjseslinteslint-config-airbnbnext.js15

Unable to add airbnb coding style to nextjs 15


When I try to add eslint-config-airbnb it gives me this error

$ npm install --save-dev eslint-config-airbnb

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: job-portal@0.1.0
npm ERR! Found: eslint-plugin-react-hooks@5.0.0
npm ERR! node_modules/eslint-plugin-react-hooks
npm ERR!   eslint-plugin-react-hooks@"^5.0.0" from eslint-config-next@15.0.1
npm ERR!   node_modules/eslint-config-next
npm ERR!     dev eslint-config-next@"15.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev eslint-config-airbnb@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: eslint-plugin-react-hooks@4.6.2
npm ERR! node_modules/eslint-plugin-react-hooks
npm ERR!   peer eslint-plugin-react-hooks@"^4.3.0" from eslint-config-airbnb@19.0.4
npm ERR!   node_modules/eslint-config-airbnb
npm ERR!     dev eslint-config-airbnb@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

As mentioned in their documentation, I checked for the correct version required

npm info "eslint-config-airbnb@latest" peerDependencies

{
  eslint: '^7.32.0 || ^8.2.0',
  'eslint-plugin-react': '^7.28.0',
  'eslint-plugin-import': '^2.25.3',
  'eslint-plugin-jsx-a11y': '^6.5.1',
  'eslint-plugin-react-hooks': '^4.3.0'
}

According to the output I installed eslint-plugin-react-hooks@4.3.0, the above error has not returned.

Now, the problem is I can't install eslint-config-airbnb-typescript because it gives different dependency issues.

I tried to fix it by installing the required versions of @typescript-eslint/parser and @typescript-eslint/eslint-plugin, but it seems to have given me an error as a cycle.


Solution

  • The problem here is:

    1. Your project relies on a package called eslint-config-next at version 15.0.1 and that requires eslint-plugin-react-hooks@"^5.0.0.
    2. eslint-config-airbnb at version 19.0.4 requires eslint-plugin-react-hooks@"^4.3.0

    This can't be resolved since the version of eslint-plugin-react-hooks needed by eslint-config-airbnb (version 4.x.x, and no higher/lower) is lower than that needed by eslint-config-next (version 5.x.x and no higher/lower).

    At the time of writing eslint-config-airbnb has not been updated for 3 years, however a thread is open which touches on the upgrade to v5 of eslint-plugin-react-hooks.

    Additionally, eslint-config-airbnb-typescript does not appear to be maintained at the time of writing. A thread is also open around this.

    ESLint is in a period of transition as rule/plugin package authors now need to use a different API to be compatible with the latest version of ESLint. Hence, the conflicts.

    Your choices are:

    1. Use older versions of packages that depend on these other packages , like eslint-config-next, in order to get compatibility with older ESLint & therefore, compatibility with older packages still targeting that.
    2. Dump the airbnb stuff for now, and adopt the latest ESLint 9 fully without these rules.

    eslint-config-next explains the rational for dropping support for the older dependencies here.

    Since older ESLint is end of life, if prioritizing project health, (2) would be a likely choice. (1) Would "kick the can down the road" and potentially couple yourself to something which could well be a dead end in future.

    You will possibly find that the typescript-eslint built in presets largely achieve what you need anyway in regards to semantic concerns, potentially alongside Prettier & associated prettier eslint rules for formatting concerns.