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.

Question

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 10 months ago · 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" }]
}

Ludmila · Answer 1 · Mon Sep 25 2023 18:04:36 GMT+0800 (China Standard Time)

@gilbarbara, please help me with this issue 🙏🙏🙏

Ludmila · Answer 2 · Mon Sep 25 2023 18:12:20 GMT+0800 (China Standard Time)

Might be related to #181

Gil Barbara · Answer 3 · Mon Sep 25 2023 21:25:50 GMT+0800 (China Standard Time)

Hey @milaabl

Upgrading to 4.0.4 fixes the problem.

Ludmila · Answer 4 · Mon Sep 25 2023 23:12:43 GMT+0800 (China Standard Time)

@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"
  },

Ludmila · Answer 5 · Mon Sep 25 2023 23:14:59 GMT+0800 (China Standard Time)

@gilbarbara,

🙏🙏🙏

Gil Barbara · Answer 6 · Mon Sep 25 2023 23:26:56 GMT+0800 (China Standard Time)

@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.

Ludmila · Answer 7 · Mon Sep 25 2023 23:59:17 GMT+0800 (China Standard Time)

@gilbarbara, thank you so much for your reply! I'll check that now.

Ludmila · Answer 8 · Tue Sep 26 2023 00:05:57 GMT+0800 (China Standard Time)

@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.