Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

'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 | 16 | ) 17 | }

user
DH SUN 4 years ago
React Bootstrap 5
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

user
Carmelo D 4 years ago

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


user
eloan ferreira 4 years ago

/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 | 15 | ) 16 | }

i'm having the same error, the new package.json and yarn.lock didn't solve it for me.

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(