Question 207837 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to use airbnb style guide with NextJS?

I would like to use the airbnb style guide with my NextJS 13.4.9 project. When creating an NextJS app, one is asked about enable ESlint. I imagine saying "yes" to this is the recommended way. This allows one to npm run lint or npx next lint.

This simple guide explains how to install airbnb style guide, but it gives conflict with the latest version of NextJS. See below.

According to the NextJS doc on ESLint, eslint-config-next includes

  • eslint-plugin-react
  • eslint-plugin-react-hooks
  • eslint-plugin-next

So it would be temping to uninstall the eslint-config-next package, and then install these packages myself to get versions that don’t conflict.

Question

If I do this, will I then lose some NextJS specific linting?

Or what is the recommended way to add airbnb style guide to the next lint?

$ npm install -D eslint-config-airbnb 

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint-plugin-react-hooks
npm ERR!   eslint-plugin-react-hooks@"5.0.0-canary-7118f5dd7-20230705" from [email protected]
npm ERR!   node_modules/eslint-config-next
npm ERR!     eslint-config-next@"13.4.9" 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: [email protected]
npm ERR! node_modules/eslint-plugin-react-hooks
npm ERR!   peer eslint-plugin-react-hooks@"^4.3.0" from [email protected]
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.
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Uninstalling the eslint packages from NextJS, and then install them again solved dependency problem.

    The ones that came with NextJS are not official versions, so that must be why the conflict arises.


  2. 0

    you need to peerDependency install first

    you can check peerDependencies by code on below

    $ npm info "eslint-config-airbnb@latest" peerDependencies
{
  eslint: '^7.32.0 || ^8.2.0',
  'eslint-plugin-import': '^2.25.3',
  'eslint-plugin-jsx-a11y': '^6.5.1',
  'eslint-plugin-react': '^7.28.0',
  'eslint-plugin-react-hooks': '^4.3.0'
}

    install cli

     yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

    I hope my answer helps you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search