What is the reason behind not requiring the installation of eslint plugins in our end user app in order to utilize @vercel/style-guide?

Can anyone shed some light on the plugin modules resolution in ESLint when using pnpm? Despite researching numerous articles and answers online on this topic, I still find myself puzzled.

I have delved into pnpm's node_modules structure and ESLint's resolution algorithms, yet I cannot grasp why there is no need to install the plugins used by the @vercel/style-guide module behind the scenes.

The ESLint documentation provides insights on plugin resolution:

  1. Plugins are resolved relative to the config file. Simply put, ESLint loads the plugin as if a user were to run 

    require('eslint-plugin-pluginname')
    in the config file.

  2. Plugins in the base configuration (loaded by extends setting) are relative to the derived config file. For instance, if ./.eslintrc contains extends: ["foo"] and eslint-config-foo includes plugins: ["bar"], ESLint locates the eslint-plugin-bar from the ./node_modules/ directory instead of 

    ./node_modules/eslint-config-foo/node_modules/
    or ancestor directories. This means every plugin in the config file and base configurations is uniquely resolved.

@vercel/style-guide offers various ESLint configs such as the react.js config, which further utilizes 

extend: plugin:eslint-plugin-react
, containing plugin: { react }.

Given this information, one would assume that when our application extends @vercel/style-guide/react, it should be essential to install the plugins it relies on, like eslint-plugin-react, directly as a dependency of the end-user app.

Surprisingly, my attempt to do so proved unnecessary. Why is that? What am I overlooking concerning the resolution of these plugins?

javascripteslintverceleslint-plugin-react

Answer №1

I discovered the reason it functions properly without manually hoisting those packages.

The solution lies in pnpm's default setting for public-hoist-pattern, which is:

['*eslint*', '*prettier*']

It's essential not to override this setting. If alterations are made, remember to include the defaults as well. For example:

public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*
public-hoist-pattern[]=*storybook*

UPDATE

I have learned that @vercel/style-guide utilizes a community package that alters how ESLint resolves plugins, making them no longer resolve from the derived config, but from where the plugin is explicitly mentioned.

The Vercel team provided clarification here: https://github.com/vercel/style-guide/issues/86#issuecomment-1924675205

The package: https://www.npmjs.com/package/@rushstack/eslint-patch

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

My React project is altering the direction of my image

Below is the code snippet used to retrieve the user's favorite products import React, { useEffect, useState } from "react"; import { Pagination, Row } from "react-bootstrap"; import { useDispatch, useSelector } from "react-red ...

javascriptnode.jsreactjsfrontendbackend

Executing Automated HTTP Calls

Working with a team that is tasked with manually filling out numerous web forms to add users to their company's database can be quite tedious. I have experience creating web automation scripts using VBScript, Java (utilizing Selenium WebDriver), and i ...

javascriptjavapythonvbscriptwebautomation

Tips for extracting the team member field value, which is a classification in Sitefinity 12 web services, through the use of OData and JavaScript

Utilizing ajax to retrieve data from web services in sitefinity, I have been able to successfully retrieve team member information using this specific apiURL: localhost/api/lawyerswebservice/teammembers?$expand=RelatedTeam,PrimaryImage; However, I have e ...

javascriptajaxweb-servicesodatasitefinity

Verifying the accessibility of a website using JQuery/Javascript

I am attempting to use JavaScript to ping a website and display the result. Unfortunately, I have not had any success with this JSFiddle: https://jsfiddle.net/yyjowtru/ Although I believe I am close to achieving the desired outcome, changing the URL in t ...

javascriptjqueryhtml

What is causing the repetition of values in the output from my .ajax() request?

I'm feeling lost with my code snippet. I am attempting to display values from a json request using .ajax(). Here is the code causing trouble: $.each(posts, function(k, v){ $("section ul").append("<li><p>" + v.webTitle + "</p>&l ...

javascriptjqueryjsonajax

Verify the inheritance of prototype, not the individual instance

Assume I have: function Pet(){} Pet.prototype.breathe = function(){} And function Cat(){} Afterwards, I execute: Cat.prototype = Object.create(Pet.prototype) Cat.prototype.purr = function(){} I am aware that var cat = new Cat() console.log(cat inst ...

javascriptinheritanceprototypal-inheritance

Tic-Tac-Toe: The square's value stays unchangeable

Currently, I am working on creating a tic-tac-toe game using pure vanilla Javascript, so I am aiming to keep it as simple as possible. I have run into an issue and need some guidance. The main requirement is that once a square has been clicked and filled ...

javascript

Error encountered in Vercel application with graphql-codegen endpoint: No GraphQL type definitions found for the specified pointers

When loading my GraphQL schema, I do it like this: const schema = loadSchemaSync('./src/graphql/server/schema/*.gql', { loaders: [new GraphQLFileLoader()], }) Everything works fine on my local environment. However, when deploying to Vercel, I ...

graphqlnext.jsvercelgraphql-codegen

Incorporating Ruby on Rails tag within JavaScript

Within my html.erb file, there is an HTML button. This button is responsible for generating HTML controls and appending them to a table. Previously, everything worked smoothly without any Ruby on Rails script involved. However, now I have integrated a sele ...

javascriptjqueryruby-on-rails

Several mistakes occurred involving auth0, react, apollo, babel, and webpack

I seem to be facing some challenges while trying to integrate auth0 into my project. Every time I fix one issue, another one pops up and it's always the same trio of errors: -require is not a function -window is not defined -missing class properties ...

javascriptreactjsexpressauth0apollo

Once the data in the React context has been updated, the next step is to trigger a re-render of the

In my React application, I have implemented a system where certain components will display based on whether the user is logged in or not. To ensure this state is shared throughout the entire application, I created a context file called AuthProvider: import ...

javascriptnode.jsreactjsaxiosreact-context

Obtain the text content of a WebElement using the Selenium Driver in JavaScript

Is there a way to verify if the element I've selected by its id has the expected text content? var driver = require('selenium-webdriver'); var By = driver.By; var elem = this.driver.findElement(By.id('my_id')); assert.equal(elem. ...

javascriptselenium-webdriver

What is the method for obtaining the file extension of an image using a URL?

I am currently developing a react native application that retrieves images from URLs and saves them on the local device. const findExtension = (filename) => { return /[.]/.exec(filename) ? /[^.]+$/.exec(filename) : undefined; }; The code snippet abov ...

javascriptreactjsimagereact-native

Acquiring MySQL information and storing it in a variable array

Currently, I am retrieving data from MySQL with $username and $chance. The data contains two usernames but only the first one is being loaded. var data = [ { "name" : "<?php echo $username; ?>", "hvalue" : <?php echo $chan ...

javascriptphpjquerymysql

A JavaScriptSerializer counterpart to XmlAttribute/XmlElement

Is there a similar Attribute that can be used on object Properties within a .NET Class to achieve the same functionality as XmlElement or XmlAttribute? [XmlRoot("objects")] public class MyObjects: List<MyObject> { } [XmlRoot("object")] public class ...

.netjavascriptserialization

What are the steps for implementing pytesseract on a node.js server?

While working on my node.js server, I encountered an issue when using child-process to send an image to a python script. Although I can successfully read the image in the python script, I encounter an error when attempting to convert it to text using pytes ...

javascriptpythonnode.jsreactjspython-tesseract

I seem to be encountering an issue with my captcha function on the registration form

I am currently working on a registration form where user data will be stored in the database only if the correct captcha code is entered. If the captcha code is incorrect, it should display an error message. However, I am facing an issue where even if the ...

javascriptphpjqueryhtmlmysql

What is the best way to acquire the opposing attribute?

There is a specific object I am working with that will always have 2 properties, never more. The object looks like this: var people = { 'John': { ... }, 'Peter': { ... } } In addition, there is a variable var name = 'John&ap ...

javascript

Building an Ionic Angular application that converts milliseconds to DateTime values retrieved from local storage

I have a mobile app built using Ionic framework where I retrieve data from local storage. My goal is to convert the milliseconds into a readable date format. I have tried the code below but it's not giving me the desired output. Can you please point ...

javascripthtmlangularjsionic-framework

Expanding the MatBottomSheet's Width: A Guide

The CSS provided above is specifically for increasing the height of an element, but not its width: .mat-bottom-sheet-container { min-height: 100vh; min-width: 100vw; margin-top: 80px; } Does anyone have a solution for expanding the width of MatBott ...

javascripthtmlcssangularangular-material