Пользовательский значок Leaflet, реагировать-листовка, не может построить проект Gatsby - PullRequest
Новая
       87

Пользовательский значок Leaflet, реагировать-листовка, не может построить проект Gatsby

1 голос
/ 19 марта 2020

У меня есть пользовательские значки, работающие на моей карте Leaflet просто отлично, когда я запускаю gatsby develop локально, но когда я пытаюсь построить, я получаю ошибку, связанную с моим пользовательским значком маркера: 

 WebpackError: TypeError: leaflet_src_layer_marker__WEBPACK_IMPORTED_MODULE_4__.Icon is not a constructor

Связанные операции импорта: 

import { Map, Marker, Popup, TileLayer, Tooltip, ZoomControl } from 'react-leaflet'
import { Icon } from 'leaflet/src/layer/marker'

Создание пользовательского значка: 

// Init custom map icon
  const mapIcon = MapIcon();
  const markerIcon = new Icon({
    iconUrl: mapIcon,
    iconSize: [36, 36],
    iconAnchor: [18, 18],
    shadowSize: [36, 36],
    shadowUrl: 'https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png',
    shadowAnchor: [10, 18],
    popupAnchor: [0, -16],
    tooltipAnchor: [13, -4]
  });

JSX: 

{ markerData.length > 0 ? markerData.map((node, index) => (
            <Marker position={[node.coords.lat, node.coords.lng]} key={`marker-${index}`} icon={markerIcon}>
              <Popup className="leaflet-popup" onOpen={(el) => openPopup(el)}>
                <h5 className="popup-location-title">{node.location_title}</h5>
                <h6 className="popup-address">{node.address}</h6>
                <div className="popup-description" dangerouslySetInnerHTML={{ __html: node.description }}></div>
                {!!node.embed ?
                  <div className="popup-embed">
                    <Embed url={node.embed} className="popup-media-embed" />
                  </div>
                : null}
              </Popup>
              <Tooltip className="leaflet-tooltip">
                <span className="title">{node.location_title}</span>
                <span className="address">{node.address}</span>
              </Tooltip>
            </Marker>
          )) : null }

Я испробовал все решения, перечисленные здесь: https://github.com/Leaflet/Leaflet.markercluster/issues/874. Я также посмотрел на несколько похожих вопросов. Кажется, ничто не поможет. Например, я также попытался импортировать буклет, например, import * as L from "leaflet" и import L from "leaflet". А затем создаем новую иконку примерно так const markerIcon = L.Icon({, вот так const markerIcon = L.icon({, вот так const markerIcon = new L.Icon({ и вот так const markerIcon = new L.icon({. Я могу console.log(L), но ничего из этого не работает.

Я бы хотел немного помочь.

1 Ответ

1 голос
/ 19 марта 2020

Получил, чтобы построить. Пришлось завернуть конструкцию иконки в чек для окна obj: 

// Init custom map icon
  if (typeof window !== 'undefined') {
    const mapIcon = MapIcon();
    markerIcon = new Icon({
      iconUrl: mapIcon,
      iconSize: [36, 36],
      iconAnchor: [18, 18],
      shadowSize: [36, 36],
      shadowUrl: 'https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png',
      shadowAnchor: [10, 18],
      popupAnchor: [0, -16],
      tooltipAnchor: [13, -4]
    });
  }

И снова при передаче значка на маркер: 

<Marker position={[node.coords.lat, node.coords.lng]} key={`marker-${index}`} icon={(!!markerIcon) ? markerIcon : null}>
...