Property 'center' does not exist on type 'IntrinsicAttributes & MapContainerProps' on Leaflet

Question

I'm trying to implement a simple map on my app, but I'm getting this error while using the sample code below from React Leaflet.

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

export default function App() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
            <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
        </Marker>
    </MapContainer>
  );
}

The error:

Type '{ children: Element[]; center: number[]; zoom: number; scrollWheelZoom: boolean; }' is not assignable to type 'IntrinsicAttributes & MapContainerProps'.
  Property 'center' does not exist on type 'IntrinsicAttributes & MapContainerProps'.  TS2322

    150 |                     />
    151 | 
  > 152 | <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        |               ^
    153 |   <TileLayer
    154 |     attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    155 |     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

I'm using React and Typescript.

Answer 1

My issue was that even when I had react-leaflet types installed, I still needed to install types for leaflet:

npm i -D @types/leaflet

Answer 2

try to install leaflet types:

yarn add -D @types/react-leaflet

then restart your project.