Leaflet "window is not defined" when working with Browserify due to use of "this"

[JordanTheriault]

I'm receiving the error "window not defined" which stems from leaflet's use of this when referring to window. I have 0.7.3 of the npm leaflet version.

window is not defined
    at Object.<anonymous> (/node_modules/leaflet/dist/leaflet-src.js:9180:3)

This issue references it but the issue does not seem to actually be resolved despite the closed status.

[mienaikoe]

Agreed. I'm still getting this problem when require-ing the leaflet npm module version 0.7.3 from node

[danzel]

Is it fixed in master?

[dougajmcdonald]

I'm still seeing this on 0.7.5

[josebalius]

Seeing this as well, is there a fix coming?

[mourner]

Eh, should be fixed. I remember using this to fix something else but it'll need some git blaming to figure out.

[yohanboniface]

I think this is fixed _in master_ because of https://github.com/Leaflet/Leaflet/blob/master/build/build.js#L85
@dougajmcdonald @josebalius one of you able to test with Leaflet master (or 1.0.0-beta1) to confirm it's fixed there?

[dougajmcdonald]

I'm still seeing this on 1.0.0-beta.1 unfortunately.

c:\Applications\MyApp\node_modules\leaflet\dist\leaflet-src.js:9406
}(window, document));
^
ReferenceError: window is not defined
at Object. (c:\Applications\MyApp\node_modules\leaflet\dist\leaflet-src.js:9406:3)

I'll give it a go with beta 2 now and get back to you.

[mourner]

@dougajmcdonald how exactly do you trigger the issue?

[dougajmcdonald]

In my particular example this occurs when I put in 'import L from 'leaflet' in the top of a react component.

My gulp tasks browserify the app code and node spits out the error.

[mourner]

Is this reproducible with pure Browserify?

[vincentaudebert]

I'm using react-starter-kit and leaflet 0.7.7 and I get this error too:
ReferenceError: window is not defined
at Object. (/Users/VincentAudebert/scraper/node_modules/leaflet/dist/leaflet-src.js:9168:3)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object. (/Users/VincentAudebert/scraper/node_modules/react-leaflet/lib/index.js:11:16)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)

[IvanSanchez]

@dougajmcdonald @vincentaudebert This is what the react-starter-kit folks have to say about that:

https://github.com/webpack/react-starter/issues/37#issuecomment-93943419

Don't use libraries that depend on window in your components.
or
Only use these libraries in componentDidMount and exclude them for prerendering (make sure your component don't render different in prerendering or it doesn't work).

In other words, I'm making this not our (Leaflet's) problem. If this is not reproducible with pure Browserify and no react, I'll close the issue.

[vincentaudebert]

Thanks @IvanSanchez. It sounds fair enough.
If it can help some people, I used first post to workaround the issue.
https://github.com/PaulLeCam/react-leaflet/issues/45

Good luck.

[miss61008596]

because server can not find window, you can use this

getInitialState() {
return {windowWidth: (typeof window !== 'undefined')? window.innerWidth:undefined};
},

[stefan--]

This issue might still arise in certain circumstances, e.g. protractor E2E testing.

Given you use ES6 or TS and import Leaflet as a module with import * as Leaflet from "leaflet" in a given class, when instantiating this class before the DOM is loaded you will receive ReferenceError: window is not defined.

The reason for instantiating this class depending on Leaflet before the DOM is ready could be to build objects for a test scenario. @mourner I believe this is worth considering in further iterations.

[perliedman]

@stefan-- hi and thanks for providing a use case. We would happily discuss any improvements you could suggest to improve this situation. However, this is really an edge case and it is unlikely to get prioritized from the maintainers given the information we have now.

[colbin8r]

I'm using Mocha to run unit tests of my code (some of which depends upon Leaflet). Now that Leaflet 1.1.0 supports ES6 modules natively, I'd love to be able to import { Map } from 'leaflet' rather than use https://github.com/jieter/leaflet-headless.