'SVG' cannot be used as a JSX component.
hi team,
I am facing the below issue while installing react version of metronic 8.
I am following step by step guide that is explained on:https://preview.keenthemes.com/metronic8/react/docs/docs/quick-start
Failed to compile.
/Users/aviisingh/Documents/code/myorderbooks/merchant/src/_metronic/helpers/components/KTSVG.tsx
TypeScript error in /Users/aviisingh/Documents/code/myorderbooks/merchant/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/aviisingh/Documents/code/myorderbooks/merchant/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 | };
Replies (4)
Hi,
Try to follow the documentation: <a href="https://preview.keenthemes.com/metronic8/react/docs/docs/quick-start>https://preview.keenthemes.com/metronic8/react/docs/docs/quick-start</a>, it will help you to avoid this issue.
Regards,
Keenthemes support
you need to select the correct theme and in it the item icon that can be copied and parsed. I have tried different demos but it only works the correct version.
run this, npm i react@18 react-dom@18 @types/react@18 @types/react-dom@18, saved me big
hey it didn't work . still facing the same even lots of new errors are coming.
rs/aviisingh/Documents/code/myorderbooks/mercha...' is not assignable to type 'React.PropsWithChildren<import("/Users/aviisingh/Documents/code/myorderbooks/merchant/node_modules/@types/react-table/index").HeaderProps<import("/Users/aviisingh/Documents/code/myorderbooks/merchant/src/app/modules/apps/product-management/product-list/core/_models").Product>>'.
17 | {
18 | Header: (props) => (
> 19 | <CustomHeader tableProps={props} title='Product Name' className='min-w-125px' />
| ^^^^^^^^^^
20 | ),
21 | id: 'productName',
22 | Cell: ({...props}) => <InfoCell user={props.data[props.row.index]} />,
ERROR in src/app/modules/apps/product-management/product-list/table/columns/_columns.tsx:22:37
TS2322: Type '{ user: any; }' is not assignable to type 'IntrinsicAttributes & Props'.
Property 'user' does not exist on type 'IntrinsicAttributes & Props'.
20 | ),
21 | id: 'productName',
> 22 | Cell: ({...props}) => <InfoCell user={props.data[props.row.index]} />,
| ^^^^
23 | },
24 | {
25 | Header: (props) => (
attaching package.json file data
{
"name": "myordersbook-merchant",
"version": "8.0.38",
"private": true,
"homepage": "https://myorderbooks.com/merchant/",
"resolutions": {
"@types/react": "17.0.40"
},
"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": "18",
"react-apexcharts": "^1.3.9",
"react-bootstrap": "^2.1.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "18",
"react-inlinesvg": "^3.0.0",
"react-intl": "^5.20.4",
"react-is": "^17.0.2",
"react-query": "^3.34.12",
"react-router-dom": "6.2.1",
"react-scripts": "5.0.1",
"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",
"ts-md5": "^1.2.11",
"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": "18",
"@types/react-copy-to-clipboard": "5.0.0",
"@types/react-dom": "18",
"@types/react-table": "^7.7.9",
"prettier": "2.5.1",
"react-query-devtools": "2.6.3",
"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/*"
]
}
