SVG Typescript error

I am getting this error when running react demo2

TypeScript error in /Users/tombrown/mvplaunchers/fys/fys_app/demo2/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/......../demo2/node_modules/react-bootstrap/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'. TS2786

11 | return (
12 |
> 13 |
| ^
14 |
15 | )
16 | }

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (14)

Hi,

We know about this issue, it's the cause React has released a new version that brakes v17.
For now, try to next steps:
1) Remove your note_modules and *lock files.
2) Update your packages.json file and re-install packages again:

{
"name": "demo1",
"version": "8.0.38",
"private": true,
"homepage": "/metronic8/react/demo1",
"dependencies": {
"@formatjs/intl-pluralrules": "4.0.28",
"@formatjs/intl-relativetimeformat": "9.1.7",
"@fortawesome/fontawesome-free": "5.15.3",
"@popperjs/core": "2.10.1",
"animate.css": "4.1.1",
"apexcharts": "3.27.1",
"axios": "0.21.1",
"axios-mock-adapter": "1.19.0",
"bootstrap": "5.1.3",
"bootstrap-icons": "1.7.2",
"chart.js": "3.3.2",
"clsx": "1.1.1",
"del": "6.0.0",
"formik": "2.2.9",
"line-awesome": "1.3.0",
"lint-staged": "11.0.0",
"mini-css-extract-plugin": "1.6.2",
"nouislider": "15.2.0",
"object-path": "0.11.5",
"path": "0.12.7",
"prism-react-renderer": "1.2.1",
"prism-themes": "1.7.0",
"prismjs": "1.23.0",
"qs": "6.10.3",
"react": "17.0.2",
"react-apexcharts": "1.3.9",
"react-bootstrap": "2.1.0",
"react-copy-to-clipboard": "5.0.3",
"react-dom": "17.0.2",
"react-inlinesvg": "2.3.0",
"react-intl": "5.20.4",
"react-is": "17.0.2",
"react-query": "3.34.12",
"react-router-dom": "6.2.1",
"react-scripts": "4.0.3",
"react-table": "7.7.0",
"react-topbar-progress-indicator": "4.1.0",
"rtlcss-webpack-plugin": "4.0.6",
"sass": "1.32.1",
"socicon": "3.0.5",
"typescript": "4.1.2",
"web-vitals": "1.0.1",
"yup": "0.32.9"
},
"devDependencies": {
"@testing-library/jest-dom": "5.11.4",
"@testing-library/react": "11.1.0",
"@testing-library/user-event": "12.1.10",
"@types/bootstrap": "5.0.16",
"@types/chart.js": "2.9.32",
"@types/jest": "26.0.15",
"@types/node": "12.0.0",
"@types/nouislider": "15.0.0",
"@types/object-path": "0.11.0",
"@types/prismjs": "1.16.5",
"@types/qs": "6.9.7",
"@types/react": "17.0.0",
"@types/react-copy-to-clipboard": "5.0.0",
"@types/react-dom": "17.0.0",
"@types/react-table": "7.7.9",
"react-query-devtools": "2.6.3",
"prettier": "2.5.1",
"v": "0.3.0",
"webpack-cli": "4.8.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "prettier --check .",
"format": "prettier --write .",
"rtl": "webpack --config webpack-rtl.config.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": "eslint --fix"
},
"eslintIgnore": [
"dist/*"
]
}

Regards,
Keenthemes support

Hi
I have the same error, even with packages.json you provided
BR

It is still happening with the code you provided.

I did a code compare and the file you sent me matches exactly with what was in my demo2 react folder

Nope, in this file, we removed all '^' from packages versions. you will get an exact tested working version.

Regards,
Keenthemes support

Still happening.

Share your yarn.lock or npm.lock file. Need to check your case.

Regards,
Keenthemes support

Hi Tom,

I've investigated the case.
Could you please also update your yarn.lock file from this Github Gist https://gist.github.com/carmelodevuz/40c32fa5a96d3a64c5f4be20bf44085c.
Then remove node_modules folder again and re-install packages with yarn.

The main thread of this issue is here: https://devs.keenthemes.com/question/metronic-react-demo-3.

Regards,
Keenthemes support

I can't access that issue.
It is a private locked question!!

I have fixed this simply by adding:

"resolutions": {
"@types/react": "17.0.40"
}

to the root of package.json. I deleted my node_modules and ran yarn start.

I did this with the latest version of Metronic, I am NOT using the package.json that keen themes support has replied with on this post.

I hope this helps.

Great! It worked for me.

cool... I don't get why it works but works.

Hey not sure but I think this causes modals to stop working!
Can anyone confirm??

I have the same issue and even after changing the package.json files, yarn lock file, and also installing the react types package. I still have this issue with node 17.4 version.

I also added --openssl-legacy-provider command in the react start command.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(