문제 상황

• 갑자기 처음보는 에러가 발생했다.

The inferred type of 'router' cannot be named without a reference to 
'.pnpm/@[email protected]/node_modules/@remix-run/router'. 
This is likely not portable. A type annotation is necessary.ts(2742)

.pnpm/@[email protected]/node_modules/@remix-run/route 의 참조 없이는 createBrowserRouter 로 생성한 router의 타입을 추론할 수 없다는 것이다…

문제 원인

pnpm add react-router-dom 

→ 공식문서대로 정확하게 설치했는데, react-router-dom 라이브러리의 의존성인 @remix-run/router 이 설치가 되지 않았다.. 해당 의존성을 통해서 router의 타입을 추론하는것 같은데 이 의존성이 설치가 되지 않았으니 타입을 추론하지 못하여 타입오류가 발생한것이다. yarn 으로 진행한 프로젝트에서는 이런 적이 없었는데, pnpm으로 설치할 때만 왜 이런지… 흠

해결 방안

pnpm add @remix-run/router

를 설치했다.

import { createBrowserRouter } from "react-router-dom";
import type { Router } from "@remix-run/router";

import HomePage from "@/pages/HomePage";
import LoginPage from "@/pages/LoginPage";
import TimerPage from "./pages/TimerPage";

export const router: Router = createBrowserRouter([
  {
    path: "/",
    element: <LoginPage />,
  },
  {
    path: "/home",
    element: <HomePage />,
  },
  {
    path: "/timer",
    element: <TimerPage />,
  },
]);

그리고 Router 타입을 명시해줬다….