Leaflet is not working with react

[pcabreram1234]

Issue

When the user try to mount the map it throw the error described above.

Where occurs

In the leaflet branch specifically in the line 14 of the src/components/Map.jsx file

[itsalb3rt]

Replace all the content of the file https://github.com/pcabreram1234/mapping/blob/0d829866cacfc42a4d9dcafa5a80db07398cf61d/src/components/Map.jsx

import React, { useEffect, useState } from 'react';
import L from 'leaflet';
import '../../node_modules/leaflet/dist/leaflet.css';
import '../styles/Map.css';

export default function Map() {
  const [map, setMap] = useState(null);

  useEffect(() => {
    var container = L.DomUtil.get('map');

    if (container != null) {
      container._leaflet_id = null;
    }
    const map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer(
      'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
      {
        maxZoom: 19,
        attribution:
          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      }
    ).addTo(map);

    // to use after the map is created, you can export the map object or use a ref
    setMap(map);
  }, []);
  return <div id="map" style={{ height: '100vh' }}></div>;
}

[pcabreram1234]

Thanks a lot, like I can see in ReactJs are more step to initialize a leaflet object.

[pcabreram1234]

For example in Vanilla JavaScript with this line it is more than enough with this lines. var map = L.map('map').setView([51.505, -0.09], 13);

With the previous line it return the map object.

[itsalb3rt]

Same as react, React is JavaScript

    const map = L.map('map').setView([51.505, -0.09], 13);