Window not defined on build NextJS

Question

I am getting a window not defined error? I do not call window or document anywhere in the code and it works fine in development just errors on build.

ReferenceError: window is not defined
    at C:\Users\conno\OneDrive\Documents\GitHub\bd-util\.next\server\app\map\page.js:1:45451
    at 8052 (C:\Users\conno\OneDrive\Documents\GitHub\bd-util\.next\server\app\map\page.js:1:191908)
    at t (C:\Users\conno\OneDrive\Documents\GitHub\bd-util\.next\server\webpack-runtime.js:1:128)
    at 6806 (C:\Users\conno\OneDrive\Documents\GitHub\bd-util\.next\server\app\map\page.js:1:2405)
    at Object.t [as require] (C:\Users\conno\OneDrive\Documents\GitHub\bd-util\.next\server\webpack-runtime.js:1:128)
    at require (C:\Users\conno\OneDrive\Documents\GitHub\bd-util\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:16:18270)
    at I (C:\Users\conno\OneDrive\Documents\GitHub\bd-util\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:94362)
    at C:\Users\conno\OneDrive\Documents\GitHub\bd-util\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:96668
    at F._fromJSON (C:\Users\conno\OneDrive\Documents\GitHub\bd-util\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:97106)     
    at JSON.parse (<anonymous>)
 ✓ Generating static pages (7/7)

'use client'

import Navbar from '../components/navbar';
import { MapContainer, TileLayer, Marker, Popup, } from 'react-leaflet'
import MarkerClusterGroup from 'react-leaflet-cluster';
import { useEffect, useState } from "react";
import React from "react";

// CSS imports
import "leaflet/dist/leaflet.css";

// Address import
import addressPoints from '@/public/address';

// Components
import MapSidePanel from '../components/mapSidePanel';

function MapView() {
    // Id of current marker
    const [currentMarker, setCurrentMarker] = useState(3);

    // All markers
    const [markers, setMarkers] = useState([]);

    const handleClick = (id) => {
        setCurrentMarker(id);
    };

    const handleDelete = () => {
        const newMarkers = [...addressPoints.slice(0, currentMarker), ...addressPoints.slice(currentMarker + 1)];
        setMarkers(newMarkers);
    };

    useEffect(() => {
        setMarkers(addressPoints);
    }, []);


    return (
        <>
            <Navbar />
            <div className="is-flex">
                <div className="m-3 " id="map">
                    <MapContainer center={[35.5820, -80.8140]} zoom={13}>
                        <TileLayer
                            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        />
                        <MarkerClusterGroup chunkedLoading >
                            {(markers).map((address, index) => (
                                <Marker
                                    key={index}
                                    position={[address[0], address[1]]}
                                    eventHandlers={{ click: () => handleClick(index) }} // also, you can pass your data as a parameter to your clickMarker function
                                >
                                    <Popup>
                                        {address[2]}
                                    </Popup>
                                </Marker>
                            ))}
                        </MarkerClusterGroup>
                    </MapContainer>
                </div >
                <MapSidePanel handleDelete={handleDelete} markerId={currentMarker} />
            </div >
        </>
    );
}

export default MapView;

Answer 1

The issue is coming from react-leaflet.

You need to import the library using the dynamic function and passing the ssr false. Something like this:

const Component = dynamic(() => import('../components/myleaflet'), {
  ssr: false
})

See this article for more info:

https://medium.com/@tomisinabiodun/displaying-a-leaflet-map-in-nextjs-85f86fccc10c