NextJs+eslint 에러 해결, Cannot find name "div", Replace ....와 Insert .., Cannot find module 에러, 에러 메시지 미리 보기(Error Lens 사용)

# 시작

넥스트로 프로젝트 환경을 세팅하면서 typescript와 eslint, prettier를 한꺼번에 적용해보려고 하니 리액트 프로젝트 세팅할 때 겪었던 것처럼 에러가 여럿 눈에 보였다. eslint의 rules를 변경하면서 걸린 시간이 5시간은 족히 넘을 것 같다. 여기서는 구글링해서 따라하다가 막혔던 세 문제를 해결하고 글로 남긴다.

Next + eslint + prettier + typescript 환경을 이용해보려는 사람들은 참고했으면 좋겠다.

아래 사진들을 보면 코드 위에 에러 메시지들이 바로 띄워져있는 것을 볼 수 있다. 다른 사람들은 이렇게 바로 에러가 보이지 않을 수도 있는데 vscode의 익스텐션중에서 "Error Lens"라는 익스텐션을 사용하고 있다는 점을 참고하길 바란다.

# 1

Cannot find name "div" 에러

Nextjs로 프로젝트를 구성하고 나서 eslint와 prettier를 적용하려는 사람들 중에 아래와 같은 문제가 나타난 사람들이 있을 것이다.

리액트였다면 더 빨리 해결했을 것 같은데 뭔가 다른 설정을 건드려야되나 해서 더 오래 헤맸던 것 같다. 생각해보니 return문 내에서 jsx문법을 사용하고 있는데 옆의 파일을 보면 page2.ts라고 되어있다. 이것을 파일의 확장자를 "tsx"로 변경하면 해결된다.

아래는 참고한 사이트다.

stackoverflow.com/questions/51158080/typescript-cannot-find-name-errors-in-react-components

# 2

Replace `....`와 Insert `..` 에러

eslint를 적용하자마자 파일에서 에러들이 엄청 보인다.

이 에러는 prettier의 들여쓰기 제한과 eslint의 들여쓰기 제한이 서로 맞지 않아서 일어나는 문제였다. eslint의 configuration file(나는 .eslintrc.json 파일로 쓰고 있다.)에 rules에서 어떤 속성을 꺼주어야 된다는 것을 알 수 있었다.

{
  "root": true,
 "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "react",
    "react-hooks",
    "@typescript-eslint",
    "prettier"
  ],
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "project": "./tsconfig.json",
    "sourceType": "module",
    "ecmaVersion": 2018,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "import/no-unresolved": 0,
    "react/jsx-filename-extension": [
      2,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "react/jsx-indent": [2, "tab"],
    "react/jsx-indent-props": [2, "tab"],
    "@typescript-eslint/no-inferrable-types": "off",
    "@typescript-eslint/interface-name-prefix": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "indent" : ["none",0],
    "no-underscore-dangle": 0
  },
  "overrides": [
    {
      "files": ["**/*.tsx"],
      "rules": {
        "react/prop-types": "off"
      }
    }
  ]
}

위 코드처럼 rules : { ... }안에

    "indent" : ["none",0],

를 넣어주자. 깔끔하게 해결되었다.

# 3

Cannot find module 에러

Next에서는 상대경로가 불가능하다. 공식 문서를 보면 알 수 있는데 나는 넥스트를 다른 블로그에서 따라하다보니 file-loader를 통해 웹팩 설정으로 상대경로를 사용할 수 있었다. eslint를 적용하고 나니 여기서 에러가 발생했다.

이것은 임시방편일지도 모르겠다. 쓰던 file-loader를 쓰는 게 아니라 공식문서에 맞춰 Url path를 사용하면 eslint 에러를 없앨 수 있다.(더 좋은 방식이 있으면 댓글 부탁드립니다.) 해결한 방식은 아래와 같다. 임포트문은 없고 src에 바로 "/file.png"로 지정해주었다.