recharts: Layer: TypeScript error with latest `@types/react` version

Looks like the xyzCapture events were removed in react types in 18.x because they don’t do anything.

Relevant react issue https://github.com/facebook/react/issues/17883

Our generated declaration files include these removed events which breaks you with skipLibCheck: true.

We’ll upgrade react types in 3.x and this shouldn’t be an issue anymore, but probably won’t do it in 2.x for risk of breaking something else.

Thanks!

CC: @PavelVanecek

Fixed in https://github.com/recharts/recharts/releases/tag/v2.12.5

Lmk if this looks okay https://github.com/recharts/recharts/pull/4413 (fixing some related types while I’m at it, not sure why Pie was an HTMLElement…)

Yeah that makes sense @ckifer, thanks for taking a look at this. I’ve had a quick look and here’s my thinking. The SVGProps interface…

interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes<T>

… is SVGAttributes anyway with ClassAttributes, which is

interface ClassAttributes<T> extends Attributes {
  ref?: LegacyRef<T> | undefined;
}

interface Attributes {
  key?: Key | null | undefined;
}

… so the ref and key which aren’t part of SVGAttributes need to be added, and are added implicitly from createElement. and you can see that Attributes and ClassAttributes are added anyway, which is why key and ref are always available in your IDE even when you don’t specify it.

const MyComponent = () => null;
const Foo = () => <MyComponent key="IT_WORKS" />

const MyComponentForwarded = forwardRef(() => null);
const Bar = () => <MyComponentForwarded key="IT_WORKS" ref={useRef()} />;

Thanks @ckifer!

I did a bit more digging and came to the following result, maybe it helps:

Typically, type discrepancies shouldn’t be an issue, as long as only the imported types are used, allowing consumers to define the version of, e.g. @types/react on their end. In this case, it appears that the forwardRef types are transformed to leverage the SVGProps' keys for the Pick utility type. Consequently, these keys are bundled in with the @types/react version used in this project. If a type from SVGProps (or any interface it extends) is removed, the described error is thrown.