failed to resolve entry for package monorepo

모노레포 도입

지금 회사 프런트 팀의 프로젝트는 원래는 도메인 메뉴별로 나누어서 멀티레포 Multi repo 방식으로 개발을 했었다. 즉 개발자마다 레포지토리를 하나하나 따로 관리해서 개발했었고, 팀원끼리 똑같은 ui를 개발한다고 하여도 저장소간에 컨텍스트 공유가 어려워서 개개인 각자가 관리하는 레포지토리 내부에서 똑같은 ui를 중복해서 개발하기도 했다. 

그런데 이제 여러곳에서 중복으로 사용하는 코드를 공유해서 재사용성을 높이고 하나의 코드베이스에서 모든 프로젝트의 코드와 자원을 관리하여 서로의 관계와 의존성을 쉽게 파악할 수 있도록 모노레포 환경을 구축했다. 

모노레포 환경에서 처음 개발하면서 프로젝트 실행이 안될때가 있었는데 이때 마주한 에러를 정리한다. 

 

Monorepo 빌드 도구 

Turborepo 

 

폴더 구조 

📦 monorepo root folder
 ┣ 📜package.json
 ┃ 📦 apps
 ┃ ┣ 📂 app1
 ┃ ┃ ┣ 📂public
 ┃ ┃ ┣ 📂src
 ┃ ┃ ┣ 📜package.json
 ┃ ┣ 📂 app2
 ┃ ┃ ┣ 📂public
 ┃ ┃ ┣ 📂src
 ┃ ┃ ┣ 📜package.json
 ┃ 📦 packages
 ┃ ┣ 📂 package1
 ┃ ┃ ┣ 📂src
 ┃ ┃ ┗ 📜package.json
 ┗  ...

 

우리팀은 프로젝트 별로 재사용하기 쉽도록 디자인 시스템 theme이나 인증 관련 로직 auth를 internal 패키지로 개발하여 관리하고 있다. 

 

apps>package.json

최상위 프로젝트의 package.json 파일

  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint",
    "test": "turbo run test",
    "test:watch": "turbo run test:watch",
    "format": "prettier --write \"**/*.{ts,tsx,md}\""
  },

 

apps>app1>package.json

각 프로젝트 파일의 package.json은 아래와 같다 

 "scripts": {
    "dev": "vite",
    "build": "vite build -m prod",
    "preview": "vite preview",
    "test": "jest --passWithNoTests",
    "stage": "vite -m stage",
    "lint": "tsc && eslint . --ext ts,tsx --report-unused-disable-directives",
    "msw": "npx msw init ./public --save"
  },

 

 

평소대로 npm run dev로 root하위에 있는 개별 apps1 프로젝트를 띄우려고 했다. 

그런데 이런 에러메시지를 마주했다. 

 

에러

Failed to resolve entry for package "내부 패키지 이름" 

Failed to resolve entry for package "내부 패키지 이름". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan]

 

 

최상위 root로 가서 `npm run dev`를 쳐도 해결은 안되었다.

에러 메시지는 아래와 같았다.

ERROR  run failed: error preparing engine: Invalid persistent task configuration:
You have 11 persistent tasks but `turbo` is configured for concurrency of 10. Set --concurrency to at least 12

 

 

 

해결

root에서 `build`를 해야 해결 되었다! 

모노레포 내부에 공통으로 공유하여 사용하는 패키지들이 빌드가 안되어서 생기는 오류였다. 개별 apps 프로젝트에 패키지가 설치되었어도 패키지를 빌드하지 않으면 그 패키지가 번들링되지 않았기 때문에 사용할 수가 없다. 

따라서 패키지 개발시에도 패키지에 새로운 업데이트 사항을 개발했을 때, 다른 프로젝트에서 그 패키지의 최신 업데이트 사항을 반영하고 싶다면 해당 패키지를 빌드해야지만 로컬에서도 최신 사항이 반영된 패키지로 개발할 수가 있다.

 

 

추가 

이후에 마주한 에러

No matching export in "패키지 내부 파일 경로" for import "패키지 모듈이름"

 

 

에러 발생한 파일

apps>app1>src>App.tsx

 

app1를 `npm run dev`로 실행하는데, app1의 `App.tsx` 파일에서 자꾸 패키지에의 export 경로와 import 하려는 모듈이 매치되는게 없다는 에러가 떴다.

위에서 블로그에 작성했던 내용을 까먹고, npm install 을 다시 시도했는데 여전히 제자리;

 

해당 에러 발생하는 패키지에서 `build`를 해주니 해결되었다. 기존엔 빌드되지 않아 패키지 새로 작성했던 모듈이 다 불러와 지지 않았던 것이다! 

 

 

빌드후 이제 app1을 실행하면 문제 없이 잘 작동한다

 

Reference

https://turbo.build/repo/docs/handbook/sharing-code/internal-packages#3-import-the-package

Internal Packages | Turborepo