Next JS build issue - Githubissues

When I build project catch error

window is not defined

package.json "dependencies": { "leaflet": "^1.9.4", "leaflet.markercluster": "^1.5.3", "next": "14.1.0", "react": "^18", "react-dom": "^18", "react-google-recaptcha": "^3.1.0", "react-hook-form": "^7.50.1", "react-leaflet": "^4.2.1", "react-leaflet-cluster": "^2.1.0", "react-slider": "^2.0.6", "swiper": "^11.0.5" },

component

` 'use client'; import 'leaflet/dist/leaflet.css'; import MarkerClusterGroup from "react-leaflet-cluster"; import {MapContainer, Marker, Popup, TileLayer} from "react-leaflet";

import logo from '@/assets/images/images/small-logo.png' import cart from "@/assets/images/vectors/cart.svg"; import SecondaryButton from "@/components/Buttons/SecondaryButton/SecondaryButton";

import Image from "next/image";

export default function MyMap() {

const position = [50.27, 30.31]
const addressPoints = [
    {
        title: 'Аптека №1',
        position: [50.27, 30.31],
        id: 0,
    },
    {
        title: 'Аптека №2',
        position: [50.27, 30.31],
        id: 1,
    }
    ,
    {
        title: 'Аптека №3',
        position: [50.27, 30.31],
        id: 2
    }, {
        title: 'Аптека №5',
        position: [50.270797093446326, 30.3174383238337],
        id: 3
    }
    ,
    {
        title: 'Аптека №6',
        position: [50.270797093446326, 30.3174383238337],
        id: 4
    },
    {
        title: 'Аптека №6',
        position: [50.274179540369104, 30.312794202742495],
        id: 4
    }

]

const createClusterCustomIcon = function (MarkerCluster) {
    return L.divIcon({
        iconSize: [52, 52],
        iconAnchor: [52 / 2, 52 + 9],
        className: "",
        html: `<div class="w-[52px] h-[52px] flex items-center justify-center text-[22px] bg-white rounded-full border border-[#0EB71F] leading-none">${MarkerCluster.getChildCount()}</div>`,
    })
}

return (

    <MapContainer center={position} zoom={15}
                  scrollWheelZoom={false}
                  whenCreated={map => setInterval(() => {
                      map.invalidateSize()
                  }, 100)}
                  style={{width: '100%', height: '100%'}}>
        <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png"
        />
        <MarkerClusterGroup

        >
            {addressPoints.map((address) => (
                <Marker key={address.id} position={address.position} icon={L.divIcon({
                    iconSize: [24, 24],
                    iconAnchor: [24 / 2, 24 + 9],
                    className: "",
                    html: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

`, })}>

                    <Popup className={'border border-[#0EB71F] bg-white rounded-xl  '}>
                        <div className={'flex gap-3 w-[292px] p-3'}>
                            <div className={'w-[34px] h-[34px] rounded-full flex-shrink-0'}>
                                <Image src={logo}/>
                            </div>
                            <div className={'w-[163px]'}>
                                <div className={'!space-y-2  mb-3'}>
                                    <p className={'text-sm font-semibold !m-0'}>
                                        {address.title}
                                    </p>
                                    <p className={'text-sm underline text-[#262339] decoration-[#262339] !m-0'}>Київ,
                                        вул
                                        Драйзера,
                                        8</p>
                                    <p className={'text-sm !m-0'}><b className={'font-semibold'}>В
                                        наявності:</b> 9шт</p>
                                    <p className={'text-sm !m-0'}>Пн-Нд 7.00-22.00</p>
                                </div>
                                <SecondaryButton name={'Замовити тут'} icon={cart} extraClassName={''}/>
                            </div>
                        </div>

                    </Popup>
                </Marker>
            ))}
        </MarkerClusterGroup>

    </MapContainer>
)

} `

const Map = useMemo(() => dynamic( () => import('@/components/Map/Map'), { loading: () => <p>A map is loading</p>, ssr: true } ), [])

akursat / react-leaflet-cluster

Next JS build issue #36