使用Gatsby的React-Leaflet

Question

我在尝试解决React-Leaflet / Leaflet问题时遇到了麻烦，因为它们需要定义window，这会导致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>
    )
  }
}

- user7539157

Answer 1

我会使用你提供的modifyWebpackConfig代码。minify错误是因为现在react-leaflet是一个空模块，当它尝试构建任何使用react-leaflet组件的页面时，会导致错误。你需要在地图中添加一些检查，以查看窗口是否可用。这样，在服务器端渲染时它就会被跳过。

在React中，代码大概是这样的。

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

            </Map>
        )
    }
    return null
}

- humdinger

---

谢谢。非常清晰易懂。我不知道为什么我无法从错误信息中找到答案。 - user7539157

Answer 2

向未来的读者提醒，截至2019年10月的Gatsby版本中，API与原始帖子的版本略有变化。

gatsby-node.js

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

- Md_Zubair Ahmed

Answer 3

在升级了gatsbyjs配置之后，我不得不改变我的webpack配置如下：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-leaflet|leaflet/,
            use: loaders.null(),
          }
        ]
      }
    })
  }
};

你需要修改的两个阶段是

• "build-html"
• "develop-html"

- Kevin Smith