Next.js使用react-leaflet报错Constructor Map requires 'new'如何解决

错误原因 #

你代码中从react-leaflet导入了已废弃的Map组件，react-leaflet v3及以上版本已经将原Map组件重命名为MapContainer，此处额外导入的Map实际是Leaflet原生的地图构造函数，必须使用new调用才不会报错，而你代码中并没有用到这个导入项，属于冗余导入引发的冲突。 #

修复步骤 #

1. 清理导入语句，删除冗余的Map导入：

// 修改前
import { MapContainer, Marker, Popup, TileLayer, Map } from "react-leaflet";
// 修改后
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";

2. 适配Next.js服务端渲染特性：Leaflet依赖浏览器全局对象window，无法在服务端正常运行，你需要在引用HeatMap组件的位置改用动态导入，关闭服务端渲染：

// 在引入HeatMap的页面/组件中使用next/dynamic导入
import dynamic from 'next/dynamic'
const HeatMap = dynamic(() => import('./你的HeatMap组件路径'), {
  ssr: false
})

3. 可选优化：你代码中定义的ICON变量没有使用，如果需要自定义标记点图标，给Marker组件添加icon属性即可：

<Marker position={[51.505, -0.09]} icon={ICON}>
  {/* 原有Popup内容 */}
</Marker>

内容的提问来源于stack exchange，提问作者Con Drakoulelis