Gatsby和传单:查看“叶地图”的渲染方法

Question

使用更新的包运行这个盖茨比和传单项目，即

• “盖茨比-插件-反应-传单”："^2.0.13“
• “传单”："^1.7.1“
• “反应-传单”："^3.0.2“

src/components/传单Map.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/模板/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 | })

我对盖茨比来说是个新手，所以我不知道该去哪儿找。该项目与项目的原始包版本工作良好。

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

通过运行gatsby clean删除缓存文件夹。

我下载了它，它在gatsby develop和gatsby build中运行得很好。

检查输出路径问题如下：

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

它指向.cache，因此，删除它并重新执行该过程。