React-Leaflet с Гэтсби

У меня проблемы с попыткой исправить это React-Leaflet / Leaflet ожидает, что окно будет определено, и вызывает сбой сборки Gatsby npm run build.

Сообщение об ошибке:

WebpackError: window is not defined

  - leaflet-src.js:230
    ~/leaflet/dist/leaflet-src.js:230:1

  - leaflet-src.js:7 version
    ~/leaflet/dist/leaflet-src.js:7:1

  - leaflet-src.js:10 Object.exports.__esModule
    ~/leaflet/dist/leaflet-src.js:10:2

  - AttributionControl.js:5 Object.<anonymous>
    ~/react-leaflet/lib/AttributionControl.js:5:1

  - index.js:26 Object.exports.__esModule
    ~/react-leaflet/lib/index.js:26:1

  - map.js:2 Object.exports.__esModule
    src/pages/map.js:2:1

В документации Gatsby перечислено несколько возможных сценариев или решений. https://www.gatsbyjs.org/docs/debugging-html-builds/#fixing-third-party-modules

Поэтому, пытаясь следовать перечисленным примерам, я попытался добавить в gatsby-node.js

gatsby-node.js

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'build-html') {
    config.loader('null', {
      test: /react-leaflet/,
      loader: 'null-loader',
    })
  }
}

И test: /leaflet/, и test: /react-leaflet/

But that spits out a WebpackError: Minified React error #130

Я был бы очень признателен за любую помощь в избавлении от этих ошибок сборки.

Спасибо большое.

Действия и код

  1. $ gatsby new leaflet
  2. $ cd leaflet && npm install
  3. Установите пакет и зависимости$ npm install react-leaflet leaflet react react-dom
  4. Создано src/pages/map.js
  5. Скопируйте / вставьте простой пример из https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/simple.js.

map.js

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

export default class SimpleExample extends Component {
  state = {
    lat: 51.505,
    lng: -0.09,
    zoom: 13,
  }

  render() {
    const position = [this.state.lat, this.state.lng]
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    )
  }
}

webpack gatsby react-leaflet
person Community    schedule 12.07.2018    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Я бы использовал имеющийся у вас код modifyWebpackConfig. Ошибка minify возникает из-за того, что теперь, когда react-leaflet является пустым модулем, когда он пытается построить любую страницу с использованием компонентов response-leaflet, это вызовет ошибку. Вам нужно будет завернуть свои карты в чек, чтобы увидеть, доступно ли окно. Таким образом, он будет пропущен при рендеринге на стороне сервера.

В React это будет выглядеть примерно так.

render() {
    if (typeof window !== 'undefined') {
        return (
            <Map {...options}>

            </Map>
        )
    }
    return null
}
person humdinger    schedule 21.07.2018
comment
Спасибо. Имеет смысл. Я не знаю, почему я не мог понять это из сообщения об ошибке. - person ; 06.08.2018

arrow_upward
2
arrow_downward

Предупреждаем будущих читателей в соответствии с версией Гэтсби за октябрь 2019 года; API немного изменился по сравнению с версией OPs.

gatsby-node.js


exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-leaflet|leaflet/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}
person Md_Zubair Ahmed    schedule 09.10.2019