Lastest Version of ReactJS and LeafLet.Shapefile Not Work, only display blank page

Question

I'm currently working on ReactJS GIS and referring to this sample Demo . But when I update the latest version of React and dependencies is not work, no error message displayed on the console. What wrong. I've also test in my local computer, the result is same (not work) what happen?

The demo:

After update the dependencies:

Answer 1

There are many things that have been changed:

1. React has changed to 18.x. You should replace in index.js all the code

   import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <App /> );

2. react-leaflet has moved to version 4.x which has breaking changes:

map ref is received via a ref and a useState hook and no need for map.current or map.current.leafletElement . Also Map comp has been renamed to MapContainer

 const [map, setMap] = useState(null);

  useEffect(() => {
    if (!map) return;

    map.setView([34.74161249883172, 18.6328125], 2);
  }, [map]);

<MapContainer
      center={position}
      zoom={13}
      style={{ height: "100vh" }}
      ref={setMap}
    >

3. mapRef in MapContainer's child components is received via

   const map = useMap();

Demo