build시 react-router Outlet이 동작하지 않고 흰화면만 뜨는 버그

(클릭해서 해결방법부터 보기)

1. 개요

React + Vite + TS 로 구성된 프로젝트를 진행하면서, 여느때와 같이 router를 설정하였다.

browserRouter를 사용하였는데, 그 당시 설정한 router 파일은 다음과 같다.

import ChildPage from '@pages/ChildPage'
import DispatchPage from '@pages/DispatchPage'
import DriveHistoryPage from '@pages/DriveHistoryPage'
import Error404Page from '@pages/ErrorPage'
import MainPage from '@pages/MainPage'
import OperatePage from '@pages/OperatePage'
import ParentViewPage from '@pages/ParentViewPage'
import SignInPage from '@pages/SignInPage'
import SignUpPage from '@pages/SignUpPage'

import ProtectedRoute from '@routes/ProtectedRoute'
import App from 'App'
import { createBrowserRouter } from 'react-router-dom'

const router = createBrowserRouter([
  { path: '/parent-view/:uuid', element: <ParentViewPage /> },
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: 'signup',
        element: <SignUpPage />,
      },
      {
        path: 'signin',
        element: <SignInPage />,
      },
      {
        element: <ProtectedRoute />,
        children: [
          {
            index: true,
            element: <MainPage />,
          },
          {
            path: 'home',
            element: <MainPage />,
          },
          {
            path: 'manage',
            children: [
              {
                path: 'child',
                element: <ChildPage />,
              },
              {
                path: 'dispatch',
                element: <DispatchPage />,
              },
              {
                path: 'operate',
                element: <OperatePage />,
              },
              {
                path: 'drive-history/:shuttleId',
                element: <DriveHistoryPage />,
              },
            ],
          },
        ],
      },
    ],
  },
  {
    path: '/*',
    element: <Error404Page />,
  },
])

export default router

 

<App /> 컴포넌트는 다음과 같이 <Outlet />을 설정해주어 router에 설정한대로 렌더링을 하는것이 목표였다.

function App() {
  const location = useLocation()
  const hideHeaderPathList = ['/signin', '/signup']
  const showHeader = !hideHeaderPathList.includes(location.pathname)

  return (
    <QueryClientProvider client={queryClient}>
      {showHeader && <Header />}
      <Outlet />
    </QueryClientProvider>
  )
}

export default App

 

그런데 가장 상단에 위치한 컴포넌트만 렌더링되고, 그 밑에 위치한 children 컴포넌트들은 오류가 나면서 렌더링되지 않았다.

물론 local에서 npm run dev로 실행한 개발모드에서는 잘 되었다.

하지만 jenkins의 pipeline을 타고 nginx로 배포한 결과물은 <App / 컴포넌트만 렌더링되었다.

이러한 pipeline이 구축되어 있고, 빌드가 자동화가 되어있기 때문에 당시에는 로컬에서 빌드해볼 생각을 하지 못했던 것 같다.

 

이 현상을 발견한 이후에 npm run build를 한 후, npm run preview를 통해 빌드한 결과물을 확인해보니 역시나 되지 않았다.

 

2. 실패 과정

마감 기간안에 빨리 해결을 해야 배포된 환경에서 테스트, 이용을 할 수 있기 때문에 정말 열심히 검색을 했다.

 

검색한 결과에 대한 다음과 같은 실패 방법들이 존재했다.

(프로젝트 별 환경이 모두 다르기 때문에 제가 진행한 프로젝트에서 실패한 방법이지, 틀린 방법들이 절대 아닙니다!)

 

1) path 문제

[오류 / React] 배포 시 발생하는 Router path 문제

 

[에러] React 빌드 후 배포 시 흰 화면 오류

 

2) exact 확인

React Router 왜 계속 Path="/"에 해당되는 컴포넌트만 렌더링될까?

 

3) BrowserRouter 오류

[React] github pages 배포시 router오류

 

이외에도 가장 흔한 의견들은 BrowserRouter 대신에 HashRouter를 사용해라" 였다.

하지만 모든 방법은 우리 프로젝트에 적용했을 때 해결되지 않았다.

또한, react-router의 v5의 BrowserRouter와 HashRouter는 createBrowserRouter와 createHashRouter로 대체되었다.

 

3. 해결 방법

결론부터 말하자면, react-router 라이브러리 자체의 문제는 아니었다. 컴파일러 버그이다.

 

해결에 도움이 되었던 글은, react-router 라이브러리 github의 issue에 있는 글이었다.

(역시 뭐든지 공식적인 문서를 보면서 해결하는게 제일 좋은 것 같다.)

[Bug]: Cloudflare Pages - Outlet not working. · Issue #11480 · remix-run/react-router

 

아마 패키지가 업데이트 되면서 생겼던 문제인것 같다.

해결방법은 다음과 같다.

 

1) npm을 사용할 경우

package.json에 다음을 추가해주면 된다.

"overrides": {
  "rollup": "4.15.0"
}

 

2) yarn을 사용할 경우

package.json에 다음을 추가해주면 된다.

"resolutions": {
    "rollup": "4.15.0"
}