eslint is designed to not handle multiple package.json files

There are two package.json files in my project

root folder

└ app ---- /public
         └ /styles
         └ /src
         └ package.json
         └ eslintrc.json
         └ webpack.config.js

└ server - /something
         └ /something

└ package.json
└ ...etc

An error is being shown in atom editor for linting

import React from 'react';
// 'react' should be listed in the project's dependencies. Run 'npm i -S react' to add it (import/no-extraneous-dependencies)

In package.json

"dependencies": {
  "@types/chart.js": "^2.6.8",
  "@types/react": "^16.0.10",
  "@types/react-dom": "^16.0.1",
  "bootstrap": "^4.0.0-beta",
  "chart.js": "2.6.0",
  "font-awesome": "^4.7.0",
  "history": "4.7.2",
  "jwt-decode": "^2.2.0",
  "prop-types": "^15.6.0",
  "react": "^15.6.1",
  "react-chartjs-2": "2.6.1",
  "react-dom": "^15.6.1",
  "react-router-dom": "4.2.2",
  "react-transition-group": "^1.2.0",
  "reactstrap": "^4.8.0",
  "simple-line-icons": "^2.4.1"
},

and in eslintrc.json

module.exports = {
  "extends": "airbnb",

  "env": {
     "browser": true,
     "node": true
   },

  "rules": {
     "no-mixed-operators": [2, { "allowSamePrecedence": true }],
     "react/no-find-dom-node": 1,
     "react/no-string-refs": 1,
     "react/no-unused-prop-types": 1, // TODO: enable
     "jsx-a11y/no-static-element-interactions": 1, // TODO: enable
     "no-plusplus": 1, // TODO: enable
     "no-console": 0, // TODO: enable
     "no-alert": 0,
     "max-len": ["error", 120],
     "no-underscore-dangle": ["error", { "allow": ["_isMounted"] }],
     "import/no-extraneous-dependencies": ["error", {"devDependencies": true}],
  },
};

I believe that eslint is recognizing the package.json in the root folder as standard. But I want it to ignore the package.json in the root folder and recognize the one in the src folder.

How can I achieve this?

Answer №1

While this may seem unrelated, one thing to consider is renaming your ESLint configuration file from eslintrc.json to .eslintrc.json (with a dot in front of the name). This small change might not be the cause of the issue, but it could potentially impact hierarchical resolution. For more information on different configuration extension formats, check out: https://eslint.org/docs/user-guide/configuring#configuration-file-formats.

Regarding the

import/no-extraneous-dependencies
rule, you might want to explore the packageDir configuration option. According to the documentation:

Another important option to note is packageDir, which allows you to specify the path to the folder containing the package.json file relative to the current working directory.

"import/no-extraneous-dependencies": ["error", {"packageDir": './some-dir/'}]

I hope this information proves useful!

Source:

https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md

Answer №2

I successfully tackled this issue on my own.

Inserted the line "packageDir": "./src" into .eslintrc.json

"rules" : {
   ""import/no-extraneous-dependencies": ["error", {"devDependencies": true, "packageDir": "./src"}],

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

What is the best way to incorporate additional data into a TypeScript object that is structured as JSON?

I'm exploring ways to add more elements to an object, but I'm uncertain about the process. My attempts to push data into the object have been unsuccessful. people = [{ name: 'robert', year: 1993 }]; //I aim to achieve this peopl ...

Experience Markdown's Single Input Update Feature

I have recently developed a Markdown editor using Vue, similar to the examples found on Vue's website. However, my query is more related to implementation rather than Vue itself. Therefore, I am open to suggestions that do not necessarily involve Vue. ...

Tips for obtaining the correct Javascript output for the number pyramid

I'm currently in the process of creating a half pyramid of numbers, but I'm facing an issue with getting the output to show the total for each line while maintaining everything except the * sign between the numbers. If anyone is able to offer som ...

JavaScript error - Property value is not valid

When I use IE 6/7/8, I encounter a JavaScript error message. The problematic line of code reads as follows: document.getElementById('all').style.backgroundColor = color; The specific error reported in IE 6/7/8 is as follows: Invalid property ...

"Utilizing Express in combination with Vue: A beginner's guide

Just delving into the world of Node js, Express and Vue. I've created a pomodoro timer website using vue (sans vue-app/vue-cli) that I'm eager to deploy on Heroku. The site runs flawlessly on my local machine with Webstorm IDE, but I'm stru ...

Copying an instance in JavaScript - The copy method

Is there a way to easily duplicate all properties and methods of a class instance? class A { get prop1() { return 1; } get prop2() { return 2; } doStuff() { return this.prop1 + this.prop2; } } class B extends A { get prop1() { ...

Implement a transformation on the API endpoint's JSON data to prepare it for display in a React

I'm currently developing a React application and have created a component to display tabular data. The API endpoint I am calling returns data in the following format: { "bitcoin": { "usd": 48904, "usd_market_cap": 9252 ...

Neglectful TypeScript null checks overlooking array.length verification

When TypeScript is compiled with strict null checks, the code snippet below does not pass type checking even though it appears to be correct: const arr: number[] = [1, 2, 3] const f = (n: number) => { } while (arr.length) { f(arr.pop()) } The comp ...

What is the best method to incorporate a JavaScript object key's value into CSS styling?

I am currently working on a project in React where I'm iterating over an array of objects and displaying each object in its own card on the screen. Each object in the array has a unique hex color property, and my goal is to dynamically set the font co ...

How can I iterate through multiple rows in JavaScript?

Feeling stuck, the simple yet dreaded for loop has become my nemesis and I could really use some guidance. Currently, I have a Google sheet with 3 rows (excluding headers) and 8 columns. As users input data via a web app, the number of rows will dynamicall ...

Updating the URL-path in the Angular file-upload module: A step-by-step guide

When working on my project, I came across a helpful module that I use from https://github.com/nervgh/angular-file-upload. It functions well when the URL is set during initialization. However, I encountered an issue when trying to change the URL after the ...

What is causing package dependencies to malfunction even after being properly installed?

After creating a package with react-native-webview as a dependency and publishing it to npm, I followed these steps: npm init npm link react-native-webview npm install react-native-webview npm publish Fortunately, everything went smoothly and my package ...

PHP - The variable $_SESSION['var1'] has not been set within the index.php file

My index.php page is causing me some confusion. <?php session_start(); if (!isset($_SESSION['var1'])) { echo "session not started..."; die(); } else { echo "session started"; die(); } ?> Within the page, there is a login form that connec ...

Updating the state of an object within a mapping function

I've been struggling with this issue for two days now. Despite my efforts to find a solution online, I am still stuck and starting to believe that I might be missing something. The main functionality of the app is to click a button and watch an apple ...

What are the steps for implementing Node 9 using nvm?

Struggling with the installation process, willing to try manual installation with assistance. Just so you know, my ultimate aim is to set up mobius-network-js in order to start developing a Mobius DApp. ...

Issue: setAllcategories function not found

Currently engaged in using Next.js and Sanity as a Headless CMS for the backend. In the code snippet below, I have created a Categories.js file in the components folder to fetch some data. My objective is to extract all the titles from the category Array. ...

What are the advantages of utilizing peer dependencies over regular dependencies post npm 7?

Imagine this scenario: You are currently working on a project called cool-app and it relies on both react and cool-package: "dependencies": { "react": "^16.0.0", "cool-package": "^1.0.0" } Unfortunatel ...

Tips on obtaining outcome by invoking a route outside of app.js

Within my file containing the request methods, the structure appears as follows: article.js router .route("/") .all((req, res) => { console.log("this should happen for any call to the article route"); }) .get((req, res) = ...

Are promises perpetually in a state of limbo? (incorrect format

As a newcomer to node.js, express, and ES6, I am learning the ropes and trying to write cleaner, more efficient code using ES6 functions and promises. One issue I'm facing is with inherited functions and values, particularly next(). Here's the co ...

Webpack has no issues building the files, however, the JavaScript fails to execute during runtime

I recently upgraded from Webpack v4 to v5, following the documentation and addressing any deprecation messages from the CLI. The build was successful, but when testing the application, I noticed that the JavaScript wasn't running and no errors were be ...