마이크로 프론트엔드 셸 아키텍처로 전환한 이후, 기존 웹 애플리케이션에서도 셸 외부의 일부 모듈을 공유하는 방법을 모색하기 시작했습니다. React 헤더 컴포넌트를 공유하던 중 한 팀이 Webpack 오류를 겪었습니다.

npm 패키지 대신 federated 모듈에서 컴포넌트를 렌더링하려고 하자 앱이 다음 오류와 함께 중단되었습니다:

TypeError: __webpack_modules__[moduleId] is not a function

문제의 원인은 Webpack이 remoteEntry.js 파일을 로드하기 전에 애플리케이션이 React 컴포넌트를 렌더링하려 했기 때문이었습니다. 이를 해결하는 방법은 몇 가지 있습니다.

bootstrap 파일 추가하기

번들에 dynamic import를 사용해 나머지 애플리케이션을 포함하는 새로운 진입점을 추가하세요.

예를 들어 이전에 src/index.js를 메인 진입점으로 로드했다면, 다음 내용을 담은 새로운 src/bootstrap.js 파일을 추가합니다:

import("./index");

그런 다음 Webpack 진입점이 src/bootstrap.js를 가리키도록 업데이트합니다. 이렇게 하면 src/index.js 내에서 federated React 컴포넌트를 즉시 렌더링해도 제때 로드되어 정상적으로 동작합니다.

참고: Babel 7.8.0 미만 버전을 사용하고 있다면 이 구문을 지원하기 위해 플러그인을 로드해야 합니다. 업그레이드도 고려해 보세요!

지연 로딩과 Suspense

또는 React.lazy를 사용해 React 컴포넌트가 로드될 때까지 렌더링을 지연시킬 수 있습니다. 이 방법 역시 dynamic import 구문을 사용합니다:

const RemoteComponent = React.lazy(
  () => import("remote-module/RemoteComponent")
);

const App = () => (
  <React.Suspense fallback={<span>Loading...</span>}>
    <RemoteComponent />
  </React.Suspsense>
);

remote가 로드되어 사용 가능해질 때까지 fallback span이 렌더링됩니다. 이 방식을 사용하면 다른 글에서 다룬 것처럼 remoteEntry.js가 실제로 필요해질 때까지 로딩을 지연시킬 수도 있습니다.