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
Я был бы очень признателен за любую помощь в избавлении от этих ошибок сборки.
Огромное спасибо.
Шаги и код
$ gatsby new leaflet$ cd leaflet && npm install- Устанавливаем пакет и зависимости
$ npm install react-leaflet leaflet react react-dom - Создан
src/pages/map.js - Скопируйте / вставьте простой пример из 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 = "&copy <a href="http://osm.org/copyright">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>
)
}
}
Ответы 2
Я бы использовал имеющийся у вас код modifyWebpackConfig. Ошибка минимизации возникает из-за того, что теперь, когда react-leaflet является пустым модулем, когда он пытается построить любую страницу с использованием компонентов-листовок, это вызовет ошибку. Вам нужно будет завернуть свои карты в чек, чтобы увидеть, доступно ли окно. Таким образом, он будет пропущен при рендеринге на стороне сервера.
В React это будет выглядеть примерно так.
render() {
if (typeof window !== 'undefined') {
return (
<Map {...options}>
</Map>
)
}
return null
}
Предупреждаем будущих читателей в соответствии с версией Гэтсби за октябрь 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(),
},
],
},
})
}
}
Спасибо. Имеет смысл. Я не знаю, почему я не мог понять это из сообщения об ошибке.