我收到窗口未定义错误?我不会在代码中的任何地方调用窗口或文档,它在开发中工作正常,只是在构建时出现错误。
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='© <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;
问题来自react-leaflet。
您需要使用动态函数导入库并传递 ssr false。像这样的东西:
const Component = dynamic(() => import('../components/myleaflet'), {
ssr: false
})
请参阅这篇文章了解更多信息:
https://medium.com/@tomisinabiodun/displaying-a-leaflet-map-in-nextjs-85f86fccc10c