최근 Module Federation을 기존 애플리케이션 일부에도 확대 적용하면서, 그 과정에서 Babel 구버전을 사용하는 프로젝트에서 몇 가지 문제가 발생했습니다.

일반적으로 bootstrap 파일을 추가하면 federated 모듈이 사용되기 전에 로드되도록 보장할 수 있으며, 이 방식은 이전 글에서 소개한 바 있습니다. 하지만 애플리케이션 중 하나에서는 여전히 다음과 같은 오류가 발생했습니다:

Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react

팀에서는 Webpack이 나머지 번들을 코드 스플리팅할 수 있도록 dynamic import를 사용한 bootstrap 파일을 추가한 상태였습니다. 프로젝트에서는 이미 최신 버전의 @babel/preset-env를 사용하고 있었기 때문에 해당 구문을 지원하기 위한 별도의 추가 작업은 필요하지 않았습니다.

디버깅 끝에 Webpack이 전혀 코드 스플리팅을 하지 않고 있다는 사실을 알게 됐습니다. 원인은 @babel/plugin-transform-dynamic-import가 import() 표현식을 변환해 Webpack이 코드 스플리팅에 이를 활용할 수 없게 만들었기 때문이었습니다. 이 플러그인은 @babel/preset-env를 사용할 때 자동으로 비활성화되어야 하는데, 이 경우에는 그렇지 않았습니다.

@babel/preset-env를 다음과 같이 설정하면 해당 플러그인을 비활성화할 수 있습니다:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": 3,
        "exclude": ["proposal-dynamic-import"]
      }
    ]
  ]
}

이렇게 설정하니 Webpack이 코드 스플리팅을 수행했고 오류도 해결됐습니다. 하지만 근본 원인은 프로젝트에서 [email protected]를 사용하고 있었던 것이었고, 최신 버전으로 업그레이드하니 플러그인을 명시적으로 비활성화하지 않아도 문제가 해결됐습니다.