Issue with new types

[AnderssonChristian]

In my project I have a custom component that passes in cacheRequests = true for convenience when using this library. It looks like this:

import * as React from 'react';

import Svg from 'react-inlinesvg';
import {Props as IProps} from 'react-inlinesvg/lib/types';

const Icon = ({src, cacheRequests = true, ...rest}: IProps ) => (
  <Svg cacheRequests={cacheRequests} src={src} {...rest} />
);

export default Icon;

Prior to v2.0.1 the above worked fine without errors. However, since v2.0.1 I get an error:

ERROR in [at-loader] ./src/components/common/Icon/index.tsx:9:4 
    TS2322: Type '{ baseURL?: string | undefined; children?: ReactNode; description?: string | undefined; innerRef?: RefObject<HTMLElement> | ((instance: HTMLElement | null) => void) | null | undefined; ... 365 more ...; src: string; }' is not assignable to type 'IntrinsicClassAttributes<InlineSVG>'.
  Types of property 'ref' are incompatible.
    Type 'string | ((instance: SVGElement | null) => void) | RefObject<SVGElement> | null | undefined' is not assignable to type 'string | ((instance: InlineSVG | null) => void) | RefObject<InlineSVG> | null | undefined'.
      Type '(instance: SVGElement | null) => void' is not assignable to type 'string | ((instance: InlineSVG | null) => void) | RefObject<InlineSVG> | null | undefined'.
        Type '(instance: SVGElement | null) => void' is not assignable to type '(instance: InlineSVG | null) => void'.
          Types of parameters 'instance' and 'instance' are incompatible.
            Type 'InlineSVG | null' is not assignable to type 'SVGElement | null'.
              Type 'InlineSVG' is missing the following properties from type 'SVGElement': className, ownerSVGElement, viewportElement, addEventListener, and 217 more.

Any ideas of how to fix this? Maybe I'm just missing something silly.

Thanks!

[gilbarbara]

hey @AnderssonChristian

It worked in version 2.0.0 but not 2.0.1? Or were you using a 1.x version before this?

Are you setting a ref in your Icon instances? The error points to that.

[AnderssonChristian]

@gilbarbara I believe I had 2.0.0 earlier, definitely not 1.x though.

Yes, I am using refs.

[gilbarbara]

Not sure how to help.

How are you using the ref? Are you typing it? Is it really necessary?

[AnderssonChristian]

@gilbarbara my mistake. I had to double check and I cannot see using refs anywhere. I must have confused it with the same observation you did regarding the type error. In other words, I'm not using refs.

[gilbarbara]

Then I have no idea what is going on... Can you create a reproduction in codesandbox?

[RadhikaJayesh]

@gilbarbara As per above discussion, please find the issue reproduced in codesandbox as below. We had to upgrade few dependencies as well to match with our current situation (react, react-dom).
https://codesandbox.io/s/react-inlinesvg-forked-nt6zv?file=/src/example-svg.tsx

[AnderssonChristian]

@gilbarbara any input? 😕

[gilbarbara]

@AnderssonChristian Nope. Feel free to submit a PR

[AnderssonChristian]

@gilbarbara I have no idea what's wrong though. Did you have the chance to check the codesandbox?

[gilbarbara]

@RadhikaJayesh @AnderssonChristian Fixed in 2.2.0
I needed to omit the ref from the React.HTMLProps<SVGElement> since it can't be used in the component

[AnderssonChristian]

Hero! Thank you very much 👍

[AnderssonChristian]

@gilbarbara I am now getting another issue, unfortunately. Typical svg element attributes, such as preserveAspectRatio aren't allowed.

ERROR in [at-loader] ./src/components/common/CardButton/index.tsx:117:13 
    TS2322: Type '{ height?: string; src: string; preserveAspectRatio: string; }' is not assignable to type 'IntrinsicAttributes & Props & { css?: Interpolation<Theme>; }'.
  Property 'preserveAspectRatio' does not exist on type 'IntrinsicAttributes & Props & { css?: Interpolation<Theme>; }'.

I think it's related to the extend done in the Props interface. I believe it should be:

React.SVGProps<SVGElement>

instead of:

React.HTMLProps<SVGElement>

[gilbarbara]

hey @AnderssonChristian

Aren't there any other issues with the typings? Can you test a bit more?

[AnderssonChristian]

@gilbarbara I edited the types.d.ts as per above and I had no errors.

In other components where I've had svg elements (not related to this lib) I've used SVGProps and not HTMLProps, so I guess it makes sense.

[gilbarbara]

@AnderssonChristian
Yeah, it does!

It will be fixed in 2.2.1