[TS] '"react-router-dom"' has no exported member named 'createBrowserRouter'. Did you mean 'BrowserRouter'? 오류 해결하기

hyeondoonge·2023년 8월 27일
1
post-thumbnail

문제

이 오류는 최신 버전의 react-router-dom과 @types/react-router-dom을 사용하며 맞닥뜨리게됐다.

typescript 환경에서는 타입선언된 모듈을 제공해야하니까 @types 관련 패키지를 설치해줬다. Outlet은 잘 가져오지만 그외 최신 기능들이 위의 오류 메시지처럼 타입을 찾지 못하고있다.

원인

결론부터 얘기하자면 @types/react-router-dom는 2년 후를 기점으로 업데이트 되지않고 있어 최신 기능의 react-router-dom에 대한 타입 정의가 없는 것이 원인이다.

원인을 찾을 수 있었던 과정을 보자. mac 환경에서 command + 왼쪽 마우스를 클릭하면 모듈이 참조하고있는 파일로 이동할 수 있다. 그 파일에는 오류 메시지에 있는대로 오류가 발생한 기능들을 찾을 수 없었다.

이전 type 패키지를 설치했나 싶어서 공식문서를 봤는데 그건 또 아니였다. 가장 최신 버전이 설치돼있었다.
이 type 패키지를 적용할 수 없다는 말인데 그럼 무슨수로 typescript 환경에서 최신 버전의 react-router-dom을 이용하나?

고민하다가, axios와 같은 사용사례가 떠올랐다. axios는 패키지에 타입 선언이 포함되어있어서 굳이 types 패키지를 설치하지 않아도 typescript 환경에 적용가능했다.

react-router-dom도 이처럼 비슷하게 구성되어있나 싶어서 npm 문서를 봤다.
react-router-dom 오른쪽에 TS 표시가 떡하니 돼있었다.
@types 패키지를 설치하지 않아도 ts환경에서 사용할 수 있다는 의미이며, 이로써 내가 했던 의문점이 해결됐다.

또한 원래 사용했던 @types/react-router-dom에는 무슨 문제가 있는거지?하며 npm 문서를 봤다.
업데이트가 2년전에 멈췄으며, 당연히 최신 기능들에 대한 타입에 대해 업데이트 되지 않았겠구나 생각할 수 있었다.

해결

@types/react-router-dom을 삭제했다.
주의할 점은 tsconfig에 설정된 moduleResolution 값에 따라 정상적으로 react-router-dom의 타입 선언 파일이 참조될 수도, 그러지 않을 수도 있다.
이럴 때는 moduleResolution을 "node"로 설정해주면 해결될 것이다. 이에 대한 자세한 내용은 이 글([TS] Cannot find module 오류 해결하기)을 참고하길 바란다.

0개의 댓글