title: react-leaflet: even the simplest code doesn't show up anything
body: <p>I'm trying to figure out how to render <code>leaflet</code> map with <code>react-leaflet</code>,
  because I'm getting no output as you can see here:</p>
  <p><a href="https://i.stack.imgur.com/eGAFu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eGAFu.png" alt="enter image description here" /></a></p>
  <p>This is the code:</p>
  <p>import * as React from 'react';</p>
  <pre><code>import * as leaflet from 'leaflet'
  import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
  
  // https://gist.github.com/simon04/3b89aa6ca858c72110bb80dd13b4f941
  
  // https://github.com/Leaflet/Leaflet/issues/4849
  
  import &quot;leaflet/dist/leaflet.css&quot;
  //import &quot;./leaflet.css&quot;
  import &quot;leaflet/dist/images/marker-shadow.png&quot;
  
  //leaflet.Icon.Default.mergeOptions({
      //iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
      //iconUrl: require('leaflet/dist/images/marker-icon.png'),
      //shadowUrl: require('leaflet/dist/images/marker-shadow.png')
  //});
  
  
  import Box from '@mui/material/Box'
  
  export default function Mapping(props) {
  
    // https://stackoverflow.com/questions/70722036/react-leaflet-even-the-simplest-code-doesnt-show-up-anything
  
    // https://stackoverflow.com/questions/70618361/react-leaflet-cant-input-marker-position-from-fetching-api
  
    // https://stackoverflow.com/questions/40365440/react-leaflet-map-not-correctly-displayed?rq=1
  
  
    const [mapState, setMapState] = React.useState(
      {
        lat: 41.257017,
        lng: 29.077524,
        zoom: 13,
      }
    )
  
    return (
      &lt;div&gt;
        &lt;h3&gt;Map&lt;/h3&gt;
  
        &lt;Box sx={{ minWidth: 120 }}&gt;
  
          &lt;MapContainer
            center={[51.505, -0.09]}
            zoom={13}
            scrollWheelZoom={false}
            style={{ height: '100vh', width: '100wh' }}
          &gt;
            &lt;TileLayer
              attribution='&amp;copy; &lt;a href=&quot;https://www.openstreetmap.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;
  
  
        &lt;/Box&gt;
  
  
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>As suggested <a href="https://github.com/Leaflet/Leaflet/issues/4849" rel="nofollow noreferrer">here</a>
  I added the following <code>rules</code> in <code>webpack.config.js</code> :</p>
  <pre><code>    {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: &quot;file-loader&quot;,
            options: {
              name: &quot;[path]/[name].[ext]&quot;,
            },
          },
        ],
      },
    ]
  },
  </code></pre>
  <p>And, actually, no error messages about <code>css</code> files.</p>
  <p>Adding</p>
  <pre><code>&lt;style&gt;
    .leaflet-container {
      height: 400px;
      width: 800px;
     }
   &lt;/style&gt;
  </code></pre>
  <p>to <code>index.html</code> I get this output:</p>
  <p><a href="https://i.stack.imgur.com/RC1rD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RC1rD.png" alt="enter image description here" /></a></p>
  <p>which is something closer to the output I should expect <a href="https://react-leaflet.js.org/docs/start-setup/" rel="nofollow noreferrer">https://react-leaflet.js.org/docs/start-setup/</a> :</p>
  <p><a href="https://i.stack.imgur.com/yp2RA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yp2RA.jpg" alt="enter image description here" /></a></p>
  <p>Putting <code>&lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt;</code> at the bottom of the <code>body</code> part of <code>index.html</code> , I get this:</p>
  <p><a href="https://i.stack.imgur.com/WSCU9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WSCU9.png" alt="enter image description here" /></a></p>
  <p>SOLVED:</p>
  <p>After removing the <code>proxy configuration</code>, removing the <code>a</code> link in the <code>index.html</code> and updating the <code>map.tsx</code> as follows:</p>
  <p>import * as React from 'react';</p>
  <pre><code>import * as leaflet from 'leaflet'
  import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
  
  // https://gist.github.com/simon04/3b89aa6ca858c72110bb80dd13b4f941
  
  // https://github.com/Leaflet/Leaflet/issues/4849
  
  import &quot;leaflet/dist/leaflet.css&quot;
  import &quot;leaflet/dist/images/marker-shadow.png&quot;
  
  //Leaflet.Icon.Default.mergeOptions({
      //iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
      //iconUrl: require('leaflet/dist/images/marker-icon.png'),
      //shadowUrl: require('leaflet/dist/images/marker-shadow.png')
  //});
  
  
  import Box from '@mui/material/Box'
  
  export default function Mapping(props) {
  
    // https://stackoverflow.com/questions/70722036/react-leaflet-even-the-simplest-code-doesnt-show-up-anything
  
    // https://stackoverflow.com/questions/70618361/react-leaflet-cant-input-marker-position-from-fetching-api
  
    // https://stackoverflow.com/questions/40365440/react-leaflet-map-not-correctly-displayed?rq=1
  
  
    const [mapState, setMapState] = React.useState(
      {
        lat: 41.257017,
        lng: 29.077524,
        zoom: 13,
      }
    )
  
    return (
      &lt;div&gt;
        &lt;h3&gt;Map&lt;/h3&gt;
  
        &lt;div id=&quot;map&quot;&gt;
  
          &lt;MapContainer
            center={[51.505, -0.09]}
            zoom={13}
            scrollWheelZoom={false}
            style={{ height: '100vh', width: '100wh' }}
          &gt;
  
          &lt;TileLayer
            attribution='&amp;copy; &lt;a href=&quot;https://www.openstreetmap.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;
  
  
        &lt;/div&gt;
  
  
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>the <code>leaflet</code> map finally appears:</p>
  <p><a href="https://i.stack.imgur.com/WTSkJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WTSkJ.jpg" alt="enter image description here" /></a></p>
  <pre><code>&quot;@types/leaflet&quot;: &quot;^1.7.8&quot;
  &quot;leaflet&quot;: &quot;^1.7.1&quot;
  &quot;webpack&quot;: &quot;^5.23.0&quot;
  &quot;react&quot;: &quot;^17.0.2&quot;
  &quot;react-leaflet&quot;: &quot;^3.2.5&quot;
  node: v16.13.0
  O.S.: Ubuntu 20.04 Desktop
  </code></pre>
  <p>What am I doing wrongly or what am I missing?
  How to make <code>react-leaflet</code> working?</p>