'SVG' cannot be used as a JSX component.
I just purchased the 'Good – React Bootstrap 5 Admin Dashboard Template'.
I followed the instruction and run `yarn install` then `yarn start`, it gives me this error:
TypeScript error in good_react_v1.0.0-3/good_react_v1.0.0/theme/src/_theme/helpers/components/KTSVG.tsx(14,8):
'SVG' cannot be used as a JSX component.
Its instance type 'InlineSVG' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("E:/Downloads/good_react_v1.0.0-3/good_react_v1.0.0/theme/node_modules/@types/react-redux/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'. TS2786
12 | return (
13 | <span className={`svg-icon ${className}`}>
> 14 | <SVG src={toAbsoluteUrl(path)} className={svgClassName} />
| ^
15 | </span>
16 | )
17 | }
Replies (2)
Hi,
Please follow the installation instructions: https://preview.keenthemes.com/metronic8/react/docs/docs/quick-start, it will help you to solve your issue.
Regards,
Keenthemes support
/Users/eloanferreira/Desktop/demo1/src/_metronic/helpers/components/KTSVG.tsx
TypeScript error in /Users/eloanferreira/Desktop/demo1/src/_metronic/helpers/components/KTSVG.tsx(13,8):
'SVG' cannot be used as a JSX component.
Its instance type 'InlineSVG' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/Users/eloanferreira/Desktop/demo1/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props TS2786
11 | return (
12 | <span className={`svg-icon ${className}`}>
> 13 | <SVG src={toAbsoluteUrl(path)} className={svgClassName} />
| ^
14 | </span>
15 | )
16 | }
i'm having the same error, the new package.json and yarn.lock didn't solve it for me.
