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?
Map
component? Can you show us the full error stack?next/dynamic
is only for importing react components. So you can not importleaflet
like this. But you also don't need to. Just gettingMapWithNoSSR
vianext/danamic
on the faq page should be all you need to avoid loding it on the server.leaflet-geosearch
, that isn't being dynamically imported on the client-side only.