Issue with new types
AnderssonChristian opened this issue · comments
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!
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.
@gilbarbara I believe I had 2.0.0 earlier, definitely not 1.x though.
Yes, I am using refs.
Not sure how to help.
How are you using the ref? Are you typing it? Is it really necessary?
@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.
Then I have no idea what is going on... Can you create a reproduction in codesandbox?
@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
@gilbarbara any input?
@AnderssonChristian Nope. Feel free to submit a PR
@gilbarbara I have no idea what's wrong though. Did you have the chance to check the codesandbox?
@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
Hero! Thank you very much
@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>
Aren't there any other issues with the typings? Can you test a bit more?
@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.
@AnderssonChristian
Yeah, it does!
It will be fixed in 2.2.1