모노레포 프로젝트에서 라이브러리 import 문제 해결하기

 

나는 오늘 에러 하나를 만났다.

모노레포 프로젝트로 개발해 본 사람들은 누구나 한 번쯤 알만한 그런 에러.

 

바로 ui, utils, design-token이런 라이브러리들을 만들고 사용하려 할 때 import가 되지 않는 문제! 😥😥

 

그냥 바로 본론만 설명하겠다.

 

여러분들의 시간은 소중하니깐? ㅎㅎ 😎

 

 

---

 

 

먼저 루트 tsconfig.json에서

{

  "extends": "./tsconfig.base.json",

  "compileOnSave": false,

  "files": [],

  "references": [

    {

      "path": "./apps/entry-admin"

    },

    {

      "path": "./apps/entry-user"

    },

    {

      "path": "./apps/entry-auth"

    },

    {

      "path": "./libs/ui"

    },

    {

      "path": "./libs/design-token"

    },

    {

      "path": "./libs/utils"

    }

  ]

}

이런식으로 라이브러리들의 path 설정이 잘 되어있는지 확인한다.

 

그다음

 

 

tsconfig.base.json에서 이 패스들을 추가해주기만 하면 된다.

참 쉽죠?

{

  "compilerOptions": {

    "composite": true,

    "declarationMap": true,

    "emitDeclarationOnly": true,

    "importHelpers": true,

    "isolatedModules": true,

    "lib": ["es2022"],

    "module": "esnext",

    "moduleResolution": "bundler",

    "noEmitOnError": true,

    "noFallthroughCasesInSwitch": true,

    "noImplicitOverride": true,

    "noImplicitReturns": true,

    "noUnusedLocals": true,

    "skipLibCheck": true,

    "strict": true,

    "target": "es2022",

    "customConditions": ["development"],

    "baseUrl": ".",

    "paths": {

      "@entry/utils/*": ["libs/utils/src/*"],

      "@entry/ui/*": ["libs/ui/src/*"],

      "@entry/design-token/*": ["libs/design-token/src/*"]

    }

  }

}

여기서 보면 제일 밑에 "paths"가 있다. 여기서 지정해 주면 된다.  -> 위 코드 식으로

 

import { fontGenerator } from '@entry/utils';

그러면 이렇게 맘 편히 불러올 수 있다(개꿀)