【React】react-pdfをセットするのにかなり時間を費やした話

はじめに

React + TypescriptでPDFを表示したいと思ってreact-pdfを使用して実装した時の話にかなり困ったので、その解決策を備忘録として自分用のメモに残しておく。

インストールしたモジュール

yarn add @react-pdf-viewer/core react-pdf pdfjs-dist @react-pdf-viewer/default-layout

上記コマンドをいろいろ試してもうやりすぎて何を最初に入れたか忘れた・・・
がこの辺りをインストールすれば多分いけた・・・

worker設定

pdfjsのworker設定が必要だったんだけど、これがめちゃくちゃハマった。
解決策は以下になる。

pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.js", import.meta.url).toString();

まとめ

書き方は合ってたのにセットアップでクソ苦労した・・・