✍️ What I Learned/트러블슈팅

[트러블슈팅] ERROR in ./node_modules/react-router-dom/dist/index.js 13:0-810

Jiwon() 2023. 6. 27. 08:46

 

🚨 발생 문제

ERROR in ./node_modules/react-router-dom/dist/index.js 13:0-810

export 'AbortedDeferredError' (reexported as 'AbortedDeferredError') was not found in 'react-router' (possible exports: Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_mapRouteProperties, UNSAFE_useRouteId, UNSAFE_useRoutesImpl, createMemoryRouter, createRoutesFromChildren, createRoutesFromElements, renderMatches, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes)ERROR in ./node_modules/react-router-dom/dist/index.js 13:0-810export 'NavigationType' (reexported as 'NavigationType') was not found in 'react-router' (possible exports: Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_mapRouteProperties, UNSAFE_useRouteId, UNSAFE_useRoutesImpl, createMemoryRouter, createRoutesFromChildren, createRoutesFromElements, renderMatches, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes)

 

  • 2주 전쯤에 데스크탑에서 작업하던 프로젝트를 랩탑으로 clone해와 다시 코드를 작성하고 있는데, 위와 같은 오류 발생
  • 처음엔 당연히 작성하던 코드때문에 발생하는 오류겠거니 생각하고 에러 메시지를 자세히 읽어봄
  • 그런데 node_modules 안의 패키지에서 에러가 발생했다..?

 

 


🤔 문제 원인

react-router 모듈에서 일부 export가 누락되었다는 문제

  • react-router 패키지와 react-router-dom 패키지의 버전 불일치로 인해 발생했을 가능성이 가장 높음

 

 


💊 해결 방법

해당 패키지 업데이트

// npm
npm update react-router-dom

// yarn
yarn upgrade react-router-dom
  • 위의 명령어로 해당 패키지를 업데이트 해주면 간단히 해결!
  • 패키지 버전에 따른 오류 메시지는 처음 겪어봐서 블로그에 적어본다.