React Typescript (CRA) 환경에서 Path Alias 설정하기

• 에러 발생, 그리고 해결
  • craco 라이브러리 설치
  • package.json 설정
  • tsconfig.paths.json 과 tsconfig.json

---

아아아악

에러 발생, 그리고 해결

Vue 만 사용하다가 React 환경을 적응하려니까 영 어색했었는데, Typescript 도 실무에서 거의 처음쓰는거라 시간이 좀 걸렸다.

개인적으로 ../../ 덕지덕지 경로가 붙어있는게 싫어서 평소처럼 path alias 를 설정하려했다. 그런데 컴파일 에러가 뜨면서 안되기 시작 ... 분명 tsconfig.json 에 path 를 basePath 와 paths 를 설정해놨는데 ...!

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

ㅠㅠ 기존 다른 프로젝트들은 다 됐는데 왜 안되지...? 도대체 뭐가 문제지 ...? 하면서 오랫동안 고민했지만, 시간 잡아먹을까봐 계속 미루고 (...) 놔뒀다가, 이번에 해당 포스팅(출처)을 보고 수정할 수 있게 되었다.

craco 라이브러리 설치

npm install @craco/craco
npm install -D craco-alias

craco.config.js 설정

const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: '.',
        tsConfigPath: 'tsconfig.paths.json',
        debug: false
      }
    }
  ]
}

참고로 아래에도 적어두겠지만, tsconfig.json 에 include 하도록 설정되어있기 때문에, "require 대신 import 써라" 라는 아래 메세지가 뜨면서 에러가 표시가 발생할 수 있으나, 그냥 무시하고 저장하면 된다. 컴파일시에는 전혀 문제 없음

craco.config.js
Require statement not part of import statement.

package.json 설정

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

react-scripts 스크립트 명령어 관련 명령어를 모두 craco 로 변경해야한다.

tsconfig.paths.json 과 tsconfig.json

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src"]
    }
  }
}

// tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": { /* ... */ },
  "include": [
    // ...
    "craco.config.js"
  ],
}

가장 중요한 부분!

아무리 설정을 해도 안됐던 이유가, tsconfig.json 에 단순하게 alias 설정을 추가하여도 초기화하고 무시하는 현상이 발생했던 것.

tsconfig.json 와 별개로 tsconfig.paths.json 를 추가하여, tsconfig.json 에 상속시켜주어야 한다. 반드시 이렇게 두개를 설정하고 extends 시켜주어어야 craco에서 Alias 가 먹는다 ...

우리 프로젝트는 주로 @/components/ ... 형태로 작업하는것을 좋아하기 때문에 @/* 같이 작성했다. path 형태는 프로젝트 및 선호도에 따라 자유롭게 작성하자.

만약 tsconfig.json 에 path 를 설정해도 컴파일 에러가 발생하면서 적용이 안된다면 반드시 저렇게 분리하여 craco 로 진행시켜서 진행해보시길.

컴파일 문제 없이 완성!