Eslint import/no-extraneous-dependencies error on path

Question

I am building a React app with Eslint setup. In my app, I am using GraphQL @apollo/client dependency.

When I tried to do import { setContext } from '@apollo/client/link/context'

I got an eslint error of

'@apollo/client/link/context' should be listed in the project's dependencies. Run 'npm i -S @apollo/client/link/context' to add it  import/no-extraneous-dependencies

I do have '@apollo/client' dependency in my package.json. And import from '@apollo/client/link/context' is the proper way to get 'setContext' according to Apollo documentation.

Seems like import/no-extreaneous-dependencies is not recognize the nested path from '@apollo/client'.

When I set "import/no-extraneous-dependencies": 0 in my .eslintrc.js rules, it will work fine. But for a proper solution, instead of just turning off the eslint checking, I am assuming that I probably need to set something up with .eslintrc.js rules.

What other set ups should I write for my rules in my .eslintrc.js in this case for properly solving the problem?

my package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.3.19",
    "@auth0/auth0-react": "^1.4.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "eslint": "^7.26.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "graphql": "^15.5.0",
    "react": "^17.0.2",
    "react-big-calendar": "^0.33.3",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {}
}

and my .eslintrc.js file:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    'no-console': 1,
    'react/prop-types': 0,
    'no-underscore-dangle': ['error', { allow: ['__raw'] }],
  },
  overrides: [
    {
      files: ['**/*.test.jsx'],
      env: { jest: true },
    },
  ],
};

Riorsson

Answer 1

I had the same issue with rxjs/operators as demonstrated in question 67587146. A solution is to add the path to the core modules setting in .eslintrc.js. This solution isn't great, but it's better than disabling the rule.

settings: {
  'import/core-modules': ['@apollo/client/link/context']
}

Jipijapa

Saved my day, thanks! May I ask why it isn't great? – Varlet

The rule should be able to resolve nested packages. This answer can provide a solution until this issue is fixed and you are able to upgrade. – Jipijapa

Answer 2

A few others are finding this issue in a recent version of eslint-plugin-import, but there was a fix in v2.23.4, to the package resolution algorithm.

npm update eslint-plugin-import

Read more about the issue

Incurrence

im in version 2.23.4 of eslint-plugin-import and still get this error. for me the fix was the above answer: https://mcmap.net/q/1496830/-eslint-import-no-extraneous-dependencies-error-on-path – Charlotte

The above answer is a workaround as the author writes, but I'm glad that helps. I'd try updating the import package to the latest version as well since the plugin is improved all of the time. @Charlotte – Incurrence