[트러블슈팅] Module not found: Error can't resolve '@/app'

출처 https://komodor.com/blog/troubleshooting-vs-debugging/

🚨 발생 문제

Module not found: Error can't resolve '@/app' 에러 메시지

---

🤔 문제 원인

tsconfig.json 파일에서 절대경로 설정과 관련

// 에러 발생 당시 tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "src"
  ]
}

 

절대경로 설정 관련하여 tsconfig.json 파일에 paths 옵션과 baseUrl 옵션에 대한 개념을 혼동하여 발생한 문제

 

---

💊 해결 방법

tsconfig.json의 "jsx": "react-jsx"를 "jsx": "react"로 수정 ➡️ 해결 ❌

구글링을 해보니 나와 똑같이 App.tsx의 모듈을 찾지 못했다는 에러 메시지에 대한 블로그 글을 확인할 수 있었다. tsconfig.json의 "jsx" 설정을 기본 "react-jsx"에서 "react"로 수정했더니 해결했다는 글이어서, 똑같이 수정했는데 해결되지 않았다.
 
Module not found: Error can't resolve '@/app' 제외하고도 아래에 index.tsx에서 import하는 다른 theme이나 GlobalStyle.ts도 인식하지 못한다는 메시지가 추가로 발생했지만, 결국엔 App.tsx를 인식하지 못해 발생하고 있는 문제인 것 같았다.
 
 

paths 옵션을 baseUrl 옵션으로 수정 ➡️ 해결 ✅

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src",
  },
  "include": [
    "src"
  ]
}

 
과거에 진행했던 다른 타입스크립트 리액트 프로젝트에서 절대경로 설정을 어떻게 했었나 리포지토리를 확인해보니 paths가 아닌 baseUrl로 절대경로를 설정해서 쓰고 있었다. paths와 baseUrl이 어떻게 다른지 찾아보았더니 아래의 좋은 정리글을 찾을 수 있었다.
 

타입스크립트의 경로 맵핑 (baseUrl, paths)

 
baseUrl과 paths뿐만 아니라 상대 경로, 절대 경로에 대한 설명도 자세히 나와있어 많은 도움이 됐다.
 
그런데 paths를 설정해주었을 때, index.tsx에서 import App from '@/App';에서 오류가 발생해서 import App from './App'; 이렇게도 수정해보았는데 에러가 해결되지 않았다. paths도 작동을 해야하는데 에러를 뱉는게 이상했다.
서버를 다시 껐다 켜봤어야 했나.. 그런데 워낙 tsconfig 파일 수정할때면 분명 여러번 서버 껐다 켰는데도 해결되지 않던 문제가, 시간이 지나니까 이상하게 해결되어 있다던가 그런 경우를 종종 봤다. 정확히 원인은 모르겠지만 IDE 껐다 켜고 서버 껐다 켜도 바로 반영이 안되는 경우가 있는듯 했다.
 
이미 baseUrl로 tsconfig 설정을 바꾸고 컴포넌트 import 경로도 다 수정한 상태라 뒤로 되돌릴 수가 없어서 다시 시도는 못해보고 있지만, 다음 새 프로젝트 할 때 다시 paths로 시도해봐야겠다.