[React] '"vite-plugin-next-react-router"' 모듈에 내보낸 멤버 'reactRouterPlugin'이(가) 없습니다. 오류 해결하기

강의에서 Next.js 처럼 react에서도 편하게 라우팅을 해주는 게 있다고 해서 설치했다.  Next.js처럼 페이지 폴더명을 라우팅 경로로 사용한다고 한다. 내가 설치한 버전이 강의에서 설치한 버전과 다른지 npmjs에 써져있는 설명도 내가 검색했을 땐 너무 짧았고 설치 후 어려움을 겪어서 나같이 헤매는 사람들을 위해 글을 쓴다!

 

vite-plugin-next-react-router

설치 방법

1. vite.config.js에 플러그인 붙여넣기

 

import { reactRouterPlugin } from 'vite-plugin-next-react-router';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    //...
    reactRouterPlugin(),
  ],
});

 

2. Main.tsx에 import 해주기

 

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { BrowserRouter, useRoutes } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

 

3. pages폴더에 _layout.tsx 만들고 붙여넣기

 

import React, { Suspense } from "react";
import { Outlet } from "react-router-dom";

const Layout: React.FC = () => {
  return (
    <div>
      <Suspense fallback={"loading..."}>
        <Outlet />
      </Suspense>
    </div>
  );
};

export default Layout;

이것은 github에 가서 예시를 봐야만 나온다.... 

 

4. App.tsx에 써주기

 

import { useRoutes } from "react-router-dom";
import { routes } from "./routes.tsx";

const App = () => {
  const element = useRoutes(routes);
  return element;
};
export default App;

 

5. routes.tsx가 자동으로 생성되지 않은 경우 파일을 만들고 아래 코드를 붙여넣는다.

 

import React from "react";
import GlobalLayout from "./pages/_layout";

const DynamicIndex = React.lazy(() => import("./pages/index"));
const DynamicProductsIndex = React.lazy(() => import("./pages/products/index"));
const DynamicProductsId = React.lazy(() => import("./pages/products/[id]"));

export const routes = [
  {
    path: "/",
    element: <GlobalLayout />,
    children: [
      { path: "/", element: <DynamicIndex />, index: true },
      { path: "/products", element: <DynamicProductsIndex />, index: true },
      { path: "/products/:id", element: <DynamicProductsId /> },
    ],
  },
];

export const pages = [
  { route: "/" },
  { route: "/products" },
  { route: "products/:id" },
];

 

아니 강사님 컴퓨터에는 자동으로 설치됐는데 왜 내 컴퓨터에는 자동으로 안깔아주는걸까? yarn 의 오류인가 해서 npm 으로도 깔았지만 똑같이 깔리지 않았다. 그래서 강의 화면 멈춰놓고 열심히 타이핑했다. 쒹쒹 

 

오류 해결하기

 

글을 쓴 계기...

열심히 타이핑하고서 이제 되겠지? 했는데 웬 걸. vite.config.ts가 빨간색으로 표시가 되어있었다. 클릭해보니 'vite-plugin-next-react-router' 모듈에 내보낸 멤버 'reactRouterPlugin'이 없다고 한다. npmjs 에 써있던대로 코드를 그대로 붙여넣은 것인데.. 내용 업데이트를 안했나보다. 다행히 이것은 간단하게 해결할 수 있는 문제였다.

 

일단 맥 기준 커맨드를 누르고 from 오른쪽에 있는 'vite-plugin-next-react-router'를 클릭한다.

 

vite-plugin-next-react-router 살펴보기

 

여기 마지막에 export { withReactRouter as default } 만 보면 된다. 얘는 더이상 reactRouterPlugin이 아니다! withReactRouter라고 불러야 한다. 그리고 as default 이기 때문에 가져올 때 중괄호가 없어야 된다. 

 

import { defineConfig } from "vite";
import withReactRouter from "vite-plugin-next-react-router";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    withReactRouter(),
  ],
});

 

이렇게 수정해주면 정상적으로 라우팅된다! 휴~! 큰 문제는 아니었지만 어찌됐든 문제를 해결해서 기분이 좋당!! 그리고 아직 공부하지 않은 next.js를 맛 본 느낌... 얼른 공부해서 next.js까지 진도 쭉쭉 나가야겠다.