문제 정의

shared패키지에서 절대 경로 사용 시 에러가 발생한다.

사실 수집

1. 패키지의 단독 빌드에는 문제가 없다.

   import { MemoStorage } from "../bridge/shared";
   export const backupMemo = () => __async(void 0, null, function* () {
     const memoStorage = yield MemoStorage.get();
     return memoStorage;
   });
   

   

2. 이 패키지를 사용하려는 측에서 에러가 발생한다.

   

   에러 재현을 위해 변화를 준 파일은 shared패키지의 config.ts이다.

   // packages/shared/src/constants/config.ts
   import { getSafeConfig } from '@src/utils';
   

   위와 같이 shared패키지에서 절대경로를 사용하니 에러가 발생했다.

정리

정리하면, 절대 경로를 변환하지 못한 것이다. new-tab에서 utils사용을 추가하지 않았는데 utils를 찾지 못했다고 에러가 발생한 것을 보면, 빌드 과정에서 절대 경로를 상대 경로로 변환하지 못한 것이다.

빌드 파일을 확인해보고, 빌드 과정에서 절대 경로를 상대 경로로 변경하는 옵션을 추가하면 해결이 될 듯하다.

원인 탐색

1. 빌드 파일 확인

   // packages/shared/dist/src/constants/config.js
   import { getSafeConfig } from "@src/utils";
   

   역시 변환이 안되어있다.

2. 공식문서

   • Path resolution

     유사한 내용이 없다.

     • 유사한 옵션 : alias : 패키지를 다른 패키지명으로 변경한다

3. 구글링

4. 관련 이슈

   https://github.com/evanw/esbuild/issues/2191

   • tsconfig.json의 path를 자동으로 esbuild가 인식한다고 한다.
   • 이 내용은, 한 패키지 안에서 모듈을 사용할 때 적용되는 이야기인 듯하다.

5. bundle 활성화

   var getSafeConfig = (name, value) => {
     if (value === void 0) throw new Error(`${name}\uC774 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.`);
     else return value;
   };
   

   여전히 에러가 뜬다.

6. boilerplate 코드 clone해서 실행해보기

   여전히 에러가 뜬다.

7. esbuild환경 직접 세팅해보기