`import/no-extraneous-dependencies` does not work as expected

[layershifter]

Problem

We are using import/no-extraneous-dependencies in our ESLint setup:

fluentui/packages/eslint-plugin/src/configs/react.js

Line 105 in 5951760

'import/no-extraneous-dependencies': ['error', { devDependencies: false }],

The idea is that it will save us from extraneous dependencies. This works only for third party dependencies.

Sample issue

We have @fluentui/react-image package and it uses @fluentui/react-theme package:

fluentui/packages/react-image/src/components/Image/useImageStyles.ts

Line 2 in 5951760

import { tokens } from '@fluentui/react-theme';

But @fluentui/react-theme is not declared as a dependency in package.json of @fluentui/react-image:

fluentui/packages/react-image/package.json

Lines 45 to 49 in 5951760

	"dependencies": {
	"@griffel/react": "1.0.0",
	"@fluentui/react-utilities": "9.0.0-rc.1",
	"tslib": "^2.1.0"
	},

[Hotell]

The actual culprit is probably following configuration

fluentui/packages/eslint-plugin/src/configs/react.js

Lines 33 to 39 in 5951760

	'import/resolver': {
	typescript: {
	// always try to resolve types under `<root>@types` directory
	alwaysTryTypes: true,
	// NOTE: For packages without a tsconfig.json, override with "project": "../../tsconfig.json"
	project: ['./tsconfig.json', path.join(gitRoot, 'tsconfig.json')],
	},

this magically resolves tsconfigs and make it "understand" TS path aliases thus creating inconsistent behaviour you ran into.

I'll try to come up with different approach (removing the import/resolver magic).

For better context:

The general issue is that typescript-eslint doesn't support Solution style configs/project references, so for those reasons we'll need to specify manually our particular tsconfigs as project property within eslint.json (tsconfig.lib.json , tsconfig.spec.json , e2e/tsconfig.json, .storybook/tsconfig.json )