Ng2-pdf-viewer: Cannot read property 'div' of undefined

Created on 13 Dec 2017 · 15Comments · Source: VadimDez/ng2-pdf-viewer

- [x] bug report -> please search issues before submitting
- [ ] feature request

When page changed it's success to change the page number, but It's failed when scrolling to the page because of this error :

ERROR TypeError: Cannot read property 'div' of undefined
    at PDFViewer._resetCurrentPageView (pdf_viewer.js:1556)
    at PDFViewer._setCurrentPageNumber (pdf_viewer.js:1281)
    at PDFViewer.set (pdf_viewer.js:1858)
    at eval (pdf-viewer.component.js:258)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4620)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at ZoneTask.invokeTask (zone.js:499)
    at ZoneTask.invoke (zone.js:488)

I'm using Angular 5.0.3 and ng2-pdf-viewer 3.0.2

stale

Source

yanlyan

👍13

Most helpful comment

I had the same error and I fixed it with following changes.

ng2-pdf-viewer has a dependency called pdfjs-dist. You can find it in node_modules.
Open this file -> node_modules/pdfjs-dist/web/pdf_viewer.js
In pdf_viewer.js file, search for this line of code -> var elt = views[index].div; It is inside 'backtrackBeforeAllVisibleElements' function.
Change that code line to var elt = views[index-1].div; and save.

koggalage on 22 Apr 2019

👍6 😕3 👀1 🚀1 ❤1 🎉1

All 15 comments

Could you provide steps to reproduce this?

VadimDez on 24 Dec 2017

same here! any update?

giacomoalonzi on 8 Feb 2018

I had the same problem. I fixed it by removing [stick-to-page]="true" from my html definition.
You should try to check your configuration.

rmarteau on 5 Apr 2018

👍6

I am also getting the error cannot read property of undefined when I pop a page which renders the PDF in ionic.

core.js:1449 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'div' of undefined
TypeError: Cannot read property 'div' of undefined
    at backtrackBeforeAllVisibleElements (pdf_viewer.js:558)
    at getVisibleElements (pdf_viewer.js:605)
    at PDFViewer._getVisiblePages (pdf_viewer.js:5400)
    at PDFViewer.forceRendering (pdf_viewer.js:5080)
    at PDFRenderingQueue.renderHighestPriority (pdf_viewer.js:4191)
    at continueRendering (pdf_viewer.js:4256)
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4760)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at backtrackBeforeAllVisibleElements (pdf_viewer.js:558)
    at getVisibleElements (pdf_viewer.js:605)
    at PDFViewer._getVisiblePages (pdf_viewer.js:5400)
    at PDFViewer.forceRendering (pdf_viewer.js:5080)
    at PDFRenderingQueue.renderHighestPriority (pdf_viewer.js:4191)
    at continueRendering (pdf_viewer.js:4256)
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4760)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4751)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)

I am using Ionic 3.20.0 and ng2-pdf-viewer ^5.1.1

DEBOJYOTI11 on 23 Jul 2018

👍1

So I see this issue when I render the pdf viewer in a component and its a large pdf and as it is rendering (can see the first page but the rest are not rendered yet) and I decide to close it (removes the pdf-viewer from the page via a *ngIf) then it crashes and gives me that error

khrice on 29 Aug 2018

This looks to be the same as #367

khrice on 29 Aug 2018

I get this issue when i try to render the pdf viewer inside a bootstrap modal

joaogoya on 9 Oct 2018

I am getting the same error when I am trying to render pdf inside iframe.

Durdush on 19 Oct 2018

I'm also having a hard time with this issue.
It seems like the error is thrown whenever the pdf-viewer is hidden or closed.
For example -

Like @Durdush mentioned, when you use the pdf-viewer as a fallback to an /<object>/<embed> tags (showing a pdf for non-plugin browsers)</li> <li>When it's hidden (for example, pdf-viewer is hidden when hiding a modal)</li> </ol> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/34273570?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="noamyg picture"> <strong>noamyg</strong> <span class="text-muted ml-1">on 11 Dec 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>pdf viewer container should be not be in collapsible panel. container Div should be open. no any animation to open div.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/40717188?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="pradippatel1411 picture"> <strong>pradippatel1411</strong> <span class="text-muted ml-1">on 27 Jan 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3731713875" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I got the same error when I incorporate <code>pdf-viewer</code> into a <code>MatDialog</code> and close the dialog.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/8356125?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="zhaodong-wang picture"> <strong>zhaodong-wang</strong> <span class="text-muted ml-1">on 14 Mar 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I got the same error when I reloaded the pdf-viewer with the same pdf file or a different one, while the current page i.e [page], was set to 2 or more. And solved the same by resetting [page] to 1 before reloading the viewer.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/32163295?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="preethamsgowda picture"> <strong>preethamsgowda</strong> <span class="text-muted ml-1">on 3 Apr 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I had the same error and I fixed it with following changes.</p> <ul> <li>ng2-pdf-viewer has a dependency called pdfjs-dist. You can find it in node_modules.</li> <li>Open this file -> node_modules/pdfjs-dist/web/pdf_viewer.js</li> <li>In pdf_viewer.js file, search for this line of code -> <code>var elt = views[index].div;</code> It is inside 'backtrackBeforeAllVisibleElements' function.</li> <li>Change that code line to <code>var elt = views[index-1].div;</code> and save.</li> </ul> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/18124628?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="koggalage picture"> <strong>koggalage</strong> <span class="text-muted ml-1">on 22 Apr 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">6</span> 😕<span class="ml-2 mr-3">3</span> 👀<span class="ml-2 mr-3">1</span> 🚀<span class="ml-2 mr-3">1</span> ❤<span class="ml-2 mr-3">1</span> 🎉<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I'm using single-pdf-viewer and I had a similar problem:</p> <pre><code class="prettyprint">Unable to initialize viewer TypeError: Cannot read property 'div' of undefined at PDFSinglePageViewer._ensurePageViewVisible (vendor.js:128660) at vendor.js:128635 at vendor.js:125843 at Array.forEach (<anonymous>) at EventBus.dispatch (vendor.js:125842) at vendor.js:126729 at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:2749) at Object.onInvoke (vendor.js:69038) at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:2748) at Zone.push.../../node_modules/zone.js/dist/zone.js.Zone.run (polyfills.js:2508) </code></pre> <p>In a node_modules, in a file 'pdf_viewer.js' (node_modules/pdfjs-dist/web/pdf_viewer.js) from line 3326 starts method:</p> <pre><code class="prettyprint">value: function _ensurePageViewVisible() { var pageView = this._pages[this._currentPageNumber - 1]; var previousPageView = this._pages[this._previousPageNumber - 1]; var viewerNodes = this.viewer.childNodes; switch (viewerNodes.length) { case 0: this.viewer.appendChild(pageView.div); break; case 1: if (viewerNodes[0] !== previousPageView.div) { throw new Error('_ensurePageViewVisible: Unexpected previously visible page.'); } if (pageView === previousPageView) { break; } this._shadowViewer.appendChild(previousPageView.div); this.viewer.appendChild(pageView.div); this.container.scrollTop = 0; break; default: throw new Error('_ensurePageViewVisible: Only one page should be visible at a time.'); } this._previousPageNumber = this._currentPageNumber; } </code></pre> <p>Problem was that 'pageView.div' was 'undefined', and solution was simple:</p> <pre><code class="prettyprint">if (pageView !== undefined) { this.viewer.appendChild(pageView.div); } </code></pre> <p>so method looks like:</p> <pre><code class="prettyprint">value: function _ensurePageViewVisible() { var pageView = this._pages[this._currentPageNumber - 1]; var previousPageView = this._pages[this._previousPageNumber - 1]; var viewerNodes = this.viewer.childNodes; switch (viewerNodes.length) { case 0: if (pageView !== undefined) { this.viewer.appendChild(pageView.div); } // this.viewer.appendChild(pageView.div); break; case 1: if (viewerNodes[0] !== previousPageView.div) { throw new Error('_ensurePageViewVisible: Unexpected previously visible page.'); } if (pageView === previousPageView) { break; } this._shadowViewer.appendChild(previousPageView.div); this.viewer.appendChild(pageView.div); this.container.scrollTop = 0; break; default: throw new Error('_ensurePageViewVisible: Only one page should be visible at a time.'); } this._previousPageNumber = this._currentPageNumber; } </code></pre> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/38784528?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="wlodekDev picture"> <strong>wlodekDev</strong> <span class="text-muted ml-1">on 26 Jul 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">3</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/in/1724?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="stale[bot] picture"> <strong>stale[bot]</strong> <span class="text-muted ml-1">on 31 Jul 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(281682670, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(281682670, 1);" onclick="rate(281682670, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(281682670, 2);" onclick="rate(281682670, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(281682670, 3);" onclick="rate(281682670, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(281682670, 4);" onclick="rate(281682670, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(281682670, 5);" onclick="rate(281682670, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/ng2-pdf-viewer/361296320/cannot-read-property-sendwithpromise-of-null-error">Cannot read property 'sendWithPromise' of null error</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/32817720?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="fncamm picture"> <strong class="pr-1" dir="ltr">fncamm</strong>  ·  <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ng2-pdf-viewer/637227513/i-have-this-error-angular-8">I have this error (Angular 8)</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/35272949?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="GarciaFreelancer picture"> <strong class="pr-1" dir="ltr">GarciaFreelancer</strong>  ·  <span class="px-1" dir="ltr">6</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ng2-pdf-viewer/456628700/fit-pdf-with-height-of-the-container">Fit PDF with height of the container</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/31620469?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="RahmatAliMalik5 picture"> <strong class="pr-1" dir="ltr">RahmatAliMalik5</strong>  ·  <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ng2-pdf-viewer/272215382/pdfdocumentproxy-pdfprogressdata-are-undefined-for-compiler">PDFDocumentProxy, PDFProgressData are undefined for compiler</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/3748453?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="VadimDez picture"> <strong class="pr-1" dir="ltr">VadimDez</strong>  ·  <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ng2-pdf-viewer/292367131/zoom-in-document">Zoom in document</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/35461673?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="quentinmachard-niji picture"> <strong class="pr-1" dir="ltr">quentinmachard-niji</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/VadimDez/ng2-pdf-viewer/issues/224" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>