Webpack 与盖茨比反应传单

我在尝试修复

反应传单

/

传单

期望定义窗口并导致盖茨比构建

npm运行构建

失败时遇到问题

错误消息：

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

测试：/传单/

和

测试：/react传单/

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

我真的非常感谢任何帮助消除这些构建错误

非常感谢

---

步骤和代码

$gatsby新单张

$cd传单和npm安装

安装软件包和依赖项

$npm安装react传单react dom

已创建

src/pages/map.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>
    )
  }
}

import React，{Component}来自“React”
从“反应传单”导入{Map，tillelayer，Marker，Popup}
导出默认类SimpleExample扩展组件{
状态={
拉脱维亚：51.505，
液化天然气：-0.09，
缩放：13，
}
render（）{
const position=[this.state.lat，this.state.lng]
返回(
一个漂亮的CSS3弹出窗口。
可轻松定制。
)
}
}

我将使用您拥有的修改过的WebpackConfig代码。缩小错误是因为现在

react-传单

是一个空模块，当它尝试使用react-传单组件构建任何页面时，将导致错误。您必须在检查窗口是否可用时将地图包装起来。这样，它将在服务器端渲染中被跳过

在反应中，它看起来像这样

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

            </Map>
        )
    }
    return null
}

render（）{
如果（窗口类型！==“未定义”）{
返回(
)
}
返回空
}

根据2019年10月的《盖茨比》版本，这只是对未来读者的提醒；API与OPs版本相比有一些变化

gatsby node.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>
    )
  }
}

exports.onCreateWebpackConfig=（{stage，loaders，actions}）=>{
如果（stage===“构建html”）{
actions.setWebpackConfig({
模块：{
规则：[
{
测试：/react传单|传单/，
用法：loaders.null（），
},
],
},
})
}
}

谢谢。这很有道理。我不知道为什么我不能从错误消息中找到答案。