Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

react demo 1 compile fail - 'SVG' cannot be used as a JSX component.

the theme is not touched at all but cannot be built due to compile errors:

node v16.14.2 npm 8.5.0

$ npm run build

demo1@8.0.38 build react-scripts build

Creating an optimized production build...

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.5.0

YOUR TYPESCRIPT VERSION: 4.6.3

Please only submit bug reports when using the officially supported version.

============= Failed to compile.

/home/sam/Downloads/react/react/demo1/src/_metronic/helpers/components/KTSVG.tsx TypeScript error in /home/sam/Downloads/react/react/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("/home/sam/Downloads/react/react/demo1/node_modules/react-intl/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'. TS2786

11 |   return (
12 |     <span className={`svg-icon ${className}`}>

13 | <SVG src={toAbsoluteUrl(path)} className={svgClassName} /> | ^ 14 | 15 | ) 16 | }

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)


Hi,

We are releasing (Metronic v8.039) new demos 6+7 for React version and a full upgrade for all demos to react 18. ETA is early May.
For now, just need to use a workaround from the doc: https://preview.keenthemes.com/metronic8/react/docs/docs/quick-start

Regards,
Keenthemes support



Just used package.json and yarn.lock from the below URL and everything seems to be fine. Why don't the theme is not being updated with correct files?

https://gist.github.com/carmelodevuz/40c32fa5a96d3a64c5f4be20bf44085c.


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  :(