CRA로 만든 프로젝트 절대 경로 적용하기

CRA로 만든 프로젝트에 절대 경로를 적용하려 tsconfig.json에

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

추가했더니 아래와 같은 메시지가 나왔다. 그리고 tsconfig.json에 내가 추가한 paths가 사라졌다. 찾아보니까 CRA에 webpack 설정 때문에 그런 것 같다.

The following changes are being made to your tsconfig.json file:

• compilerOptions.paths must not be set (aliased imports are not supported)

해결방법

1. > npm i -D customize-cra react-app-rewired
2. config-overrides.js 작성

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    '@src': path.resolve(__dirname, 'src'),
  }),
);

3. package.json에 스크립트 변경

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

4. tsconfig.paths.json 작성

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

5. tsconfig.json 수정

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

6. 실행
   > npm start