가독성을 위해 index.ts로 파일을 관리하는 것을 좋아한다.

무리없이 동작하였으나, 빌드를 해보니

이런 에러를 만났다.

모듈 간의 순환 의존성(circular dependency) 문제로 BasicLayout.vue 모듈이 index.ts를 통해 다시 내보내지기 때문에 발생했다.

간단한 해결방법은 해당 모듈을 index.ts를 통해 다시 내보내는 대신 직접 참조하는 것이다.

왜 이러한 에러가 발생했냐면,

Rollup에 의해 번들링되는 동안 모듈들이 서로 다른 청크로 분리되기 때문이다.

→ BasicLayout.vue가 index.ts로 다시 내보내지기 때문

Rollup

Rollup은 번들링도구로, (ex. webpack) 순환 의존성 해결을 위해 추가적 처리를 하지만 실행 순서와 청크 분리에 영향을 줄 수 있다.

BasicLayout.vue가 index.ts가 서로 의존성을 가지고 있어 번들링도구가 처리하기 어려우며, 서로 다른 청크로 분리될 수 있다는 점이다.

Rollup은 JS 모듈 번들러 중 하나로, ES모듈(ESM) 기반의 프로젝트에서 사용된다.

모듈 번들러는 여러 파일들을 하나의 단일 파일로 합쳐주는 도구로, 웹 애플리케이션 개발에서 모듈화된 코드를 번들링하여 최적화된 형태로 제공한다.

React나 Next에서는 index 사용에 무리가 없었는데 Vue에서만 문제가 되는 이유가 궁금했다.