ReferenceError: window is not defined

Hello.

I would like to use this module with angular universal. However, the following error occurred.

> node dist/server.js

/Users/cse_t_kutsuna/git/study/blah-map/node_modules/leaflet/dist/leaflet-src.js:226
var requestFn = window.requestAnimationFrame || getPrefixed('RequestAnimationFrame') || timeoutDefer;
                                                                                     ^

ReferenceError: window is not defined
    at /Users/me/git/study/blah-map/node_modules/leaflet/dist/leaflet-src.js:226:86
    at version (/Users/me/git/study/blah-map/node_modules/leaflet/dist/leaflet-src.js:6:65)
    at Object.<anonymous> (/Users/me/git/study/blah-map/node_modules/leaflet/dist/leaflet-src.js:9:2)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! blah-map@0.0.0 start: `node dist/server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the blah-map@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/me/.npm/_logs/2017-07-25T06_32_11_130Z-debug.log

I tried using isPlatformBrowser with client only but leafletOptions parse error appears

Is there any good solution?

Issue Analytics

State:
Created 6 years ago
Comments:11 (5 by maintainers)

Top GitHub Comments

16reactions

reblacecommented, Aug 28, 2017

I’m gonna close this for now as I don’t think there’s an action here. Thanks for using the plugin!

3reactions

alvicscommented, Aug 30, 2018

closed? what was the cause? when I run npm run build:ssr && npm run serve:ssr I am getting the same error! window not defined?? but everything works fine on my local server ng serve port (4200)? When will angular make ssr or pre rendering a little more user friendly?

my-app@0.0.0 serve:ssr K:\Users\allen\Desktop\snipcart-angular-universal

> node dist/server

K:\Users\allen\Desktop\snipcart-angular-universal\dist\server.js:159614
                return window.requestAnimationFrame ||
                ^

ReferenceError: window is not defined
    at K:\Users\allen\Desktop\snipcart-angular-universal\dist\server.js:159614:3
    at module.exports (K:\Users\allen\Desktop\snipcart-angular-universal\dist\server.js:159622:3)
    at Object.<anonymous> (K:\Users\allen\Desktop\snipcart-angular-universal\dist\server.js:158826:25)
    at __webpack_require__ (K:\Users\allen\Desktop\snipcart-angular-universal\dist\server.js:20:30)
    at Object.<anonymous> (K:\Users\allen\Desktop\snipcart-angular-universal\dist\server.js:152531:66)
    at __webpack_require__ (K:\Users\allen\Desktop\snipcart-angular-universal\dist\server.js:20:30)
    at Object.angular-bootstrap-md (K:\Users\allen\Desktop\snipcart-angular-universal\dist\server.js:54400:18)
    at __webpack_require__ (K:\Users\allen\Desktop\snipcart-angular-universal\dist\server.js:52315:30)
    at Object../src/app/components/home/home.component.ngfactory.js (K:\Users\allen\Desktop\snipcart-angular-universal\dist\server.js:53250:10)
    at __webpack_require__ (K:\Users\allen\Desktop\snipcart-angular-universal\dist\server.js:52315:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.0.0 serve:ssr: `node dist/server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.0.0 serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\alvic\AppData\Roaming\npm-cache\_logs\2018-08-30T01_50_27_840Z-debug.log

my angular.json { “$schema”: “./node_modules/@angular/cli/lib/config/schema.json”, “version”: 1, “newProjectRoot”: “projects”, “projects”: { “my-app”: { “root”: “”, “sourceRoot”: “src”, “projectType”: “application”, “prefix”: “app”, “schematics”: { “@schematics/angular:component”: { “styleext”: “scss” } }, “architect”: { “build”: { “builder”: “@angular-devkit/build-angular:browser”, “options”: { “outputPath”: “dist/browser”, “index”: “src/index.html”, “main”: “src/main.ts”, “polyfills”: “src/polyfills.ts”, “tsConfig”: “src/tsconfig.app.json”, “assets”: [“src/favicon.ico”, “src/assets”, “src/manifest.json”], “styles”: [ { “input”: “node_modules/@angular/material/prebuilt-themes/indigo-pink.css” }, “node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss”, “node_modules/angular-bootstrap-md/scss/mdb-free.scss”, “src/styles.scss” ], “scripts”: [“node_modules/chart.js/dist/Chart.js”] }, “configurations”: { “production”: { “fileReplacements”: [ { “replace”: “src/environments/environment.ts”, “with”: “src/environments/environment.prod.ts” } ], “optimization”: true, “outputHashing”: “all”, “sourceMap”: false, “extractCss”: true, “namedChunks”: false, “aot”: true, “extractLicenses”: true, “vendorChunk”: false, “buildOptimizer”: true, “serviceWorker”: true } } }, “serve”: { “builder”: “@angular-devkit/build-angular:dev-server”, “options”: { “browserTarget”: “my-app:build” }, “configurations”: { “production”: { “browserTarget”: “my-app:build:production” } } }, “extract-i18n”: { “builder”: “@angular-devkit/build-angular:extract-i18n”, “options”: { “browserTarget”: “my-app:build” } }, “test”: { “builder”: “@angular-devkit/build-angular:karma”, “options”: { “main”: “src/test.ts”, “polyfills”: “src/polyfills.ts”, “tsConfig”: “src/tsconfig.spec.json”, “karmaConfig”: “src/karma.conf.js”, “styles”: [ { “input”: “node_modules/@angular/material/prebuilt-themes/indigo-pink.css” }, “src/styles.scss” ], “scripts”: [], “assets”: [“src/favicon.ico”, “src/assets”, “src/manifest.json”] } }, “lint”: { “builder”: “@angular-devkit/build-angular:tslint”, “options”: { “tsConfig”: [“src/tsconfig.app.json”, “src/tsconfig.spec.json”], “exclude”: [“/node_modules/”] } }, “server”: { “builder”: “@angular-devkit/build-angular:server”, “options”: { “outputPath”: “dist/server”, “main”: “src/main.server.ts”, “tsConfig”: “src/tsconfig.server.json” } } } }, “my-app-e2e”: { “root”: “e2e/”, “projectType”: “application”, “architect”: { “e2e”: { “builder”: “@angular-devkit/build-angular:protractor”, “options”: { “protractorConfig”: “e2e/protractor.conf.js”, “devServerTarget”: “my-app:serve” }, “configurations”: { “production”: { “devServerTarget”: “my-app:serve:production” } } }, “lint”: { “builder”: “@angular-devkit/build-angular:tslint”, “options”: { “tsConfig”: “e2e/tsconfig.e2e.json”, “exclude”: [“/node_modules/”] } } } } }, “defaultProject”: “my-app” }