Typescript declaration seems to be broken at least for the Circle

[dennisat]

Bug report in v4

Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.

Please make sure to check the following boxes before submitting an issue.\ Issues opened without using this template will be closed unless they have a good reason not to follow this template.

• [x] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [x] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
• [x] Using the latest version of React and ReactDOM v18. --> v17.
• [x] Using the latest v4 version of React-Leaflet.
• [x] The issue has not already been reported.
• [x] Make sure you have followed the quick start guide for Leaflet.
• [x] Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

It looks like the types are broken or incomplete.

This import { Circle } import from 'react-leaflet/Circle'has this errorTS2307: Cannot find module 'react-leaflet/Circle' or its corresponding type declarations.`.

But even if we import it as this import { Circle } from 'react-leaflet/lib/Circle', there is another TS error for the radius property: Property 'radius' does not exist on type 'IntrinsicAttributes & CircleProps & RefAttributes<Circle<any>>'.;

For the last one, digging into the types of the leaflet@1.9.3 file: node_modules/@types/leaflet/index.d.ts, there is no CircleOptions interface.

The CircleOptions is used from your code in node_modules/@react-leaflet/core/lib/circle.d.ts as this interface CircleProps extends CircleOptions, PathProps.

Actual behavior

• No typescript error importing this: import { Circle } from 'react-leaflet/Circle'.
• All Circle's properties, like the radius, should be accepted.

Steps to reproduce

Is TSX file, import he Circle according to the official documentation: import { Circle } from 'react-leaflet/Circle' and compile.

[dennisat]

Hello, is anybody there?

[CasualEngineerZombie]

The correct way of importing the Circle is import { Circle } from "react-leaflet";

[dennisat]

I have attempted this import as well, @CodePhilanthropist, and it seems that this is indeed the correct way it should be. However, I am still encountering the same issue.

Could someone provide the package versions of the dependencies listed below?

Here are my versions:

• "leaflet": "^1.7.1",
• "leaflet-geometryutil": "^0.9.3",
• "leaflet.offline": "^2.1.0",
• "react-leaflet": "^4.2.1",
• "react-leaflet-google-layer": "2.0.3",

About the react-leaflet-google-layer, there is a problem when bumping to v 2.2.0, there is a typescript error that the type property of ReactLeafletGoogleLayer is not defined. Super strange error, but let's say that this is out of the scope.

[dennisat]

Strange, doesn't any body use typescript???

[hooch]

Using typescript here and this works fine?

import { Circle } from 'react-leaflet'
..
return (
    <Circle center={[latitude, longitude]} radius={3} />
)

[SamuelGalantei4sea]

I am facing the same problem. To get around the situation, I added //@ts-ignore