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 | <span className={`svg-icon ${className}`}>
> 13 | <SVG src={toAbsoluteUrl(path)} className={svgClassName} />
| ^
14 | </span>
15 | )
16 | }
Replies (15)
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??
worked for me
Plus making sure that the @types/react version matches between the resolution and the dependency
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.
