diff --git a/jest.preset.js b/jest.preset.js index 1651c8322bda..71c35bbdf10a 100644 --- a/jest.preset.js +++ b/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: ['/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. diff --git a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx index 641aab7dff71..73c49825db29 100644 --- a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx +++ b/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,18 @@ import 'react-pdf/dist/Page/AnnotationLayer.css' import * as styles from './PdfViewer.css' import cn from 'classnames' +if (typeof window !== 'undefined') { + // @ts-expect-error - dynamic import + import('pdfjs-dist/legacy/build/pdf.worker.min.mjs') + .then((workerSrc) => { + pdfjs.GlobalWorkerOptions.workerSrc = workerSrc + }) + .catch(() => { + pdfjs.GlobalWorkerOptions.workerSrc = + 'pdfjs-dist/legacy/build/pdf.worker.min.mjs' // Fallback if dynamic import fails + }) +} + const pdfError = 'Villa kom upp við að birta skjal, reyndu aftur síðar.' export interface PdfViewerProps { @@ -39,20 +51,8 @@ export const PdfViewer: FC> = ({ }) => { const [numPages, setNumPages] = useState(0) const [pageNumber, setPageNumber] = useState(1) - const [pdfLib, setPdfLib] = useState() const [pdfLibError, setPdfLibError] = useState() - 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 +69,58 @@ export const PdfViewer: FC> = ({ return errorComponent ?? } - if (pdfLib) { - return ( - <> - loadingView()} - error={errorComponent ?? pdfError} - externalLinkTarget="_blank" - > - {showAllPages ? ( - [...Array(numPages)].map((x, page) => ( - - )) - ) : ( - + loadingView()} + onError={(error) => setPdfLibError(error)} + error={errorComponent ?? pdfError} + externalLinkTarget="_blank" + > + {showAllPages ? ( + [...Array(numPages)].map((x, page) => ( + - )} - - - - ( - setPageNumber(page)} - > - {children} - - )} - totalPages={numPages} + )) + ) : ( + - - - ) - } + )} + - return loadingView() + + ( + setPageNumber(page)} + > + {children} + + )} + totalPages={numPages} + /> + + + ) } diff --git a/libs/shared/types/src/lib/pdfjs-dist.d.ts b/libs/shared/types/src/lib/pdfjs-dist.d.ts new file mode 100644 index 000000000000..84a5bcfe0168 --- /dev/null +++ b/libs/shared/types/src/lib/pdfjs-dist.d.ts @@ -0,0 +1,5 @@ +declare module 'pdfjs-dist/legacy/build/pdf.worker.min.mjs' { + const workerSrc: string + + export default workerSrc +} diff --git a/package.json b/package.json index 2cfe86b20cac..a1fecbc01584 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index a448c7be1a3d..24ebf506ceef 100644 --- a/yarn.lock +++ b/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"