공통 패키지 관련 이슈 모음

main

date

Jul 12, 2024

slug

common-packages

author

status

Public

CASE 1 공통 패키지 불러오지 못함

추가

https://www.npmjs.com/package/next-transpile-modules

패키지 등록

CASE 2 Build 시 useContext 에러

UI 패키지의 경우 styled-components를 사용하고 있음

해당 컴포넌트를 platform에서 불러올 경우 해당 에러가 발생

→ platform 내의 package.json에 styled-component 추가

Peer Dependencies

위 이슈 관련해서 peer dependencies를 처음 사용해봤다.

dependencies

패키지들은 프로젝트의 런타임(실행)시에 필요한 패키지들이 속하게 되며 번들링 후에도 필요한 패키지 일 경우 여기에 속합니다.

devDependencies

개발과정 혹은 테스트과정에서만 필요한 패키지

번들링 이후에는 사용되지 않고 번들링 이전에 쓰이는 패키지만 포함

peerDependencies

프로젝트를 패키지 형태로 배포하는것이 목적일 때 사용

사용하는 패키지를 내부 또는 외부에서 사용하고 있을 때

https://23life.tistory.com/entry/Cannot-read-properties-of-null-reading-useContext-에러-해결

CASE 3 apps 의 프로젝트에서 root의 env를 읽지 못함

비즈챗 프로젝트와 단리 유니서베이 모노레포 환경에서 루트의 env를 읽지 못함

루트는 dotenv-cli 이용

Development tasks in a Monorepo – Turborepo

dev will likely be the most frequently run task in your repository, so getting it right is important.

https://turbo.hector.im/repo/docs/handbook/dev

Development tasks in a Monorepo – Turborepo

CASE 4 packages 에서 환경변수를 읽지 못함 (feat. axios base url)

Using environment variables | Turborepo

Learn how to handle environments for your applications.

https://turbo.build/repo/docs/crafting-your-repository/using-environment-variables

CASE 5 터보레포 구조 공통 패키지 import 경로 path alias 사용 불가


// import { ProjectConfig } from "@/base"; <-- build 시 에러 발생

import { ProjectConfig } from "../../base/project";

export interface ProjectConfigOption {
  CONFIG: ProjectConfig;
  TITLE?: string;
  PLACEHOLDER?: string;
  LAST_MSG?: {
    TXT_COMPLETE: string;
    TXT_OVER: string;
    TXT_OUT: string;
    TXT_BAD: string;
  };
}

TypeScript "paths" in monorepo · vercel turbo · Discussion #620

Let's say I want to use typescript's "paths" to simplify my imports. I'll use the current starter project as an example, with the idea to use path aliases in the ui folder. He...

https://github.com/vercel/turbo/discussions/620

TypeScript | Turborepo

Learn how to use TypeScript in a monorepo.

https://turbo.build/repo/docs/guides/tools/typescript#use-nodejs-subpath-imports-instead-of-typescript-compiler-paths

공통으로 사용하는 tsconfig.json에서 path alias를 지정해주기

packages > typescript-config > base.json


{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "incremental": false,
    "isolatedModules": true,
    "lib": ["es2022", "DOM", "DOM.Iterable"],
    "module": "NodeNext",
    "moduleDetection": "force",
    "moduleResolution": "node",
    "noUncheckedIndexedAccess": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ES2022",
    "paths": {
      "@apis/*": ["../../packages/services/src/apis/*"], // 경로 추가
      "@lib/*": ["../../packages/services/src/lib/*"] // 경로 추가
    }
  }
}

packages > services > src > apis … 파일에서


import { axiosInstance } from "@lib/axios"; // path alias로 호출 
import { ChartBody, Question } from "@unisurvey/interfaces/base";

/**
 * @description 결과 페이지 API 항목 정의
 */

const RESULT = `/result`

/**
 * @description 차트 데이터 불러오기
 * @param {ChartBody} body
 * @return 타입 미정
 */
export const getChartDataApi = async (body: ChartBody): Promise<Question> => {
}

path alias 사용해도 build 시 패캐지를 못 찾지 않음