Cara Konfigurasi PDF Worker di React untuk React-PDF

Konfigurasi PDF worker pada aplikasi React yang menggunakan pustaka react-pdf sangat krusial untuk mencegah kegagalan rendering dokumen dan error Setting up fake worker di konsol browser. Masalah ini terjadi karena proses parsing dan rendering berkas PDF dijalankan pada web worker terpisah agar thread utama (UI thread) tidak mengalami pembekuan (freezing).

Untuk mengatasi dan menyiapkan worker ini secara benar, Anda dapat memilih salah satu dari tiga metode utama yang tersedia: menggunakan file worker lokal via bundler (Vite/Webpack), memanfaatkan CDN resmi, atau melakukan import langsung dari modul npm.

Metode 1: Konfigurasi Menggunakan CDN (Paling Cepat)

Cara paling instan tanpa perlu menyalin file fisik ke direktori publik proyek Anda adalah dengan memanfaatkan CDN unpkg atau cdnjs yang disesuaikan dengan versi pdfjs-dist yang terinstal.

import React from 'react';
import { Document, Page, pdfjs } from 'react-pdf';

// Sesuaikan versinya dengan versi pdfjs-dist yang digunakan oleh react-pdf
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

export default function PdfViewer() {
  return (
    <Document file="sample.pdf">
      <Page pageNumber={1} />
    </Document>
  );
}

Metode 2: Setup Lokal dengan Vite

Jika aplikasi React Anda dibangun menggunakan bundler Vite, peletakan file worker harus diatur agar dapat diakses secara statis oleh browser tanpa masalah CORS atau jalur direktori yang salah.

Langkah-Langkah Implementasi Lokal di Vite:

1. Instal pustaka react-pdf dan pdfjs-dist melalui terminal: npm i react-pdf pdfjs-dist.
2. Salin file pdf.worker.min.mjs atau pdf.worker.min.js dari folder node_modules/pdfjs-dist/build/ ke dalam folder public/ di project Vite Anda.
3. Atur konfigurasi global pada komponen utama atau entry point (misalnya di App.jsx atau main.jsx):

import { pdfjs } from 'react-pdf';

// Arahkan langsung ke file worker di folder public
pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs';

Troubleshooting Masalah Umum PDF Worker

Kendala yang sering ditemui pengembang saat mengatur worker di React meliputi:

• Worker Version Mismatch: Versi pdfjs-dist tidak sinkron dengan versi yang diminta oleh react-pdf. Pastikan mencocokkan nomor versinya atau gunakan helper dari modul.
• Mime-Type Error: Server mengembalikan header text/html alih-alih application/javascript untuk file worker. Pastikan ekstensi file worker menggunakan .mjs atau konfigurasi server lokal mendefinisikan tipe MIME dengan benar.
• Webpack Worker Loader: Jika menggunakan Create React App atau Webpack konvensional, pastikan menggunakan import worker yang mendukung worker thread modern atau gunakan salinan statis di direktori public.