title: Type error while rendering leaflet.js map
body: <p>I'm have been trying to use leaflet.js library with react.js and following this code:</p>
  <pre><code>import {L} from 'leaflet'
  
  const myApp = () =&gt; {
  
  const map = L.map(&quot;map&quot;).setView([45, 1], 4);
  
  L.tileLayer(&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;, {
  attribution:
  '&amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'}).addTo(map);
  
  L.control.scale().addTo(map);
  L.marker([45, 1], {icon: new L.Icon({iconUrl: 'https://unpkg.com/leaflet@1.6.0/dist/images/marker-icon.png'})}).addTo(map);
  
  return (
      &lt;div id=&quot;map&quot; style=&quot;height:100vh&quot;&gt;&lt;/div&gt;
  )}
  </code></pre>
  <p>I get the following type error:
  TypeError: Cannot read properties of undefined (reading 'map') in line:</p>
  <pre><code>const map = L.map(&quot;map&quot;).setView([45, 1], 4);
  </code></pre>
  <p>Any ideas how to solve it?</p>