在构建过程中出现 ReferenceError: window is not Defined 错误反应传单

Question

我在我的 nextjs 项目中使用react-leaflet。该项目在开发模式下运行完美，但当我尝试构建它时，它给出了

ReferenceError: window is not defined

。我也在动态中使用 ssr 作为 false，但仍然给出相同的错误。这是供进一步参考的代码。任何帮助将不胜感激。谢谢你。

index.js

import dynamic from 'next/dynamic'

export default dynamic(() => import("./map"), { ssr: false });

// const  OpenStreetMap = dynamic(() => import('./map'), {
   //   ssr: false
// })

// const index = () => {
  //   return (
          //     <>
            //       <OpenStreetMap />
          //     </>
  //   )
// }

// export default index

地图.js

import React, { useState, useRef, useEffect, useMemo } from 'react'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

const OpenStreetMap = () => {

   const [center, setCenter] = useState({ lat: 43.64701, lng: -79.39425 })
   const ZOOM_LEVEL = 5
   const mapRef = useRef()

   return (
      <MapContainer center={center} zoom={ZOOM_LEVEL} ref={mapRef} style={{ flex: 2, 
        height: '100%', width: '100%' }}>
      <TileLayer attribution='&copy; <a href="mailto:[email protected]" 
         target="_blank" rel="noopener noreferrer">Developed by Mubashir</a> &copy; <a 
             href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 
              contributors'
             url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      />

        <Marker
          position={position}
          icon={icon}
          eventHandlers={{
            click: () => handleMarkerClick(marker)
          }}
        />
  </MapContainer>
 )
}

export default OpenStreetMap

错误

info  - Collecting page data ..ReferenceError: window is not defined
at D:\logistics-crm\logistics-crm\node_modules\leaflet\dist\leaflet-src.js:230:19
at D:\logistics-crm\logistics-crm\node_modules\leaflet\dist\leaflet-src.js:7:66
at Object.<anonymous> (D:\logistics-crm\logistics-crm\node_modules\leaflet\dist\leaflet-src.js:10:3)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
node:internal/process/promises:288
        triggerUncaughtException(err, true /* fromPromise */);
        ^

ReferenceError: window is not defined
at D:\logistics-crm\logistics-crm\node_modules\leaflet\dist\leaflet-src.js:230:19
at D:\logistics-crm\logistics-crm\node_modules\leaflet\dist\leaflet-src.js:7:66
at Object.<anonymous> (D:\logistics-crm\logistics-crm\node_modules\leaflet\dist\leaflet-src.js:10:3)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
> Build error occurred
Error: Failed to collect page data for /apps/map/map
at D:\logistics-crm\logistics- crm\node_modules\next\dist\build\utils.js:1152:15 {
type: 'Error'
}
info  - Creating an optimized production build .info  - Collecting page data .

Answer 1

我也遇到了同样的问题。我解决问题的方法如下：

1. 添加

   map.module.css

   文件

.map {
  height: 60vh;
 }

2. 将命名组件导出为

   MapComponent

   而不是

   default

   文件中的

   index.ts

import dynamic from 'next/dynamic';
export const MapComponent = dynamic(() => import('components/map/map-dealer'), { ssr: false });

3. 我的map-dealer.tsx文件如下

'use client';

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import styles from './map.module.css';
import L from 'leaflet'

const DEFAULT_CENTER: any = [23.737704855705548, 90.40943564985567];
const size = 5;

const Map = ({ dealersList }: any) => {

  return (
    <MapContainer className={styles.map} center={DEFAULT_CENTER} zoom={10} scrollWheelZoom={true}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      {dealersList?.map((dealer: any, index: number) => (
        <Marker
          key={index}
          position={[dealer.latitude, dealer.longitude]}
          eventHandlers={{
            click: () => {
              console.log('marker clicked');
            }
          }}
          icon={L.divIcon({
            iconSize: [size, size],
            iconAnchor: [size / 2, size + 9],
            className: "mymarker",
            html: ``,
          })}
        >
          <Popup>
            <div>
              <p className="font-bold">{dealer.name}</p>
              <p>{dealer.address}</p>
            </div>
          </Popup>
        </Marker>
      ))}
    </MapContainer>
  );
};

export default Map;

4. 将此

   MapComponent

   导入到父组件

import { MapComponent } from 'components/map';

<div className="overflow-hidden mt-4">
   <MapComponent dealersList={dealersList} />
</div>

因此请确保从

styles

导入

map.module.css

，因为当找到

hight

时地图将可见并根据需要进行更新。

希望对您有帮助。