Typescript error: 'SVG' cannot be used as a JSX component. Its return type 'string | number | boolean | Element | Iterable<ReactNode> | null | undefined' is not a valid JSX element.
milaabl opened this issue ยท 8 comments
Describe the bug
When I try to compile the file where I use the react-inlinesvg component, I get an error:
'SVG' cannot be used as a JSX component.
Its return type 'string | number | boolean | Element | Iterable | null | undefined' is not a valid JSX element.
I use the component this way:
import SVG from 'react-inlinesvg';
// ...
return <SVG
onLoad={() => {
if (!progressLineCapIndicatorRef.current) return;
const RADIUS = 88;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
progressLineCapIndicatorRef.current.style.strokeDasharray = String(
CIRCUMFERENCE + 2,
);
updateProgressRef(progressLineCapIndicatorRef, CIRCUMFERENCE);
}}
innerRef={progressLineCapIndicatorRef}
src={stakingCircularProgressLinecapSeparatorIcon}
/>
Your minimal, reproducible example
https://stackblitz.com/edit/vite-react-ts-3fvk9p?file=src%2FApp.tsx
Steps to reproduce
- See the MRE โ https://stackblitz.com/edit/vite-react-ts-3fvk9p?file=src%2FApp.tsx
- Clone the project: https://github.com/milaabl/circular-progress-dynamic-svg-react-inlinesvg-linecap
- Run tsc or build the project after
npm i
- You'll see the error!
Expected behavior
Typescript should not detect an error.
Please help me figure out how to fix that ๐
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
No response
react-inlinesvg version
^4.0.3
TypeScript version
^5.0.2
Build tool
vite
Additional context
My tsconfig.json
file:
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
@gilbarbara, please help me with this issue ๐๐๐
Hey @milaabl
Upgrading to 4.0.4 fixes the problem.
@gilbarbara, thank you so much for your reply!
Hmm, npm i react-inlinesvg@4.0.4
didn't fix that for me.
My package.json is:
"dependencies": {
"@commitlint/lint": "^17.4.4",
"@tanstack/react-query": "^4.33.0",
"@types/react-helmet": "^6.1.6",
"@walletconnect/universal-provider": "^2.4.0",
"@web3modal/ethereum": "^2.7.1",
"@web3modal/react": "^2.7.1",
"autoprefixer": "^10.4.13",
"axios": "^1.3.4",
"ethers": "5.7.2",
"path": "^0.12.7",
"postcss": "^8.4.21",
"rc-slider": "^10.3.0",
"react": "^18.2.0",
"react-cookie": "^4.1.1",
"react-countdown": "^2.3.5",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.43.5",
"react-inlinesvg": "^4.0.4",
"react-query": "^3.39.3",
"react-router-dom": "^6.9.0",
"react-toastify": "^9.1.1",
"redux-saga": "^1.2.3",
"swiper": "^10.2.0",
"tailwindcss": "^3.2.7",
"use-local-storage": "^3.0.0",
"usehooks-ts": "^2.9.1",
"viem": "^1.11.1",
"wagmi": "^1.4.2",
"web3": "^1.9.0",
"yup": "^1.0.2"
},
@gilbarbara,
๐๐๐
@milaabl
You probably need to update the @types/react
and typescript
packages.
And add skipLibCheck: true
to your tsconfig.json
I just tested it in a newly created vite app and the stackblitz sandbox, and it worked as expected.
@gilbarbara, thank you so much for your reply! I'll check that now.
@gilbarbara, after upgrading @types/react
and typescript
, it seems to be working well now! Thank you so much for your reply! Btw, skipLibCheck was already in my tsconfig.json file.
P.S. I also upgrated my global typescript
package (that provides the tsc
command). That was the missing point to make it all compile without errors.