Parcel이 tsconfig의 path alias를 인식하지 못하는 문제

■ 상황

Parcel-bundler를 typescript와 함께 사용하면서, 

path alias를 사용하기 위해 tsconfig 파일의 'paths' 속성을 다음과 같이 설정했다.

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

하지만 원하는 대로 동작하지 않고 계속해서 에러가 발생하는 상황.

 

■ 상세

에디터에 컴파일 에러는 발생하지 않는데 빌드 과정에서 에러가 발생하는 것을 보니,

tsconfig의 path alias 설정을 parcel은 인식하지 못해서 문제가 발생하는 듯 하다.

(tsconfig 파일은 typescript 설정 파일이니깐)

 

이에 대해, 내가 찾은 해결책은 babel의 plugin을 사용하는 것.

(tsconfig의 paths도 당연히 위와 같이 설정을 해줘야 함)

// .babelrc
{
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "@src": "./src"
        }
      }
    ]
  ],
}

 

그리고 나서 에디터를 껐다가 키고, 다시 빌드하면 잘 동작할 것.

 

■ 비고

사실 parcel에서의 설정이 아닌 babel을 이용하는 게 맞는건가 자꾸 찝찝하긴 하지만 아직까지는 방법을 찾지 못했다.

 

참고

https://github.com/parcel-bundler/parcel/issues/202