我无法在 next.js 中加载 react leaflet Marker。

在这里我调用了我的地图组件。

const MapSearch = dynamic(import('../../components/Map'), {
  ssr: false,
  loading: () => (
    <div style={{textAlign: 'center', paddingTop: 20}}>
      Chargement…
    </div>
  )
})

const Map = () => (
    <MapSearch />
)

这是我的组件

 import React, { useState } from 'react';
import L from 'leaflet';

import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

const LeafletMap = () => {
  const [coordinates, setCoordinates] = useState({
    lat: 51.505,
    lng: -0.09,
    zoom: 13,
  });
  React.useEffect(() => {
    const L = require("leaflet");

    delete L.Icon.Default.prototype._getIconUrl;

    L.Icon.Default.mergeOptions({
       iconUrl: require('leaflet/dist/images/marker-icon.png'),
       shadowUrl: require('leaflet/dist/images/marker-shadow.png')
    });
  }, []);
  const position = [coordinates.lat, coordinates.lng];
  return (
    <Map center={position} zoom={coordinates.zoom} style={{ width: '100%', height: '600px' }}>
      <TileLayer
        attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
        url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          <span>
            Marker 1 <br /> Easily customizable.
          </span>
        </Popup>
      </Marker>
    </Map>
  );
};


export default LeafletMap;

我收到错误，您需要添加加载器来处理 png 文件。因此，从谷歌搜索中，我添加了 next.config.js 并添加了以下代码

 module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.module.rules.push({
      test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
      loader: require.resolve("url-loader")
    });

    return config;
  }
};

现在当我加载页面时，地图正在加载，但标记未加载。当我检查标记 img src 时，它正在作为对象模块。

我也尝试删除 L.Icon.Default.mergeOptions 行，但在这种情况下，我收到错误 http://localhost:3000/_next/static/media/marker-icon.1e8408af1a34bdf614570719b0d6e5ce.png%22)marker-icon.png 404 (未找到)。

我是 Next.js 的新手。