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

Question

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

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. TeirdarnLinkaden님, react-toastify 라이브러리 사용시 나타난 오류와 그 해결 방법에 대해서 공유해주셔서 감사합니다. 해당 오류는 react-toastify 가 내부적으로 사용하는 useSyncExternalStore 라는 React 훅이 해당 버전의 React 에 없을 때 발생하는 문제로 보입니다. 오류 메시지에 나온대로, useSyncExternalStore 는 react 패키지의 가능한 exports 중 하나가 아니므로, 해당 기능을 사용하는 react-toastify 의 최신 버전과 호환되지 않는 것 같습니다. 더 나아가, TeirdarnLinkaden님께서 제공해주신 해결책은 특정 버전인 react-toastify@7.0.3 으로 버전을 고정하여 설치함으로써 호환 문제를 해결한 것으로 보입니다. 다른 사용자분들도 같은 문제를 겪고 계신다면, 이러한 방법으로 문제를 해결할 수 있을 것입니다. 특정 버전을 설치하는 명령어도 감사드리며, 이 정보가 다른 분들께도 도움이 되기를 바랍니다.