Leaflet: window is not defined

[ilostit]

Hi,

i have this issue after update reactivemaps "@appbaseio/reactivemaps"
leaflet 1.4.0

XXX/node_modules/leaflet/dist/leaflet-src.js:7
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
^
ReferenceError: window is not defined
at XXX/node_modules/leaflet/src/core/Util.js:217:24
at version (XXX/node_modules/leaflet/dist/leaflet-src.js:7:65)
at Object. (XXX/node_modules/leaflet/dist/leaflet-src.js:10:2)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)

any idea ?

[IvanSanchez]

Hi, and thanks for taking the time to open a bug report in Leaflet.

However, in this repository we only handle bugs in "vanilla" Leaflet. This means that we do not handle bugs which are specific to frameworks such as:

• React
• Ractive
• AngularJS
• Bootstrap
• Leaflet for R
• Joomla
• Wordpress
• Ionic
• Cordova
• Vue
• Electron
• Polymer
• TypeScript
• ...etc

Please understand that we only have the time and energy to test Leaflet in plain web browsers.

Please try to either reproduce the bug without using any frameworks, or submit a bug to the appropiate repo.

[HoraceShmorace]

This error isn't specific to any framework. It merely shows up in those frameworks because of the Leaflet dependency.

This is happening when trying to include Leaflet as a dependency in a _universal_ web app, which gets server-side rendered first (SSR). This is a standard SEO requirement for any content-based site.

This error occurs when simply including the leaflet dependency in an SSR app (in my case, via npm), and is happening because Leaflet is trying "to do stuff" that depends on the window object before an instance is even instantiated, which is a bad practice. Initialization should be explicit, via the constructor (or some other explicitly executed closure).

[IvanSanchez]

Let me quote myself, emphasis mine:

Please understand that we only have the time and energy to test Leaflet in plain web browsers.

If you want to work around stuff so that you can load Leaflet in a browserless environment, PRs are welcome. In particular, you'll need to check for window in all of core/Browser.js and work around the polyfills.

Keep in mind that Leaflet's priority as of now is that the code works without modifications in MSIE9, not that it works with the fanciest latest framework/editor/transpiler thing.

[yog3sha]

I was getting this issue with nuxt because in nuxt.config.ts file I had mentioned 'leaflet' in modules.
modules: ["nuxt-leaflet", "leaflet"],
Error went away after removing that 'leaflet'.
Note: "nuxt-leaflet" is not needed too. Just simply use
npm i leaflet
and
npm i @types/leaflet

After that you can simply import from leaflet:
import * as L from "leaflet";
initialize using:
this.markers.forEach(marker =>
L.marker([marker.lat, marker.lng]).addTo(mymap).bindPopup(marker.info)
);
and use as:<div id="mapid">

[bradgreens]

I hit this problem using a NextJs stack and it makes complete sense window is not [yet] defined at the time of import. NextJs documentation had a clear solution for this.
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

For other React stacks, one could try useScript inside of componentDidMount or useEffect/useLayoutEffect as well.
https://usehooks.com/useScript/

[rhernandog]

What @bradgreens suggested works just fine for Next.

Just create a separate component (lets call it Map.js) and use the dynamic import for that and import the leaflet package in it.

import { useRef, useEffect } from "react";
import L from "leaflet";

const Map = () => {
  const locationMap = useRef(null);

  useEffect(() => {
    const myMap = L.(locationMap.current).setView([0,0], 13);
    // rest of your map code here
  }, []);

  return <div className="map-container" ref={locationMap} />
};

export default Map;

const Map = dynamic(() => import("./components/Map"), { ssr: false });

const PageName = () => {
  return (
    <div>
      <Map />
    </div>
  );
}

export default PageName;