Gatsby 和 Leaflet：检查 `LeafletMap` 的渲染方法

Question

运行 this Gatsby and Leaflet project 更新包，即

"gatsby-plugin-react-leaflet": "^2.0.13"
"传单": "^1.7.1"
“反应传单”：“^3.0.2”

src/components/leafletMap.js

// From https://github.com/andrewl/gatsby-geo-simple-map
import React from "react";
import PropTypes from "prop-types";
import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import "./leafletmap.css";

class LeafletMap extends React.Component {
  static propTypes = {
    /** Latitude and Longitude of the map centre in an array, eg [51, -1] **/
    position: PropTypes.array,

    /** Initial zoom level for the map (default 13) **/
    zoom: PropTypes.number,

    /** If set, will display a marker, which when clicked will display this text **/
    markerText: PropTypes.string,
  };

  static defaultProps = {
    position: [51, -1],
    zoom: 13,
    markerText: "",
  };

  render() {
    return (
      <Map center={this.props.position} zoom={this.props.zoom}>
        <TileLayer
          url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        {this.props.markerText !== "" && (
          <Marker position={this.props.position}>
            <Popup>{this.props.markerText}</Popup>
          </Marker>
        )}
      </Map>
    );
  }
}

export default LeafletMap;

src/templates/map.js

...
<div class="p-4 mb-3 bg-light rounded">
  {typeof window !== "undefined" && (
    <LeafletMap
      position={[52, -0.5]}
      zoom={8}
      markerText={"Hello, this is a marker"}
    />
  )}
</div>
...

导致以下错误

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `LeafletMap`.
./.cache/app.js/</</</<
/myapp/.cache/app.js:133

  130 | const preferDefault = m => (m && m.default) || m
  131 | const Root = preferDefault(require(`./root`))
  132 | domReady(() => {
> 133 |   renderer(<Root />, rootElement, () => {
  134 |     apiRunner(`onInitialClientRender`)
  135 |   })
  136 | })

我是 Gatsby 的新手，所以我不知道去哪里找。该项目与项目的原始包版本配合良好。

System:
  OS: macOS 11.0.1
  CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Shell: 5.8 - /bin/zsh
Binaries:
  Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
  npm: 6.14.9 - ~/.nvm/versions/node/v12.13.0/bin/npm
Languages:
  Python: 2.7.16 - /usr/bin/python
Browsers:
  Firefox: 83.0
npmPackages:
  gatsby: ^2.27.0 => 2.27.0 
  gatsby-image: ^2.6.0 => 2.6.0 
  gatsby-plugin-intl: ^0.3.3 => 0.3.3 
  gatsby-plugin-newrelic: ^1.0.5 => 1.0.5 
  gatsby-plugin-react-helmet: ^3.5.0 => 3.5.0 
  gatsby-plugin-react-leaflet: ^2.0.13 => 2.0.13 
  gatsby-plugin-sharp: ^2.9.0 => 2.9.0 
  gatsby-source-contentful: ^4.1.0 => 4.1.0 
  gatsby-transformer-remark: ^2.11.0 => 2.11.0 
  gatsby-transformer-sharp: ^2.7.0 => 2.7.0 
npmGlobalPackages:
  gatsby-cli: 2.14.0

Answer 1

通过运行 a gatsby clean.

删除您的缓存文件夹

我已经下载了它，它与 gatsby develop 和 gatsby build 中的一样完美。

检查输出路径问题：

 Check the render method of `LeafletMap`. ./.cache/app.js/</</</<
 /myapp/.cache/app.js:133

它指向 .cache 所以，删除它并重做该过程。

Gatsby 和 Leaflet：检查 `LeafletMap` 的渲染方法

Gatsby and Leaflet: Check the render method of `LeafletMap`

gatsby

react-leaflet