Are you wondering about the correct way to install eslint-config-airbnb without encountering any "UNMET PEER DEPENDENCY"

➜  beslint git:(master) ✗ eslint -v
    v3.15.0
➜  beslint git:(master) ✗ npm install -g eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react

/Users/next/.nvm/versions/node/v7.5.0/lib
├── UNMET PEER DEPENDENCY eslint@^3.15.0
├─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c796f70757268317f73727a757b317d756e7e727e5c2d28322d322c">[email protected]</a>
│ └── UNMET PEER DEPENDENCY eslint@^3.15.0
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e3f5eaefe8f2abf6eaf3e1efe8abefebf6e9f4f2c6b4a8b4a8b6">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294c5a4540475d0459455c4e404704435a510448181850691d07190719">[email protected]</a>
└── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4722342b2e29336a372b32202e296a352226243307716976776977">[email protected]</a>

npm WARN <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f2e4fbfef9e3baf4f8f9f1fef0baf6fee5f5f9f5d7a6a3b9a6b9a7">[email protected]</a> requires a peer of eslint@^3.15.0 but none was installed.
npm WARN <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8feafce3e6e1fba2ece0e1e9e6e8a2eee6fdede1eda2edeefceacfbebea1bea1bf">[email protected]</a> requires a peer of eslint@^3.15.0 but none was installed.
npm WARN <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5633253a3f38227b263a23313f387b3f3b26392422166478647866">[email protected]</a> requires a peer of <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492c3a2520273d097b6731">[email protected]</a> - 3.x but none was installed.
npm WARN <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6005130c090e144d100c1507090e4d0a13184d0151511920544e504e50">[email protected]</a> requires a peer of eslint@^2.10.2 || 3.x but none was installed.
npm WARN <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7316001f1a1d075e031f06141a1d5e011612100733455d42435d43">[email protected]</a> requires a peer of eslint@^2.0.0 || ^3.0.0 but none was installed.
➜  beslint git:(master) ✗
  • I tried to install globally
  • I utilized nvm to install node 7.5.0, and then installed eslint globally.
  • Upon attempting to install eslint-config-airbnb globally,
  • An error stating UNMET PEER DEPENDENCY appeared

Answer №1

If you're looking to streamline your ESLint setup, consider adding eslint-config-airbnb-bundle to your project. This comprehensive package includes an unaltered Airbnb style guide config bundled with ESLint for added convenience and eliminates any unmet peer dependency warnings that may arise during installation. For a hassle-free experience, you can also choose to install it globally:

npm i -g eslint-config-airbnb-bundle

To explore more options based on your coding needs, check out the following links:

Airbnb only: https://www.npmjs.com/package/eslint-config-airbnb-bundle

Airbnb + Standard: https://www.npmjs.com/package/eslint-config-airbnb-standard

Answer №2

Encountered a similar issue, but managed to find a solution that I believe is worth sharing.

If you need to install the correct versions of each package related to eslint config, simply execute the following command:

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

By running the above command, you will receive a list of exact peer dependencies as shown below:

For example, the outputs at the time of this response indicate:

{ eslint: '^3.19.0 || ^4.3.0',
  'eslint-plugin-jsx-a11y': '^5.1.1',
  'eslint-plugin-import': '^2.7.0',
  'eslint-plugin-react': '^7.1.0' 
}

This output provides a clear idea of which dependencies to install for the current (latest build).

For Linux/OSX users who want to install all dependencies at once, use the following command:

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

For more information, click here.

Answer №3

Visit this link for more information

Run the command: npx install-peerdeps --dev eslint-config-airbnb

Answer №4

Why not consider avoiding global installations for everything? Give this a try instead:

npm install --save-dev eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react

Answer №5

After deleting the node modules folder using the command rm -rf node_modules/ and then running npm install again, everything started working perfectly!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transitioning the height of a Vue component when switching routes

I've been struggling to implement a transition slide effect on my hero section. The height of the hero is set to 100vh on the homepage and half of that on other pages. Despite trying various methods, I haven't been able to get it working properly ...

Leveraging traditional code methods within AngularJs

With a multitude of older javascript functions for sign up/sign in operations through parse.com, I am considering integrating AngularJS for improved routing and other advantages. Is it feasible to establish an angular stack and encapsulate these functions ...

How can I save or export an image file containing HTML content?

Currently, I am working on a project where I am generating dynamic HTML content. My goal is to be able to export or save this HTML content as an image file using PHP, jQuery, and JavaScript (or any other method if applicable). Can anyone help with the im ...

Error: Trying to access the 'push' method of an undefined object of useHistory

import React from "react"; import { Route, Switch, HashRouter, useHistory } from "react-router-dom"; import Home from "../pages/home/HomeComponent"; import Splash from "../pages/splash/Splash"; import Education from ...

Mastering the use of gl Scissor is essential for effectively implementing popups in your

I am attempting to implement a pop-up view on top of the current webGL view. My strategy is as follows: Whenever I need to display a popup, I create a scissorRect and begin rendering the popup scene onto it. I was hoping that the content of the previous s ...

Run a JavaScript function on a webpage loaded through an AJAX response

I need to trigger a function through an AJAX request sent from the server. The function itself is not located on the calling page. Here's an example of what I am trying to achieve: 1. PHP script being called: <script> function execute() { ...

Encountered an issue while installing npm dependencies for webtorrent: "Error: Unable to locate 'fs' - Fountain-Js (Yeoman)"

Having trouble installing an NPM dependency in my code. Successfully installed the module using this command: npm install --save webtorrent This is the content of my package.json file: ./package.json { "dependencies": { "angular": "^1.5.0" ...

How can you customize the output buffer size (known as highWaterMark) for child_process.spawn() in node.js?

I'm currently working on adjusting the buffer size (highWaterMark) for the stdout coming from a child_process.spawn() function, but I'm encountering difficulties in achieving this successfully. The code snippet provided below demonstrates my obje ...

Display toggle malfunctioning when switching tabs

I am currently working on implementing a search function with tabbed features. Everything seems to be displaying correctly without any errors. However, the issue arises when I try to click on any tab in order to show or hide specific content from other tab ...

What is the best way to toggle a d3 svg overlay using a leaflet layer control?

I am looking for a solution to place 3 d3 svgs on a leaflet map and control them as easily as leaflet layers. Check out this code example, which works but is not ideal. The key part is from line 75 onwards, where I create a custom layer control linked to ...

Steps for setting up type-graphql in your projectNeed help with

Trying to include this in my TypeScript project: import { ID } from "type-graphql"; Encountered an issue when attempting to install type-graphql. Received a 404 error stating that it could not be found in the npm registry. npm install @types/type-graphq ...

Unable to create selected buttons in Vue.js

I'm having trouble creating buttons that can select all options when clicking on either size or color. The buttons aren't showing up at all. Can someone help me identify the issue? I've attempted various solutions but none seem to work. Any ...

What is the frequency of 'progressEvents' occurring while uploading files via ajax?

Having recently started using ajax uploading, I wanted to include a progress bar to display the uploading process. I implemented a registration function for progressEvent, but unfortunately, it only ran once. This means that my progress bar was not functi ...

Deleting data from Firebase in Angular can be easily done using the AngularFire library. By

I am attempting to remove specific values from my Firebase database. I need to delete this entry from Firebase: https://i.stack.imgur.com/CAUHX.png So far, I have tried using a button to trigger the delete function like this: <div class="single-bfunc ...

Are there any cross-platform inter-process communication APIs available in both C++ and Javascript?

In the process of developing an app, I am faced with the challenge of passing messages between a C++ application and a Javascript web app. While I have experience writing sockets code in both languages when required, I am now looking for a higher-level me ...

Unable to access remote video streams by directly modifying URL parameters

Recently, I delved into experimenting with the straightforward mediasoup demo available at: https://github.com/Dirvann/mediasoup-sfu-webrtc-video-rooms After setting up the demo, everything seemed to be functioning correctly. The initial task on my agend ...

What is the reasoning behind exporting it in this manner in the index file?

As I was going through a tutorial about nests, there was this step where the instructor made a folder named "dtos" and inside it, they created two dto files (create-user.dto and edit-user.dto). Following that, they also added an index file in the same fold ...

Sending blank data using ExpressJS ajax feature

I am encountering an issue while trying to send JSON data to my server as the POST requests are coming through with empty bodies. Below is the TypeScript code I am using on the front end: function sendData() : void { console.log("Sending data..."); var na ...

Combining AngularJS with Servlets: A Seamless Integration

I am attempting to retrieve a JSON object from a servlet by calling a function through a link in my HTML code. Below is the HTML link that calls the fTest function: <td><a href="" ng-controller="minaplantaCtrl" ng-click="fTest(x.id_camion_descar ...

How the logo's placement shifts while zooming out (using CSS and Angular 4+)

I am facing an issue with my navbar that includes a logo (MostafaOmar) which shifts position when zoomed out. If you try zooming to 70%, you will notice the logo's position changes as well. Is there a way to make it stay in place at 100% zoom? Here ...