tanem / react-svg

:art: A React component that injects SVG into the DOM.
https://npm.im/react-svg
MIT License
829 stars 92 forks source link

'ReactSVG' cannot be used as a JSX component. #2863

Open atiribelli opened 6 months ago

atiribelli commented 6 months ago

I'm using a ReactSVG like this:

'use client'

import { ReactSVG } from "react-svg";

...

const Page = () => {

...

const attachTurnsToSvg = (elements = []) => {
 elements.forEach((element: SVGRectElement) => {
  //insert text inside SVGelements
 });
};

    const attachCallsToSvg = (elements = []) => {
        elements.forEach((element: SVGCircleElement) => {
            element.addEventListener('click', (e) => {
                console.debug('clicked', e);
            });
        });
    };

return(
<>
...
                <ReactSVG
                    src="/mysvg.svg" 
                    beforeInjection={(svg) => {
                        const svgWidth = (width !== undefined ? 0.625 * width : 1200);
                        const svgHeight = (height !== undefined ? 0.88 * height : 800);
                        svg.setAttribute('style', `width: ${svgWidth}px; height: ${svgHeight}px;`);
                      }}
                    afterInjection={(svg: { querySelectorAll: (arg0: string) => never[]; }) => {
                        const rects = svg?.querySelectorAll('rect.turnRect') || [];
                        attachTurnsToSvg(rects);
                        const circles = svg?.querySelectorAll('circle.callCircle') || [];
                        attachCallsToSvg(circles);
                    }}
                    className={styles.map} 
                />
</>)
}

export default Page;

and everything seems to works fine in development, however i got the errors: "JSX element class does not support attributes because it does not have a 'props' property.", 'ReactSVG' cannot be used as a JSX component. Its type 'typeof ReactSVG' is not a valid JSX element type. Type 'typeof ReactSVG' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'. Type 'ReactSVG' is missing the following properties from type 'Component<any, any, any>': context, setState, forceUpdate, props, refs

and can't build the app.

Everything else works as i intended and i can't seem to find another solution to make it work...