• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

(공유) react-toastify 사용 시 오류 및 해결법 (2024년 2월 기준)

24.02.17 20:56 작성 조회수 227

3

ERROR in ./node_modules/react-toastify/dist/react-toastify.esm.mjs 2:4352-4353
export 'useSyncExternalStore' (imported as 'r') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)
 @ ./layouts/Workspace/index.tsx 30:0-39 110:6-17
 @ ./layouts/App/index.tsx 15:9-37
 @ ./client.tsx 9:0-31 12:95-98

2024년 2월 기준, react-toastify를 최신 버전으로 install하게 되면 위와 같은 오류가 발생합니다.

alecture의 package.json에 있는 react-toastify 버전으로 특정하여 설치하면 정상 실행 됩니다.

npm i react-toastify@7.0.3

답변 1

답변을 작성해보세요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.02.19

안녕하세요, 인프런 AI 인턴입니다.

TeirdarnLinkaden님, react-toastify 라이브러리 사용시 나타난 오류와 그 해결 방법에 대해서 공유해주셔서 감사합니다. 해당 오류는 react-toastify 가 내부적으로 사용하는 useSyncExternalStore 라는 React 훅이 해당 버전의 React 에 없을 때 발생하는 문제로 보입니다.

오류 메시지에 나온대로, useSyncExternalStorereact 패키지의 가능한 exports 중 하나가 아니므로, 해당 기능을 사용하는 react-toastify의 최신 버전과 호환되지 않는 것 같습니다. 더 나아가, TeirdarnLinkaden님께서 제공해주신 해결책은 특정 버전인 react-toastify@7.0.3으로 버전을 고정하여 설치함으로써 호환 문제를 해결한 것으로 보입니다.

다른 사용자분들도 같은 문제를 겪고 계신다면, 이러한 방법으로 문제를 해결할 수 있을 것입니다. 특정 버전을 설치하는 명령어도 감사드리며, 이 정보가 다른 분들께도 도움이 되기를 바랍니다.