[TS] CRA에서 tsconfig paths로 절대경로 설정하기 (react-app-alias)

 

 

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["./components/*"],
      "@assets/*": ["./assets/*"],
      "@styles/*": ["./styles/*"],
      "@contexts/*": ["./contexts/*"],
      "@hooks/*": ["./hooks/*"],
      "@utils/*": ["./utils/*"]
    }
  }
}

import Header from '@components/Header';

원래 위와 같이 tsconfig에 baseUrl과 paths 속성으로 절대 경로를 설정할 수 있다. 그러나 CRA로 React 환경을 구축했을 때에는 tsconfig에서 paths를 설정했는데도 경로를 인식하지 못한다. 이러한 현상은 CRA 내부의 Webpack 설정 때문에 tsconfig를 변경한 내용이 적용되지 않고 초기에 생성된 tsconfig 설정으로 돌아가기 때문이다.

 

CRA는 Webpack 설정을 숨겨놓고 있으며, 이를 직접 수정하기 위해서는 eject 명령어(npm run eject 또는 yarn eject)를 쳐야 한다. 그러나 CRA는 한 번 eject하면 다시 되돌릴 수 없다. 따라서 가급적이면 eject를 삼가는 것이 좋은데, eject 하지 않고도 Webpack 등 CRA 내부에 숨겨진 설정을 변경할 수 있도록 해주는 라이브러리 중에 craco가 있다. craco를 사용해서 tsconfig의 절대경로 설정을 대신 할 수 있다.

 

$ npm i @craco/craco
$ npm i -D craco-alias

 

※ 현재 CRA 5 버전을 지원하는 craco가 없다. 아직 개발중인 7.0.0 alpha 버전을 사용하면 npm install을 할 때 dependency 에러 없이 설치할 수 있다.

$ npm i @craco/craco@alpha

(2022년 11월 8일에 @craco/craco 7.0.0 버전이 출시되었다. 더 이상 위와 같이 alpha 버전을 사용하지 않아도 된다.)

 

 

@craco/crao와 craco-alias를 설치하고 루트 디렉토리에 craco.config.js라는 파일을 만들고 아래와 같이 작성한다.

const CracoAlias = require('craco-alias')

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

그 다음 덮어쓸 내용만 따로 담은 tsconfig를 tsconfig.paths.json으로 따로 생성하고 아래와 같이 작성한다.

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["./components/*"],
      "@assets/*": ["./assets/*"],
      "@styles/*": ["./styles/*"],
      "@contexts/*": ["./contexts/*"],
      "@hooks/*": ["./hooks/*"],
      "@utils/*": ["./utils/*"]
    }
  }
}

※ tsconfig.paths.json에 주석을 작성하면 에러가 발생한다.

 

원래 tsconfig에는 extends 속성을 아래와 같이 추가한다.

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    // ...
  }
}

마지막으로 package.json에서 react-scripts 명령어를 craco로 변경한다.

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

 

2023 / 01 / 27 수정

현재 craco-alias는 deprecated되었다. react-app-alias라는 라이브러리로 대체해서 사용할 것을 권장한다. react-app-alias를 사용할 때에는 craco.config.js를 아래와 같이 작성하면 된다. 

const { CracoAliasPlugin } = require('react-app-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {
        source: 'tsconfig',
        baseUrl: '.',
        tsConfigPath: './tsconfig.paths.json',
      },
    },
  ],
};

참고로 react-app-alias는 craco뿐만 아니라 react-app-rewired와 customize-cra를 모두 지원한다.

 

 

참고자료

https://velog.io/@longroadhome/%EC%98%A4%EB%8A%98%EC%9D%98%EC%82%BD%EC%A7%882-CRA-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-tsconfig-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95

[오늘의삽질#2] CRA 환경에서 tsconfig 절대경로 설정

https://www.howdy-mj.me/boilerplate/craco-absolute-paths-setting/

CRA + Typescript 절대경로 설정 (w/craco)

https://github.com/oklas/react-app-alias#using-craco

GitHub - oklas/react-app-alias: Alias and multiple src directory for craco or rewired create-react-app #61