title: Gatsby and Leaflet: Check the render method of `LeafletMap`
body: <p>Running <a href="https://github.com/andrewl/gatsby-geo-simple-map" rel="nofollow noreferrer">this Gatsby and Leaflet project</a> with updated packages, i.e.</p>
  <ul>
  <li>&quot;gatsby-plugin-react-leaflet&quot;: &quot;^2.0.13&quot;</li>
  <li>&quot;leaflet&quot;: &quot;^1.7.1&quot;</li>
  <li>&quot;react-leaflet&quot;: &quot;^3.0.2&quot;</li>
  </ul>
  <p>src/components/leafletMap.js</p>
  <pre><code>// From https://github.com/andrewl/gatsby-geo-simple-map
  import React from &quot;react&quot;;
  import PropTypes from &quot;prop-types&quot;;
  import { Map, TileLayer, Marker, Popup } from &quot;react-leaflet&quot;;
  import &quot;./leafletmap.css&quot;;
  
  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: &quot;&quot;,
    };
  
    render() {
      return (
        &lt;Map center={this.props.position} zoom={this.props.zoom}&gt;
          &lt;TileLayer
            url=&quot;http://{s}.tile.osm.org/{z}/{x}/{y}.png&quot;
            attribution='&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
          /&gt;
          {this.props.markerText !== &quot;&quot; &amp;&amp; (
            &lt;Marker position={this.props.position}&gt;
              &lt;Popup&gt;{this.props.markerText}&lt;/Popup&gt;
            &lt;/Marker&gt;
          )}
        &lt;/Map&gt;
      );
    }
  }
  
  export default LeafletMap;
  </code></pre>
  <p>src/templates/map.js</p>
  <pre><code>...
  &lt;div class=&quot;p-4 mb-3 bg-light rounded&quot;&gt;
    {typeof window !== &quot;undefined&quot; &amp;&amp; (
      &lt;LeafletMap
        position={[52, -0.5]}
        zoom={8}
        markerText={&quot;Hello, this is a marker&quot;}
      /&gt;
    )}
  &lt;/div&gt;
  ...
  </code></pre>
  <p>results in the following error</p>
  <pre><code>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/&lt;/&lt;/&lt;/&lt;
  /myapp/.cache/app.js:133
  
    130 | const preferDefault = m =&gt; (m &amp;&amp; m.default) || m
    131 | const Root = preferDefault(require(`./root`))
    132 | domReady(() =&gt; {
  &gt; 133 |   renderer(&lt;Root /&gt;, rootElement, () =&gt; {
    134 |     apiRunner(`onInitialClientRender`)
    135 |   })
    136 | })
  </code></pre>
  <p>I am quite a newbie to Gatsby, so I have no idea where to look. The project works fine with the project's original package versions.</p>
  <pre><code>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 =&gt; 2.27.0 
    gatsby-image: ^2.6.0 =&gt; 2.6.0 
    gatsby-plugin-intl: ^0.3.3 =&gt; 0.3.3 
    gatsby-plugin-newrelic: ^1.0.5 =&gt; 1.0.5 
    gatsby-plugin-react-helmet: ^3.5.0 =&gt; 3.5.0 
    gatsby-plugin-react-leaflet: ^2.0.13 =&gt; 2.0.13 
    gatsby-plugin-sharp: ^2.9.0 =&gt; 2.9.0 
    gatsby-source-contentful: ^4.1.0 =&gt; 4.1.0 
    gatsby-transformer-remark: ^2.11.0 =&gt; 2.11.0 
    gatsby-transformer-sharp: ^2.7.0 =&gt; 2.7.0 
  npmGlobalPackages:
    gatsby-cli: 2.14.0
  </code></pre>