Encountering a TypeError: Cannot read properties of null (reading 'getBoundingClientRect') in ResponsiveContainer.js when loading PDFs in a React

[jagathiswarant]

WebViewer Version:
“@pdftron/webviewer”: “^11.4.0”

Do you have an issue with a specific file(s)?
No—this error occurs when loading any PDF in our React sample.

Can you reproduce using one of our samples or online demos?
Yes, please refer the repo: GitHub - JegathiswaranThirumalai/webviewer-react

Are you using the WebViewer server?
No. We’re copying the static WebViewer distribution into our public folder and loading it via Vite.

Does the issue only happen on certain browsers?
No. We’ve seen it in both Chrome and Edge

Is your issue related to a front-end framework?
Yes—this happens in our React (v 18.3.1) app built with Vite (v 6.1.0).

Is your issue related to annotations?
No. The error is thrown from ResponsiveContainer.js in the WebViewer UI code

Please give a brief summary of your issue:
(Think of this as an email subject)
TypeError in ResponsiveContainer.js when loading PDF in React

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

Clone & install

git clone https://github.com/JegathiswaranThirumalai/webviewer-react.git
cd webviewer-react
npm install

Start dev server
npm start

Observe error
In the dev tools console you’ll see:

TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
  at ResponsiveContainer.js:47:44
  at …

Please provide a link to a minimal sample where the issue is reproducible:

GitHub - JegathiswaranThirumalai/webviewer-react

[system]

Hello, I’m AiRon, an automated tech support bot
While you wait for one of our customer support representatives, I can help you with your question.

The error you’re encountering, TypeError: Cannot read properties of null (reading 'getBoundingClientRect'), typically arises when the code attempts to access the dimensions of an element that hasn’t been properly mounted or is missing from the DOM. This can happen in React applications when elements are rendered conditionally or asynchronously.

Some things you can try:

• Ensure that all components are properly mounted before attempting to access their dimensions. This might involve using React’s useEffect hook to ensure the DOM is fully rendered.


• Check if the element you’re trying to access is conditionally rendered and ensure its presence before invoking methods on it.


• Make sure that the WebViewer is initialized after the component has been fully mounted. This is crucial in asynchronous setups like React.


• Investigate the order of operations in your component lifecycle to ensure that all necessary elements are available when accessed.

Here are some resources that might help you:

• React PDF Library - WebViewer Get Started: This guide provides foundational steps for setting up WebViewer in a React application.


• Integrating TypeScript with WebViewer: Learn how to integrate WebViewer with TypeScript for better type safety and debugging capabilities.


• Copying WebViewer Static Assets Via Plugin: Ensure that asset copying is handled correctly in your build process, which can prevent rendering errors.


• Convert MS Office to PDF using JavaScript: While not directly related to your issue, understanding how to handle different document types may provide insights into handling PDFs.


• Integrate WebViewer PDF Viewer & Editor into a Next.js app: Offers guidance on integrating WebViewer in a modern JavaScript framework, which may share similarities with Vite setups.

Hopefully, this helps you solve your problem while you wait for a human to get back to you.

[luke.dam]

Hello Jagathiswaran,

Thank you for contacting WebViewer Forums.

The getBoundingClientRect error seems to appear when there are no toolgroups in the header. By adding elements back into the header from your readMode array, the issue is no longer there. Please let me know if this works for you.

Regards,
Luke