[BUG] Error while reading the pages ! TypeError: Cannot read property 'getPage' of null

[redday059]

Describe the bug
Error message instead of pdf.
Error in console: **Error while reading the pages ! TypeError: Cannot read property 'getPage' of null **

Env
Package version: 2.2.3
OS: Mac Big Sur 11.4
All browsers.

Screenshots

PDF File
Any pdf file. For instance: http://www.africau.edu/images/default/sample.pdf

Details (please complete the following information):

• Device: Desktop
• OS: IOS Big Sur 11.4
• Browser: all
• Version: 2.2.3

**package.json: **

 "dependencies": {
    "@cospired/i18n-iso-languages": "^2.1.2",
    "@fortawesome/fontawesome-free": "^5.11.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/react-fontawesome": "^0.1.7",
    "@hanyk/rc-viewer": "^0.0.3",
    "@material-ui/core": "^4.9.12",
    "@material-ui/lab": "^4.0.0-alpha.51",
    "@material-ui/styles": "^4.10.0",
    "@types/pdf-viewer-reactjs": "^2.0.0",
    "@types/uuid-validate": "^0.0.1",
    "@webcomponents/webcomponentsjs": "^2.4.0",
    "axios": "^0.19.0",
    "babel": "^6.23.0",
    "bootstrap": "^4.3.1",
    "bulma": "^0.9.0",
    "bulma-helpers": "^0.3.12",
    "classnames": "^2.2.6",
    "date-fns": "^2.9.0",
    "emoji-dictionary": "^1.0.10",
    "file-loader": "^6.2.0",
    "formik": "^2.1.4",
    "google-protobuf": "^3.14.0",
    "i18n-iso-countries": "^5.1.0",
    "i18n-nationality": "^1.1.1",
    "i18next": "^19.0.1",
    "i18next-browser-languagedetector": "^4.0.1",
    "install": "^0.13.0",
    "long": "^4.0.0",
    "material-design-icons": "^3.0.1",
    "material-ui-confirm": "^2.1.1",
    "moment": "^2.24.0",
    "pdf-viewer-reactjs": "^2.0.7",
    "promise.allsettled": "^1.0.2",
    "prop-types": "^15.7.2",
    "protobufjs": "^6.10.2",
    "react": "^16.11.0",
    "react-confirm": "^0.1.20",
    "react-datepicker": "^3.3.0",
    "react-dom": "^16.11.0",
    "react-dropzone": "^11.2.4",
    "react-i18next": "^11.2.2",
    "react-inlinesvg": "^1.2.0",
    "react-keyboard-event-handler": "^1.5.4",
    "react-markdown": "^6.0.2",
    "react-mde": "^10.0.3",
    "react-modal": "^3.11.2",
    "react-pdf": "^4.1.0",
    "react-redux": "^7.1.3",
    "react-responsive-carousel": "^3.1.51",
    "react-router-dom": "^5.1.2",
    "react-select": "^3.0.8",
    "react-select-country-list": "^2.1.2",
    "react-slick": "^0.27.13",
    "react-tabs": "^3.1.1",
    "react-use": "^13.21.0",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "remark-breaks": "^2.0.0",
    "slick-carousel": "^1.8.1",
    "symfony-ts-router": "^1.0.6",
    "uuid": "^3.3.3",
    "uuid-validate": "^0.0.3",
    "yup": "^0.29.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/helper-validator-identifier": "^7.9.0",
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/preset-react": "^7.7.0",
    "@babel/preset-typescript": "^7.8.3",
    "@babel/runtime": "^7.7.2",
    "@svgr/webpack": "^5.1.0",
    "@symfony/webpack-encore": "^1.3.0",
    "@teamsupercell/typings-for-css-modules-loader": "^2.1.0",
    "@types/classnames": "^2.2.9",
    "@types/jest": "^25.1.2",
    "@types/promise.allsettled": "^1.0.3",
    "@types/react": "^16.9.17",
    "@types/react-redux": "^7.1.6",
    "@types/react-select": "^3.0.10",
    "@types/yup": "^0.26.32",
    "@typescript-eslint/eslint-plugin": "2.x",
    "@typescript-eslint/parser": "2.x",
    "autoprefixer": "^9.7.4",
    "babel-eslint": "10.x",
    "babel-jest": "^25.1.0",
    "babel-loader": "^8.0.6",
    "core-js": "^3.0.0",
    "css-loader": "^5.2.6",
    "eslint": "6.x",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-react-app": "^5.1.0",
    "eslint-plugin-flowtype": "3.x",
    "eslint-plugin-import": "2.x",
    "eslint-plugin-jsx-a11y": "6.x",
    "eslint-plugin-react": "7.x",
    "eslint-plugin-react-hooks": "^2.3.0",
    "husky": "^3.1.0",
    "jest": "^25.1.0",
    "json-loader": "^0.5.7",
    "mini-css-extract-plugin": "^1.6.0",
    "node-sass": "^6.0.0",
    "postcss-loader": "^5.3.0",
    "react-docgen-typescript-loader": "^3.6.0",
    "regenerator-runtime": "^0.13.2",
    "sass-loader": "^11.1.1",
    "ts-jest": "^25.2.0",
    "ts-loader": "^8.3.0",
    "typescript": "^3.9.9",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack-notifier": "^1.6.0"
  },
  "scripts": {
    "dev-server": "encore dev-server --port 8421 --hot",

** code **
// import routes from '@config/api-routes.json';
// import { Router as Routing } from 'symfony-ts-router';
// const router = new Routing();
// router.setRoutingData(routes);
//
// export default function Router(): Routing {
// return router;
// }

const imageLink = Router().generate('app_document_getdocumentpage', { pageId: document?.pages[0]?.id });

return (
  <PDFViewer document={{ url: imageLink }} canvasCss={styles.pdfCanvas} />
);

[NordlingDev]

It appears that whenever a re-render runs because of the document prop constantly being a new reference, something breaks inside. So if you memoize the object that is being passed to the document prop, it works.

[paragraje]

@NordlingDev Please can you explain with an example?

[NordlingDev]

@paragraje Instead of passing a new object for the document prop on each render, create a memoized object:

const imageLink = Router().generate('app_document_getdocumentpage', { pageId: document?.pages[0]?.id });
const doc = React.useMemo(() => ({ url: imageLink }), [imageLink]);

return (
  <PDFViewer document={doc} canvasCss={styles.pdfCanvas} />
);

This way you keep the same object reference at all times, unless imageLink changes.

[sankarkiran]

HI I try to implement pdf-viewer-reactjs to Load PDF from base64 string. But, I am getting the below error,

Error while reading the pages !
TypeError: Cannot set properties of null (setting 'height').

This is my code:
<PDFViewer
document={{ base64: source.base64 }}
/>
Please help me to resolve.
Please refer any documentation to explore pdf-viewer-reactjs.

Thnak you.