title: React-leaflet giving window undefined error
body: <p>I am using react-leaflet and server-side react to draw a map. I created a map component and also tried using the <code>useEffect</code> hook to dynamically load the import to bypass this error:</p>
  <blockquote>
  <p>ReferenceError: window is not defined</p>
  </blockquote>
  <p>This is the code I have:</p>
  <pre><code>import React, {  
      useEffect,
      useState,
  } from 'react';
  import 'leaflet/dist/leaflet.css';
  import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
  
  const MyMapComponent = () =&gt; {
  
      const [leafletLoaded, setLeafletLoaded] = useState(false);
  
      useEffect(() =&gt; {
          const loadData = async () =&gt; {
              await import('leaflet/dist/leaflet.js');
                  setLeafletLoaded(true);
          }
          loadData();
      }, []);
  
      return (
          &lt;MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}&gt;
              &lt;TileLayer
                  attribution='&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
                  url=&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;
              /&gt;
              &lt;Marker position={[51.505, -0.09]}&gt;
                  &lt;Popup&gt;
                      A pretty CSS3 popup. &lt;br /&gt; Easily customizable.
                  &lt;/Popup&gt;
              &lt;/Marker&gt;
          &lt;/MapContainer&gt; 
      );
  };
  
  
  export default MyMapComponent;
  </code></pre>
  <p>Is there something I am missing?</p>