Pourquoi cette erreur survient-elle ?

Cette erreur est généralement causée par :

1. Double initialisation du conteneur Leaflet, due à des changements dans la gestion du cycle de vie des composants avec React 19.
2. Mode Strict de React qui monte et démonte les composants plusieurs fois en développement.
3. Des versions incompatibles de React, React-Leaflet ou Leaflet utilisées ensemble.

Solution : passer à React-Leaflet v5 RC

La version v5.0.0-rc.1 de React-Leaflet a été conçue pour résoudre ce problème. Elle prend en charge React 19 et corrige les problèmes de double initialisation.

Étape 1 : mettre à jour les dépendances

Modifiez votre package.json pour inclure les versions compatibles :

"dependencies": {
  "leaflet": "^1.9.4",
  "react-leaflet": "v5.0.0-rc.1",
}

Ensuite, installez les dépendances avec Yarn ou NPM :

# Avec Yarn
yarn install

# Avec NPM
npm install

Étape 2 : désactiver le rendu côté serveur (optionnel mais recommandé)

Si vous utilisez Next.js, désactivez le rendu côté serveur pour votre composant de carte avec next/dynamic. Cela évite les problèmes liés à l'absence de window pendant le rendu initial.

Exemple :

import dynamic from 'next/dynamic';

const MapComponent = dynamic(() => import('./MapComponent'), { ssr: false });

export default function HomePage() {
  return <MapComponent />;
}

Étape 3 : implémenter React-Leaflet v5

Voici un exemple fonctionnel avec la version v5 RC :

import { MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

export default function MapComponent() {
  return (
    <MapContainer
      center={[51.505, -0.09]}
      zoom={13}
      style={{ height: '100%', width: '100%' }}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
    </MapContainer>
  );
}

Si vous suivez les étapes de ce tutoriel, vous devriez résoudre efficacement l'erreur "Map container is already initialized". Ayant moi-même été confronté à ce problème récemment, cette solution a fonctionné pour mon projet.

N'oubliez pas de rester attentif aux mises à jour du paquet React-Leaflet, car il est encore en version Release Candidate. D'autres versions pourraient arriver prochainement, apportant des améliorations ou des corrections supplémentaires.