patik / within-viewport

JavaScript utility that determines whether an element is completely within the browser viewport
http://patik.github.io/within-viewport/
BSD 3-Clause "New" or "Revised" License
254 stars 58 forks source link

ReferenceError: window is not defined in withinviewreport.js which is under node_modules #21

Closed mehbubOG closed 6 years ago

mehbubOG commented 6 years ago

Hi,

I am integrating my existing angular project into Universal code.I am able to bulid the server and in dist folder i am able to create server and browser folders.While i am running the server, i am getting the below error. This is not in my custom modules. It is in withinviewreport.js under node_modules

   dist\server.js:160472
     var canUseWindowDimensions = window.innerHeight !== undefined; // IE 8 and lower fail this
                                                          ^      ReferenceError: window is not defined

Versions of ngx-bootstrap, Angular, and Bootstrap:

 "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "angular-2-local-storage": "^1.0.1",
    "angular-highcharts": "^5.0.7",
    "angular2-emoji": "^0.1.6",
    "angular2-emoji-picker": "^1.4.6",
    "angular2-highcharts": "^0.5.5",
    "angular2-infinite-scroll": "^0.3.5",
    "angular2-social-login": "^3.1.1",
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "core-js": "^2.4.1",
    "highcharts": "^6.0.2",
    "jquery": "^3.2.1",
    "lg-autoplay": "^1.0.4",
    "lg-fullscreen": "^1.0.1",
    "lg-hash": "^1.0.3",
    "lg-pager": "^1.0.2",
    "lg-share": "^1.1.0",
    "lg-thumbnail": "^1.1.0",
    "lg-video": "^1.1.0",
    "lg-zoom": "^1.1.0",
    "lightgallery": "^1.6.4",
    "lightgallery.js": "^1.0.1",
    "ng2-go-top-button": "^2.0.8",
    "ng2-google-place-autocomplete": "^1.4.2",
    "ng2-pop-over": "^0.9.37",
    "ng2-toastr": "^4.0.1",
    "ng2-validation": "^4.2.0",
    "ng2-bootstrap": "^1.6.3",
    "ngx-chips": "^1.5.3",
    "ngx-pagination": "^3.0.1",
    "ngx-tour": "0.0.1",
    "rxjs": "^5.5.2",
    "time-ago-pipe": "^1.2.1",
    "ts-loader": "^3.1.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/highcharts": "^5.0.11",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }

Please let me know how can i over come to run my project

patik commented 6 years ago

The problem is that window doesn't exist on the server (neither does document or any other DOM element). In fact, this plugin doesn't make any sense to run in non-browser environments since there are no elements to measure.

I added some verification logic in the latest version (2.0.1) so it shouldn't completely fail when it's not in the browser. Even so, perhaps there is a way you can exclude this script except when it is running in the browser.

suparnavg commented 6 years ago

@patik can you update the fixed release on npm? Currently unable to install 2.0.1 using npm. Thank you!

npm ERR! code ETARGET
npm ERR! notarget No matching version found for withinviewport@2.0.1
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
patik commented 6 years ago

@suparnavg Just published 2.1.0, sorry for the delay.