문제 상황

모노레포 + module federation 구조로 프로젝트를 진행하는 중 갑자기 페이지 전체가 렌더링 되지 않으며 빈 페이지로 보이는 현상이 발생했다.

Editor 컴포넌트를 모듈로 분리하여 리모트를 참조하는 방식으로 사용했는데, Editor를 임포트 하기만 하고 사용하지 않거나 선언된 페이지로 이동하지 않더라도 모든 페이지가 렌더링 되지 않았던 것이다.

이상한 점은 다른 호스트 모듈에선 Editor를 멀쩡히 불러와 사용할 수 있었다. 처음엔 리모트를 불러오는데 문제가 있는것이라 생각하여 모듈 설정, 웹팩설정을 전부 건들여봤지만 문제는 계속 발생했다.

Cursor, Codex, Antigravity도 브라우저에 접속시켜셔 원인을 찾아봤지만 다 똑같이 리모트나 에디터 컴포넌트 자체가 깨진거라고 했다. 다른 호스트에선 멀쩡히 사용하고 있다니까..

원인

원인은 생각보다 허무했다.

호스트 어플리케이션의 루트에 에디터를 선언하니 정상적으로 동작해서 Router 내부에서 발생하는 문제라는걸 포착했다.

Codex에게 정상동작하는 host와 비교를 요청해보니 문제가 있던 host의 router 관련 hooks나 컴포넌트의 비교를 요청하니 문제가 있던 host에선 관련 hooks를 react-router-dom 에서 가져오고 있었다 루트에선 react-router의 createBrowser로 라우팅 작업을 해줬기 때문에 Router Context가 맞지 않아 리모트가 깨졌던 것이다.

react-router, react-router-dom

react-router
라우팅 코어 로직(매칭, 히스토리 추상화, 훅 기반 핵심)

react-router-dom
브라우저용 바인딩(BrowserRouter, Link, NavLink, createBrowserRouter 등) + react-router를 포함/재노출

서로 다른 패키지 출처로 섞어 쓰면 컨텍스트 경계가 어긋날 수 있다고 한다.

Route Context?

RouterProvider가 상위에서 라우터 상태(현재 location, matches, navigator)를 Context로 제공한다.

하위의 Outlet, useNavigate, useLocation, useMatches는 이 Context를 읽어 동작한다.

즉, 라우트 하위 컴포넌트가 정상 동작하려면:

상위에 올바른 RouterProvider가 있어야 하고
하위 훅/컴포넌트가 같은 라우터 체계의 Context를 읽어야 한다.

결론

이 문제의 본질은 “remote 자체가 불안정해서”가 아니라, 대부분 Route Context 경계가 깨진 상태에서 remote가 그 안에 들어왔기 때문에 발생했다.

라우팅 동작은 정상적으로 됐기 때문에 라우터가 문제일거라곤 생각하지 못했다. 아무 에러 메세지가 발생하지 않아서 한나절동안 삽질했는데 고작 임포트문 5줄 수정하는걸로 고쳐지다니..ㅜ

React Router 내부에서 remote 패키지 사용 시 빈 페이지로 렌더링 되는 문제

React Router 내부에서 remote 패키지 사용 시 빈 페이지로 렌더링 되는 문제