7

I'm currently building a site using the leaflet package. This package however needs the window object. That's why I'm importing a component made with leaflet as a dynamic component with ssr turned off. Just like this:

import dynamic from "next/dynamic";
   const MapWithNoSSR = dynamic(() => import("../../map"), {
             ssr: false
 });
 
export default function faqOnly(props){
 ...
 return (<> <MapWithNoSSR /></>)
 }

Map component looks like this:

    import React, { useEffect, useState, useRef } from "react";
import { OpenStreetMapProvider } from 'leaflet-geosearch';
import "leaflet/dist/leaflet.css";
import 'leaflet/dist/leaflet.css'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import "leaflet-defaulticon-compatibility";
import dynamic from "next/dynamic";

const L = dynamic(() => import("leaflet"), {
      ssr: false,
      suspense: true,
      loading: () => <p>...</p>
    });


function Map(props) {


  useEffect(async () => {
    if(window === undefined) return
    const provider = new OpenStreetMapProvider();
     const results = await provider.search({ query: props.adress });
     if(results.length > 0 == true){
      var map = L.map('map', {
          center: [results[0].y, results[0].x],
          zoom: 18,
          layers: [
              L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
                  attribution: ''
              }),
          ]
      })
      L.marker([results[0].y, results[0].x]).addTo(map)
  }else{
    document.getElementById("map").style.display = "none"
  }
  }, [])


    return <div id="map" style={{ height: "30vh"}}></div>

}

export default Map;

And I get this error when I run npm run build:

ReferenceError: window is not defined
    at E:\Github\Planer\rl-planer\node_modules\leaflet\dist\leaflet-src.js:230:19
    at E:\Github\Planer\rl-planer\node_modules\leaflet\dist\leaflet-src.js:7:66
    at Object.<anonymous> (E:\Github\Planer\rl-planer\node_modules\leaflet\dist\leaflet-src.js:10:3)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (E:\Github\Planer\rl-planer\node_modules\leaflet-geosearch\dist\geosearch.js:1:7) {
  type: 'ReferenceError'
}

This works fine in development, but when I try to build the project (next build), it throws a "window is not defined" error inside the leaflet package, which it hasn't been doing before when I was working on it in development mode.

I looked through other questions here, but it seems like moving the dynamic import outside the component fixed it for everyone but me. Am I just stupid or what's the problem here?

5
  • Are you importing leaflet anywhere outside the Map component? Can you show us the full error stack? Commented May 6, 2022 at 11:35
  • Nope, its just inside the map component Commented May 6, 2022 at 22:05
  • I also updated the question with all the necessary stuff Commented May 6, 2022 at 22:10
  • As far as I know next/dynamic is only for importing react components. So you can not import leaflet like this. But you also don't need to. Just getting MapWithNoSSR via next/danamic on the faq page should be all you need to avoid loding it on the server.
    – errnesto
    Commented May 6, 2022 at 22:21
  • The error comes from leaflet-geosearch, that isn't being dynamically imported on the client-side only. Commented May 6, 2022 at 22:30

2 Answers 2

1

Maybe you don't need next/dynamic at all and can just use simple js dynamic import inside the useEffect function body.

(useEffect will only run on the client)

Nextjs has an example that looks pretty similar: https://nextjs.org/docs/advanced-features/dynamic-import. (the first on the page with fuse.js)

import React, { useEffect, useState, useRef } from "react";
import { OpenStreetMapProvider } from 'leaflet-geosearch';
import "leaflet/dist/leaflet.css";
import 'leaflet/dist/leaflet.css'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import "leaflet-defaulticon-compatibility";

function Map(props) {
  useEffect(async () => {
    const L = await import("leaflet")
    const provider = new OpenStreetMapProvider();
    const results = await provider.search({ query: props.adress });

    if(results.length > 0 == true) {
      var map = L.map('map', {
        center: [results[0].y, results[0].x],
        zoom: 18,
        layers: 
          [
            L.tileLayer(
              'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
              { attribution: ''}
            ),
          ]
      })
      L.marker([results[0].y, results[0].x]).addTo(map)
    } else {
      document.getElementById("map").style.display = "none"
    }
  }, [])


  return <div id="map" style={{ height: "30vh"}}></div>
}

export default Map;

Updated

Okay so maybe trying to move all js that requires window in a useEffect hook is a bit messy. Seams easier to just import the whole component client only. To me your example code looks good – apart from the fact that you import leaflet dynamically again in the map file:

page.jsx

import dynamic from "next/dynamic";
const MapWithNoSSR = dynamic(() =>
  import("../../map"), { ssr: false });
 
export default function faqOnly(props){
  ...
  return <MapWithNoSSR />
}

map.jsx

import React, { useEffect, useState, useRef } from "react";
import { OpenStreetMapProvider } from 'leaflet-geosearch';
import L from 'leaflet'
import "leaflet/dist/leaflet.css";
import 'leaflet/dist/leaflet.css'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import "leaflet-defaulticon-compatibility";

function Map(props) {
  useEffect(async () => {
    const provider = new OpenStreetMapProvider();
    const results = await provider.search({ query: props.adress });

    if(results.length > 0 == true) {
      var map = L.map('map', {
        center: [results[0].y, results[0].x],
        zoom: 18,
        layers: 
          [
            L.tileLayer(
              'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
              { attribution: ''}
            ),
          ]
      })
      L.marker([results[0].y, results[0].x]).addTo(map)
    } else {
      document.getElementById("map").style.display = "none"
    }
  }, [])


  return <div id="map" style={{ height: "30vh"}}></div>
}

export default Map;
2
  • 1
    Nope still gives me the error Commented May 9, 2022 at 5:05
  • 1
    @juliomalves is right… There are other imports also needing to run only client side such as leaflet-geosearch and leaflet-defaulticon-compatibility. So you could load all those in useEffect but this might not be the best solution…
    – errnesto
    Commented May 13, 2022 at 18:56
0

what I did was to create a Map component just like you did which contains every module of leaflet that uses window and then import that component with dynamic import of nextjs. In my case I did not use dynamic import for leaflet module but only for importing the Map component.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.