title: My leaflet map doesn't appear on my webpage
body: <p>I'm using ReactJS with NextJS. </p>
  
  <p>Currently my leaflet fails to fill the whole parent div on my page, in fact it doesn't appear at all. I assumed the map would fill the entire parent div, maybe someone have an idea to handle the situation.</p>
  
  <p>Here my leaflet snippet: </p>
  
  <pre><code>const Wrapper= styled.div` 
    width:${props =&gt; props.width};
    height:${props =&gt; props.height};
  `;
  
  const location= [34.0522, -118.2457]
  export default class Map extends Component{ 
    componentDidMount(){  
      // Map = require('react-leaflet').Map
      // Marker = require('react-leaflet').Marker
      // Popup = require('react-leaflet').Popup
      // TileLayer = require('react-leaflet').TileLayer
      // Tooltip = require('react-leaflet').Tooltip
      // this.setState({ showMap: true })
      this.map= L.map("map", { 
  
        center:location,
        zoom:12,
        zoomControl:true
      })
      L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
        maxZoom: 20,
        attribution: '&amp;copy; Openstreetmap France | &amp;copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
      })
      .addTo(this.map) 
  
      var marker = L.marker(location ,{icon: placeholder}).addTo(this.map); 
      setTimeout( ()=&gt; {
        marker.bindPopup("Come see us, it would be awesome!", {maxWidth: "500"});  
  
     this.map.setView(location);
    }
  
    render(){ 
      return (
        &lt;Fragment&gt;
            &lt;Head&gt;
            &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon-2x.png"/&gt;
            &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon.png"/&gt;
  
            &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
     integrity="yyyy"
     crossorigin=""/&gt; 
  
       &lt;script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
     integrity="yyyyy"
     crossorigin=""&gt;&lt;/script&gt;   
            &lt;/Head&gt;
          &lt;Wrapper width="100%" height="100%" id="map"/&gt; 
        &lt;/Fragment&gt;
      )
    }
  } 
  </code></pre>
  
  <p>any hint would be great,
  thanks</p>