Upgrade react-pdf from v8 to v9

package.json

@@ -96,7 +96,7 @@
     "react-imask": "^7.6.1",
     "react-leaflet": "^4.2.1",
     "react-number-format": "^5.4.2",
-    "react-pdf": "^8.0.2",
+    "react-pdf": "^9.2.1",
     "react-router-dom": "^6.25.1",
     "typescript": "^5.5.4",
     "uuid": "^10.0.0",

src/components/elements/upload/fileDialog/FilePreview.tsx

@@ -10,9 +10,14 @@ import {
   Typography,
 } from '@mui/material';
 import React, { useMemo, useState } from 'react';
-import { Document, Page } from 'react-pdf';
+import { Document, Page, pdfjs } from 'react-pdf';
 import { FileFieldsFragment } from '@/types/gqlTypes';
 
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url
+).toString();
+
 export type FileDialogProps = {
   file: Pick<FileFieldsFragment, 'url' | 'name' | 'contentType'> &
     Partial<Omit<FileFieldsFragment, 'url' | 'name' | 'contentType'>>;
@@ -179,8 +184,6 @@ const FilePreview: React.FC<{ file: FileDialogProps['file'] }> = ({ file }) => {
       </Typography>
       <Box
         sx={(theme) => ({
-          backgroundColor: theme.palette.grey[300],
-          padding: 2,
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',

src/components/elements/upload/fileDialog/FilePreviewDialog.tsx

@@ -1,14 +1,11 @@
 import { DialogProps, Paper, Stack } from '@mui/material';
-import pdfWorker from 'pdfjs-dist/build/pdf.worker.js?url';
 import React, { useMemo } from 'react';
-import { pdfjs } from 'react-pdf';
+
 import FilePreview from '@/components/elements/upload/fileDialog/FilePreview';
 import useSafeParams from '@/hooks/useSafeParams';
 import ViewRecordDialog from '@/modules/form/components/ViewRecordDialog';
 import { FileFieldsFragment, RecordFormRole } from '@/types/gqlTypes';
 
-pdfjs.GlobalWorkerOptions.workerSrc = pdfWorker;
-
 // component for viewing a FileFieldsFragment. Viewing an unsaved File is not currently supported
 export type FileRecordDialogProps = {
   file: FileFieldsFragment;

vite.config.js

@@ -85,6 +85,9 @@ export default defineConfig(({ command, mode }) => {
       // Drop log statements when minifying
       pure: ['console.log', 'console.info', 'console.debug'],
     },
+    optimizeDeps: {
+      include: ['pdfjs-dist/build/pdf.worker.min.mjs'],
+    },
     test: {
       watch: false,
     },