본문 바로가기
notion/react_info

eslint 경로 에러와 절대경로 지정(.eslintimport/no-unresolved)

by 서수이 서수이 2021. 1. 29.
반응형

eslint의 경로에 경고가 뜨는 에러

eslint를 설치를 하고 메인 페이지를 작성을 했는데,경고가 나왔다.

위 이미지를 봤을 때 처럼 경고가 나온다.

  > module "/Users/xers/Desktop/local_xers/proj/github/custom_react/src/pages/MainPage"
  Unable to resolve path to module '~/pages/MainPage'.eslint import/no-unresolved

  Peek Problem (⌥F8)Quick Fix... (⌘.)

예시코드

import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';

import MainPage from '~/pages/MainPage';

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/' component={MainPage} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

경고의 내용을 보았을 때 import/no-unresolved 에 대해서 찾아보니, 나와 같은 경우가 많은 것 같았다.

우선 eslintrc 파일에 rules 옵션에 { "caseSensitive": false }를 추가한다.

module.exports = {
    ...
    "rules": {
      'import/no-unresolved': [
        'error',
        { "caseSensitive": false }
      ],    
    }
}

절대경로를 사용하는 하려는 상황에서 에러가 나타난다면 `tsconfig.json`에서 수정을 해준다. ``` "baseUrl": "./", //옵션을 추가한다. ```

import/no-unresolved 에러에 대해서 나타난다면 위 같이 해결을 할 수 있다면 좋겠다.

반응형

댓글0