TypeError: Promise.withResolvers is not a function

TypeError: Promise.withResolvers is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///Users/sinsaem/Desktop/saem/...파일경로

pdf 뷰어를 구현해야 해서 react-pdf를 import 하는데 에러가 계속 나서 아무것도 할 수가 없었다....🤮

그래서 작성해보는 트러블 슈팅

react-pdf issue

react-pdf install

pdf 뷰어를 띄우기 위해 가장 많이 쓰이고 업데이트가 자주 되고 있는 react-pdf를 사용하려 했다
그런데 위의 에러가 자꾸 나서 아무것도 하지 못하는 상황 발생..🚫
TypeError: Promise.withResolvers is not a function로 검색해보니 이 에러가 나는 사람들이 꽤 되는 것 같아서 react-pdf 깃허브 이슈를 찾아봤다

polyfill 작성

이슈에 나와있는 폴리필을 작성했는데도 해결이 안 된다..!

// Polyfill for environments where window is not available (e.g., server-side rendering)
// @ts-expect-error This does not exist outside of polyfill which this is doing
if (typeof Promise.withResolvers === "undefined") {
  if (typeof window !== "undefined") {
    // @ts-expect-error This does not exist outside of polyfill which this is doing
    window.Promise.withResolvers = function () {
      let resolve, reject;
      const promise = new Promise((res, rej) => {
        resolve = res;
        reject = rej;
      });
      return { promise, resolve, reject };
    };
  } else {
    // @ts-expect-error This does not exist outside of polyfill which this is doing
    global.Promise.withResolvers = function () {
      let resolve, reject;
      const promise = new Promise((res, rej) => {
        resolve = res;
        reject = rej;
      });
      return { promise, resolve, reject };
    };
  }
}

core-js install

react-pdf 개발자의 댓글대로 core-js를 설치하고
상단에 import "core-js/full/promise/with-resolvers.js";를 import 해주니 해결되었다 🥹