Next.js 15.1.2集成react-leaflet 5.0.0-rc.1组件加载异常求助

问题现象 #

• 引入 leaflet.css 后，地图组件完全无法加载，页面显示空白
• 移除该CSS导入后，地图能加载但布局混乱、渲染异常

已尝试无效方案 #

• 关闭 StrictMode
• 禁用 SSR
• 动态导入组件
• 添加 'use client' 指令

相关代码 #

Leaflet.tsx 组件代码 #

'use client';
import React from 'react';
import {
    MapContainer,
    TileLayer,
    Marker,
    Popup,
    useMapEvents,
} from 'react-leaflet';
import { useState } from 'react';
import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css';

const Leaflet = () => {
    function LocationMarker() {
        const [position, setPosition] = useState<L.LatLng | null>(null);
        const map = useMapEvents({
            click() {
                map.locate();
            },
            locationfound(e) {
                setPosition(e.latlng);
                map.flyTo(e.latlng, map.getZoom());
            },
        });
        return position === null ? null : (
            <Marker position={position}>
                <Popup>你在这里</Popup>
            </Marker>
        );
    }

    return (
        <MapContainer
            center={[51.505, -0.09]}
            zoom={13}
            scrollWheelZoom={false}
        >
            <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
            />
            <LocationMarker />
        </MapContainer>
    );
};

export default Leaflet;

动态导入代码 #

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

补充信息 #

• package.json 截图：显示项目依赖包含 Next.js 15.1.2、react-leaflet 5.0.0-rc.1、leaflet 及相关兼容包
• 开发界面截图：引入CSS后页面无任何内容，完全空白
• 移除CSS后的地图截图：地图瓦片加载但布局错乱，标记点样式异常

解决方案 #

1. 全局导入Leaflet CSS #

Next.js 15 App Router中客户端组件局部导入CSS可能引发冲突，将CSS移至全局布局文件：
在 app/layout.tsx 中添加：

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css';

同时删除 Leaflet.tsx 中的对应CSS导入语句。

2. 给MapContainer设置明确尺寸 #

Leaflet地图容器必须有固定宽高才能正常渲染，修改MapContainer：

<MapContainer
    center={[51.505, -0.09]}
    zoom={13}
    scrollWheelZoom={false}
    style={{ width: '100%', height: '600px' }}
>

3. 补充Leaflet类型声明 #

代码中使用了L.LatLng但未导入类型，添加类型引用：

import type * as L from 'leaflet';

4. 简化动态导入逻辑 #

去掉useMemo包裹，直接使用动态导入：

import dynamic from 'next/dynamic';

const LeafletMap = dynamic(() => import('@/components/Leaflet'), {
    loading: () => <p>地图加载中...</p>,
    ssr: false,
});

5. 锁定兼容依赖版本 #

确保leaflet版本与react-leaflet 5.0.0-rc.1兼容，执行命令安装指定版本：

npm install leaflet@1.9.4

内容的提问来源于stack exchange，提问作者Tobenna Umeh