ReferenceError: window is not defined #62

cse-t-kutsuna · 2017-07-25T06:46:27Z

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! [email protected] start: `node dist/server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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?

The text was updated successfully, but these errors were encountered:

reblace · 2017-07-27T16:57:08Z

I'm not sure if Leaflet works with server rendering. If it does, then it sounds like you need to shim the window object or maybe ensure that a browser lib is getting loaded by your bundler.

cse-t-kutsuna · 2017-08-01T02:03:19Z

Thank you for your reply.

I do not think leaflet will work on the server side.
So, when working on the server, I thought it was better not to load the leaflet.
As described below.

https://stackoverflow.com/questions/43800987/angular-2-and-implementing-leaflet-maps-open-street-map

Of course, if the leaflet works on the server side, it has not been better.
Does that mean there is a possibility that it will work if we shim the window object?
(like domino?)

reblace · 2017-08-28T18:48:52Z

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

alvics · 2018-08-30T02:06:05Z

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?

[email protected] 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! [email protected] serve:ssr: `node dist/server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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"
}

reblace · 2018-08-30T02:32:17Z

The point is that not all libraries are easily compatible with server-side rendering.

In this case, the window object doesn't exist on the server. Because on the server, there's no browser. And, with no browser, there's no window. Leaflet relies on there being a window object. You'd either need to shim the window object (provide a fake global window object), or you'd need to make all the Leaflet stuff run on the client (which from my basic google research is totally a thing you can do with Angular Universal).

Since Leaflet relies heavily on Javascript-driven interactions, you aren't going to be able to get all of it to render on the server. You will need to configure your app to render the map and run all the Leaflet JS code on the client. The Leaflet JS code needs to run on the client for all of the interactions to work.

I closed this issue because this isn't something I can solve in this plugin. And, Angular Universal is a whole other layer that I had no plans to support when I made this plugin. This is a free and open source project. I'm completely sharing my work. But, if you need something that's outside of the scope of my work, I rely on outside contributors to solve those issues and make contributions.

philip-firstorder · 2018-11-18T19:46:32Z

I get a different error, at the import level.

/Users/.../Projects/p2p-frontend-angular/node_modules/@asymmetrik/ngx-leaflet/dist/leaflet/layers/leaflet-layer.directive.js:10
import { Directive, EventEmitter, Input, NgZone, Output } from '@angular/core';
       ^

SyntaxError: Unexpected token {
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:656:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] generate:prerender: `cd dist && node prerender`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] generate:prerender script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

reblace · 2018-11-19T02:50:04Z

@philip-firstorder That's a basic parse error. It suggests something is wrong with the build pipeline cause it's trying to parse a Typescript file as a JS file or something. It's odd though, cause it's referencing the JS file.

ayyash · 2019-10-29T17:54:15Z

@reblace I think there is a way where you can use isPlatformBrowser from the common module (https://angular.io/api/common/isPlatformBrowser) and return on init of all directives. this will hopefully stop leafletjs from being included in ssr (not sure though yet).

Thing is, I tried to fork, and tried to build locally, it works fine, but then when I link to my other angular project to test it in ssr, using npm link @asymmetrik\ngx-leaflet, and run my angular, I get this error:

ERROR in : Unexpected value 'LeafletModule in [working_folder]/node_modules/@asymmetrik/ngx-leaflet/dist/leaflet/leaflet.module.d.ts' imported by the module 'PlaceRoutingModule in [working_folder]/src/app/routes/place.route.ts'. Please add a @NgModule annotation.

I can't even know where to begin to fix that :/ can you help?

reblace · 2019-11-05T00:11:50Z

@ayyash do you have a repo I could check out that would provide me a starting point? I've never used ssr with leaflet/angular, so it'd be a bit of work for me to get spun up on it.

WilliamRClark · 2021-09-14T14:25:16Z

@ayyash do you have a repo I could check out that would provide me a starting point? I've never used ssr with leaflet/angular, so it'd be a bit of work for me to get spun up on it.

Here is the minimal code you need to reproduce.
https://github.com/WilliamRClark/leaflet-static-demo

Note that everyone is likely OK with having to use some JavaScript to run your library. They likely have SEO requirements for their library that require them to use Angular Universal Pre-rendering.

Also be aware that React had a similar issue with the Leaflet library and pre-rendering.
https://github.com/masotime/react-leaflet-universal
was used to fix their issues.

WilliamRClark · 2021-09-14T15:50:57Z

Additionally, others appear to have fixed this with their leaflet wrappers:
https://github.com/pimterry/leaflet-map-server-component

reblace closed this as completed Aug 28, 2017

Joniras mentioned this issue Dec 24, 2017

Angular Universal Support #109

Closed

reblace pinned this issue Nov 5, 2019

bluehalo deleted a comment from hsuanweifu Sep 9, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ReferenceError: window is not defined #62

ReferenceError: window is not defined #62

cse-t-kutsuna commented Jul 25, 2017 •

edited

Loading

reblace commented Jul 27, 2017

cse-t-kutsuna commented Aug 1, 2017

reblace commented Aug 28, 2017

alvics commented Aug 30, 2018 •

edited

Loading

reblace commented Aug 30, 2018

philip-firstorder commented Nov 18, 2018

reblace commented Nov 19, 2018

ayyash commented Oct 29, 2019

reblace commented Nov 5, 2019

WilliamRClark commented Sep 14, 2021

WilliamRClark commented Sep 14, 2021

ReferenceError: window is not defined #62

ReferenceError: window is not defined #62

Comments

cse-t-kutsuna commented Jul 25, 2017 • edited Loading

reblace commented Jul 27, 2017

cse-t-kutsuna commented Aug 1, 2017

reblace commented Aug 28, 2017

alvics commented Aug 30, 2018 • edited Loading

reblace commented Aug 30, 2018

philip-firstorder commented Nov 18, 2018

reblace commented Nov 19, 2018

ayyash commented Oct 29, 2019

reblace commented Nov 5, 2019

WilliamRClark commented Sep 14, 2021

WilliamRClark commented Sep 14, 2021

cse-t-kutsuna commented Jul 25, 2017 •

edited

Loading

alvics commented Aug 30, 2018 •

edited

Loading