fix(island-ui): Polyfill for PDF viewer

jest.preset.js

@@ -24,6 +24,7 @@ module.exports = {
     // PDF viewer external css can be excluded from tests, otherwise will cause an error.
     '^react-pdf/dist/Page/(.*)$': 'jest-transform-stub',
   },
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!pdfjs-dist)'],
   /* TODO: Update to latest Jest snapshotFormat
    * By default Nx has kept the older style of Jest Snapshot formats
    * to prevent breaking of any existing tests with snapshots.

libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx

@@ -1,6 +1,6 @@
-import React, { FC, useEffect, useState, ReactNode } from 'react'
+import React, { FC, useState, ReactNode } from 'react'
 import { Box } from '../Box/Box'
-import type { Document, Page, Outline, pdfjs } from 'react-pdf'
+import { Document, Page, Outline, pdfjs } from 'react-pdf'
 import { Pagination } from '../Pagination/Pagination'
 import { LoadingDots } from '../LoadingDots/LoadingDots'
 import { AlertMessage } from '../AlertMessage/AlertMessage'
@@ -9,6 +9,11 @@ import 'react-pdf/dist/Page/AnnotationLayer.css'
 import * as styles from './PdfViewer.css'
 import cn from 'classnames'
 
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
+  import.meta.url,
+).toString()
+
 const pdfError = 'Villa kom upp við að birta skjal, reyndu aftur síðar.'
 
 export interface PdfViewerProps {
@@ -39,20 +44,8 @@ export const PdfViewer: FC<React.PropsWithChildren<PdfViewerProps>> = ({
 }) => {
   const [numPages, setNumPages] = useState(0)
   const [pageNumber, setPageNumber] = useState(1)
-  const [pdfLib, setPdfLib] = useState<IPdfLib>()
   const [pdfLibError, setPdfLibError] = useState<any>()
 
-  useEffect(() => {
-    import('react-pdf')
-      .then((pdf) => {
-        pdf.pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdf.pdfjs.version}/pdf.worker.min.mjs`
-        setPdfLib(pdf)
-      })
-      .catch((e) => {
-        setPdfLibError(e)
-      })
-  }, [])
-
   const onDocumentLoadSuccess = ({ numPages }: PdfProps) => {
     setNumPages(numPages)
   }
@@ -69,61 +62,58 @@ export const PdfViewer: FC<React.PropsWithChildren<PdfViewerProps>> = ({
     return errorComponent ?? <AlertMessage type="error" title={pdfError} />
   }
 
-  if (pdfLib) {
-    return (
-      <>
-        <pdfLib.Document
-          file={file}
-          onLoadSuccess={onDocumentLoadSuccess}
-          className={cn(styles.pdfViewer, { [styles.pdfSvgPage]: autoWidth })}
-          loading={() => loadingView()}
-          error={errorComponent ?? pdfError}
-          externalLinkTarget="_blank"
-        >
-          {showAllPages ? (
-            [...Array(numPages)].map((x, page) => (
-              <pdfLib.Page
-                key={`page_${page + 1}`}
-                pageNumber={page + 1}
-                renderTextLayer={true}
-                renderAnnotationLayer={true}
-                scale={scale}
-              />
-            ))
-          ) : (
-            <pdfLib.Page
+  return (
+    <>
+      <Document
+        file={file}
+        onLoadSuccess={onDocumentLoadSuccess}
+        className={cn(styles.pdfViewer, { [styles.pdfSvgPage]: autoWidth })}
+        loading={() => loadingView()}
+        onError={(error) => setPdfLibError(error)}
+        error={errorComponent ?? pdfError}
+        externalLinkTarget="_blank"
+      >
+        {showAllPages ? (
+          [...Array(numPages)].map((x, page) => (
+            <Page
+              key={`page_${page + 1}`}
+              pageNumber={page + 1}
               renderTextLayer={true}
               renderAnnotationLayer={true}
-              pageNumber={pageNumber}
               scale={scale}
             />
-          )}
-        </pdfLib.Document>
-
-        <Box
-          marginTop={2}
-          marginBottom={4}
-          className={cn({
-            [`${styles.displayNone}`]: showAllPages || numPages <= 1,
-          })}
-        >
-          <Pagination
-            page={pageNumber}
-            renderLink={(page, className, children) => (
-              <Box
-                cursor="pointer"
-                className={className}
-                onClick={() => setPageNumber(page)}
-              >
-                {children}
-              </Box>
-            )}
-            totalPages={numPages}
+          ))
+        ) : (
+          <Page
+            renderTextLayer={true}
+            renderAnnotationLayer={true}
+            pageNumber={pageNumber}
+            scale={scale}
           />
-        </Box>
-      </>
-    )
-  }
+        )}
+      </Document>
 
-  return loadingView()
+      <Box
+        marginTop={2}
+        marginBottom={4}
+        className={cn({
+          [`${styles.displayNone}`]: showAllPages || numPages <= 1,
+        })}
+      >
+        <Pagination
+          page={pageNumber}
+          renderLink={(page, className, children) => (
+            <Box
+              cursor="pointer"
+              className={className}
+              onClick={() => setPageNumber(page)}
+            >
+              {children}
+            </Box>
+          )}
+          totalPages={numPages}
+        />
+      </Box>
+    </>
+  )
 }

package.json

@@ -126,7 +126,6 @@
     "@types/react-csv": "1.1.1",
     "@types/react-input-mask": "3.0.0",
     "@types/react-modal": "3.13.1",
-    "@types/react-pdf": "5.0.9",
     "@types/react-table": "7.0.24",
     "@vanilla-extract/babel-plugin": "1.1.6",
     "@vanilla-extract/css": "1.7.0",

yarn.lock

@@ -20845,16 +20845,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-pdf@npm:5.0.9":
-  version: 5.0.9
-  resolution: "@types/react-pdf@npm:5.0.9"
-  dependencies:
-    "@types/react": "*"
-    pdfjs-dist: ^2.10.377
-  checksum: 5247dd76dc20beb504f13756d576d4036dab19416de648553f6405b44d4cf8467be3d50063f98cc07eed39b37d07bc834756a3f275b8bc7f635226fd59ae17c7
-  languageName: node
-  linkType: hard
-
 "@types/react-table@npm:7.0.24":
   version: 7.0.24
   resolution: "@types/react-table@npm:7.0.24"
@@ -37358,7 +37348,6 @@ __metadata:
     "@types/react-infinite-scroller": ^1.2.3
     "@types/react-input-mask": 3.0.0
     "@types/react-modal": 3.13.1
-    "@types/react-pdf": 5.0.9
     "@types/react-table": 7.0.24
     "@types/request": 2.48.5
     "@types/resolve": ^1.20.2
@@ -45296,15 +45285,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pdfjs-dist@npm:^2.10.377":
-  version: 2.10.377
-  resolution: "pdfjs-dist@npm:2.10.377"
-  peerDependencies:
-    worker-loader: ^3.0.7
-  checksum: 5a4c14777676e15aeca9a627cc1f368821071ae040154983edf21f1040cb89acd9b0168b43b64ac10d66f86094dcb48b33513b9810b6d422446c599fb172d5a4
-  languageName: node
-  linkType: hard
-
 "pdfkit@npm:0.11.0":
   version: 0.11.0
   resolution: "pdfkit@npm:0.11.0"