eslint

eslint import/no-unresolved tsconfig.json paths 인식 오류

Dev갱이 2024. 1. 19. 12:48
728x90

eslint.js

module.exports = {
	parser: '@typescript-eslint/parser',
	parserOptions: {
		project: 'tsconfig.json',
		tsconfigRootDir: __dirname,
		sourceType: 'module',
	},
	settings: {
		'import/resolver': {
			typescript: {
				project: './tsconfig.json',
			},
		},
	},
	plugins: ['@typescript-eslint/eslint-plugin', 'import'],
	extends: [
		'plugin:@typescript-eslint/recommended',
		'plugin:prettier/recommended',
	],
	root: true,
	env: {
		node: true,
		jest: true,
	},
	ignorePatterns: ['.eslintrc.js'],
	rules: {
		'@typescript-eslint/interface-name-prefix': 'off',
		'@typescript-eslint/explicit-function-return-type': 'off',
		'@typescript-eslint/explicit-module-boundary-types': 'off',
		'@typescript-eslint/no-explicit-any': 'off',
		'prettier/prettier': ['error', { endOfLine: 'auto' }],
		'import/no-unresolved': 'error',
		'import/order': [
			'error',
			{
				groups: [
					'builtin',
					'external',
					'internal',
					['sibling', 'parent'],
					'index',
					'unknown',
				],
				'newlines-between': 'always',
				alphabetize: {
					order: 'asc',
					caseInsensitive: true,
				},
			},
		],
	},
};

 

NestJS 프로젝트 구조가

backend/

      /api

      /common

      /constants

      /models

      /types

      /utils

app.module.ts

main.ts

 

Unable to resolve path to module '@/common/guards/accessToken.guard'. eslintimport/no-unresolved

 

이러한 에러가 발생했고, eslint rules에서 설정한 'import/no-unresolved': 'error', 해당 룰의 에러인것 같고 

tsconfig.js에서 absolute path 를 찾지 못하는 에러 같았다.

 

구글링 해본 결과

https://github.com/import-js/eslint-plugin-import/issues/1485

 

[import/no-unresolved] when using with typescript "baseUrl" and "paths" option · Issue #1485 · import-js/eslint-plugin-import

Repro tree <root> ├── src │ ├── index.ts │ └── foo.ts ├── tsconfig.json ├── .eslintrc.js ... └── package.json tsconfig.json Other options are omiited for brevity. { "compilerOptions": { "baseUrl": ...

github.com

settings: {
		'import/resolver': {
			typescript: {
				project: './tsconfig.json',
			},
		},
	},

 

해당부분을 잘 가져오지 못하는것 같았다.

 

npm i -D eslint-import-resolver-typescript
npm i -D eslint-plugin-import

 

두가지를 설치 해보았는데도, 딱히 해결되지 않았다.

 

결론적으로 해결한 방법으로는

 

docker-compose 환경에서 개발을 하다보니

 

forntend

nginx

backend

docker-compose-dev-yml

해당 프론트와 백엔드 nginx가 있는 프로젝트 루트 경로에서 열어서 작업 하다보니 (모노레포는 아님) backend가 루트 경로가 아닌걸로 인식 하는것 같았다.

 

즉 backend 프로젝트 경로로 열게 되면 해당 에러가 발생하지 않는다...

728x90