Pdf pages rendering twice (once with correct formatting and then twice with just text)

[Nathan Vale]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

Steps to reproduce

import { useCallback, useState } from 'react';
import { useResizeObserver } from '@wojtekmaj/react-hooks';
import { pdfjs, Document, Page } from 'react-pdf';
import {
  Button,
  Dialog,
  DialogContent,
  DialogActions,
  Typography,
} from 'zero-develop-component-library';

import type { PDFDocumentProxy } from 'pdfjs-dist';

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

const options = {
  cMapUrl: '/cmaps/',
  standardFontDataUrl: '/standard_fonts/',
};

const resizeObserverOptions = {};

const maxWidth = 800;

type PDFFile = string | File | null;

export interface SampleProps {
  onClose: () => void;
  open: boolean;
}

export const TermsAndConditionsModal = ({ onClose, open }: SampleProps) => {
  const [file, setFile] = useState<PDFFile>('./static/dummy_T_C.pdf');
  const [numPages, setNumPages] = useState<number>();
  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
  const [containerWidth, setContainerWidth] = useState<number>();

  const onResize = useCallback<ResizeObserverCallback>((entries) => {
    const [entry] = entries;

    if (entry) {
      setContainerWidth(entry.contentRect.width);
    }
  }, []);

  useResizeObserver(containerRef, resizeObserverOptions, onResize);

  function onDocumentLoadSuccess({
    numPages: nextNumPages,
  }: PDFDocumentProxy): void {
    setNumPages(nextNumPages);
  }

  function downloadPdf() {
    window.location.href = file as any;
  }

  return (
    <Dialog
      data-id="terms-and-conditions-confirm-modal"
      disableEscapeKeyDown
      open={open}
      onClose={onClose}
      maxWidth="xs"
    >
      <DialogContent sx={{ padding: '24px 16px 16px 16px' }}>
        <Typography sx={{ pb: '16px' }} variant="body2">
          Please tick the checkbox to agree to our Terms and Conditions before
          proceeding.
        </Typography>
        <DialogActions sx={{ justifyContent: 'center', padding: '0' }}>
          <Button onClick={onClose} variant="contained">
            Close
          </Button>
        </DialogActions>
        <div ref={setContainerRef}>
          <Document
            file={file}
            onLoadSuccess={onDocumentLoadSuccess}
            options={options}
          >
            {Array.from(new Array(numPages), (el, index) => (
              <Page
                key={`page_${index + 1}`}
                pageNumber={index + 1}
                width={
                  containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth
                }
              />
            ))}
          </Document>
        </div>
      </DialogContent>
    </Dialog>
  );
};

{
  "name": "zero-develop-frontend-desa",
  "description": "Zero dESA page",
  "author": "Origin Jindabyne",
  "version": "0.0.1",
  "private": true,
  "homepage": "/desa",
  "proxy": "http://localhost:3002",
  "resolutions": {
    "semver": "7.5.2",
    "webpack": "5.76.0",
    "@babel/traverse": "7.23.2",
    "tough-cookie": "4.1.3",
    "apollo-server-core": "https://nexus.jindabyne.em.originenergy.com.au/repository/npm-proxy/apollo-server-core/-/apollo-server-core-2.26.2.tgz#5391bb93654194a5d6b83cf1855f229c94d5b3b1",
    "core-js": "3.28.0",
    "requestretry": "7.1.0",
    "busboy": "1.6.0",
    "canvas": "link:./node_modules/.cache/null"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@local/zero-contract-desa": "file:../contract/build/ts",
    "@material-ui/icons": "^4.11.3",
    "@mui/icons-material": "^5.10.16",
    "@mui/material": "^5.11.9",
    "@mui/x-date-pickers": "^5.0.11",
    "@origin-digital/ods-core": "^1.7.0",
    "@types/node-fetch": "^2.6.1",
    "history": "^4.10.1",
    "lodash": "^4.17.21",
    "luxon": "^3.3.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.1",
    "zero-develop-component-library": "^0.3.31",
    "@wojtekmaj/react-hooks": "^1.18.0",
    "react-pdf": "latest"
  },
  "scripts": {
    "start": "ENV=local ts-node --project ./tsconfig.dev.json ./devTools/dev-server.ts",
    "start:contained": "ENV=contained ts-node --project ./tsconfig.dev.json ./devTools/dev-server.ts",
    "start:dev": "ENV=local react-app-rewired start",
    "test": "react-scripts test",
    "test:ci": "react-scripts test --ci --watchAll=false --coverage src --reporters=default --reporters=jest-junit --detectOpenHandles --silent=true --transformIgnorePatterns 'node_modules/(?!(zero-develop-component-library)/)'",
    "build": "react-app-rewired build",
    "build:ci": "ENV=local react-app-rewired build",
    "stub": "digital-graphql-stub",
    "stub:mocks": "ts-node --project ./tsconfig.dev.json ./devTools/load-mocks.ts",
    "prettier": "prettier --write \"./{src,test,devTools,functional-tests}/**/*.{ts,tsx,js}\"",
    "format": "yarn prettier",
    "format:check": "yarn prettier -l",
    "lint": "tslint 'src/**/*.ts?(x)'",
    "eject": "react-scripts eject",
    "type:check": "tsc --noEmit"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@origin-digital/digital-graphql-stub": "^1.11.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^12.1.5",
    "@testing-library/react-hooks": "^8.0.1",
    "@testing-library/user-event": "^14.4.3",
    "@types/history": "^4.7.8",
    "@types/jest": "^28.1.6",
    "@types/luxon": "^3.3.0",
    "@types/node": "^18.7.1",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@types/react-router-dom": "^5.3.3",
    "@types/styled-components": "^5.1.26",
    "axios": "^0.26.1",
    "customize-cra": "^1.0.0",
    "husky": "4",
    "jest-junit": "^14.0.0",
    "ls": "^0.2.1",
    "prettier": "^2.7.1",
    "react": "^17.0.2",
    "react-app-rewired": "^2.1.8",
    "react-dom": "^17.0.2",
    "react-select": "5.2.2",
    "react-test-renderer": "^17.0.1",
    "rewire": "^5.0.0",
    "start-server-and-test": "^1.12.1",
    "styled-components": "5.2.1",
    "ts-node": "^10.8.0",
    "tslint": "^6.1.3",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "^4.0.3"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn type:check && yarn format:check && yarn lint && yarn test:ci",
      "post-merge": "make -C ../ prepare"
    }
  },
  "jest": {
    "moduleNameMapper": {
      "\\worker-loader": "<rootDir>/testing-utils/__mocks__/workerMock.js"
    },
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!<rootDir>/node_modules/",
      "!<rootDir>/src/index.tsx",
      "!<rootDir>/src/Constants/*",
      "!<rootDir>/src/Contracts/**/*",
      "!<rootDir>/src/**/*.Styles.{ts,tsx}",
      "!<rootDir>/src/types/*",
      "!**/*.d.ts"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 5,
        "functions": 4,
        "lines": 5,
        "statements": 5
      }
    },
    "transformIgnorePatterns": [
      "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)",
      "node_modules/(?!(zero-develop-component-library)/)"
    ]
  }
}

Expected behavior

Pdf pages should render correctly with no additional pages with just text

Actual behavior

Pdf pages render incorrectly with additional pages with just text

Additional information

No response

Environment

• Browser (if applicable):
• React-PDF version:
• React version:
• Webpack version (if applicable):

[CSWITH89]

I am also encountering this issue. Any update?

[Marcin Wanago]

@CSWITH89 Try using renderTextLayer={false} renderAnnotationLayer={false}

[Wojciech Maj]

Duplicate of #1292

[Wojciech Maj]

@mwanago This way you're removing an important accessibility feature. I would advise against it in most cases.