Cannot read property ‘div’ of undefined

- [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

3 thoughts on “Cannot read property ‘div’ of undefined

  1. 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.

  2. 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.
  3. I’m using single-pdf-viewer and I had a similar problem:

    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)
    

    In a node_modules, in a file ‘pdf_viewer.js’ (node_modules/pdfjs-dist/web/pdf_viewer.js) from line 3326 starts method:

    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;
              }
    

    Problem was that ‘pageView.div’ was ‘undefined’, and solution was simple:

    if (pageView !== undefined) {
        this.viewer.appendChild(pageView.div);
    }
    

    so method looks like:

    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;
              }
    

Cannot read property ‘div’ of undefined

System:

  • OS: macOS High Sierra 10.13.6
  • CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  • Memory: 428.57 MB / 16.00 GB
  • Shell: 3.2.57 – /bin/bash

Binaries:

  • Node: 8.11.4 – /usr/local/bin/node
  • Yarn: 1.12.3 – /usr/local/bin/yarn
  • npm: 6.5.0 – ~/.npm-global/bin/npm

npmPackages:

  • styled-components: ^4.1.3 => 4.1.3

Reproduction

This issue occurred once I have updated project dependencies:

-    "babel-eslint": "^8.2.6",
-    "babel-loader": "^7.1.5",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.4",
-    "flow-bin": "^0.86.0",
+    "flow-bin": "^0.89.0",
-    "lint-staged": "^7.3.0",
+    "lint-staged": "^8.1.0",
-    "styled-components": "^4.1.1",
+    "styled-components": "^4.1.3",

Steps to reproduce

git clone https://github.com/kettanaito/atomic-layout
cd atomic-layout
git checkout dependencies
npm install
npm run storybook

You can see all the config files (babel, webpack, etc.) on the mentioned branch.

See the following exception thrown by Storybook.

Cannot read property 'div' of undefined
    TypeError: Cannot read property 'div' of undefined
    at Module.srcComponentsBoxJsx (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:2172:76)
    at __webpack_require__ (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:199:27)
    at Module.srcIndexJs (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:2815:60)
    at __webpack_require__ (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:199:27)
    at http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:393:14
    at http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:395:6
    at webpackUniversalModuleDefinition (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:143:898)
    at Module.<anonymous> (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:144:3)
    at Module../index.js (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:5381:30)
    at __webpack_require__ (http://localhost:6020/runtime~main.4a3566b995dd1c2ae279.bundle.js:782:30)

The following outputs undefined in the console:

import styled from 'styled-components'

console.log(styled)

I do acknowledge that this is most likely not an issue with the styled-components package. However, I would be very thankful for help, as I couldn’t find any relevant issues anywhere else.

Expected Behavior

  • styled can be imported as a default export of styled-components package

Actual Behavior

  • import styled from 'styled-components' resolves styled to undefined

2 thoughts on “Cannot read property ‘div’ of undefined

  1. I am facing the same issue as @kettanaito.

    If I do const Element = styled.View I get this error:
    image

    It seems I need to change all my declarations to

    import { View } from 'react-native
    const Element = styled(View)

    to make it work but I really don’t want to do that, or downgrade my babel-loader.

    Any ideas on how to fix this?