ThemeProvider cannot be used as a JSX component

See original GitHub issue

Environment

System:

OS: macOS 12.3.1
CPU: (4) x64 Intel® Core™ i5-7360U CPU @ 2.30GHz
Memory: 30.26 MB / 8.00 GB
Shell: 5.8 - /bin/zsh

Binaries:

Node: 17.6.0 - /usr/local/bin/node
Yarn: 3.2.0 - /usr/local/bin/yarn
npm: 8.5.1 - /usr/local/bin/npm

npmPackages:

babel-plugin-styled-components: ^2.0.7 => 2.0.7
styled-components: ^5.3.5 => 5.3.5

Reproduction

React: 18.0.0

When using ThemeProvider TypeScript says:

TS2786: ‘ThemeProvider’ cannot be used as a JSX component. Its instance type ‘Component<ThemeProviderProps<any, any>, any, any>’ is not a valid JSX element. The types returned by ‘render()’ are incompatible between these types. Type ‘import(“/…/node_modules/@types/react-dom/node_modules/@types/react/index”).ReactNode’ is not assignable to type ‘React.ReactNode’. Type ‘{}’ is not assignable to type ‘ReactNode’.

Issue Analytics

State:
Created a year ago
Comments:7

Top GitHub Comments

2reactions

slaviczavikcommented, May 18, 2022

Closing since this is problem with types and not library itself.

Hi! How did you fix this problem? I faced the same after upgrading up to 18 React

Hi, for now I just ignoring it with the @ts-ignore (hotfix). This issue isn’t related with the styled-components itself, problem is with the @types/styled-components which hasn’t been update yet.

1reaction

tijmenvangurpcommented, Dec 9, 2022

I was able to fix this issue by upgrading the react types library yarn add -D @types/react@17.0.52

Top Results From Across the Web

Component cannot be used as a JSX component in React

Another common cause of the "Component cannot be used as a JSX component" error is when we return anything other than a JSX...

Component cannot be used as a JSX component. Its return ...

I'm currently getting the following error on the Todos component inside TodoApp.tsx : 'Todos' cannot be used as a JSX component.

themeprovider' cannot be used as a jsx component. its ...

When using ThemeProvider TypeScript says: TS2786: 'ThemeProvider' cannot be used as a JSX component. Its instance type 'Component<ThemeProviderProps<any, ...

'SVG' cannot be used as a JSX component.

'SVG' cannot be used as a JSX component. Its instance type 'InlineSVG' is not a valid JSX element. The types returned by 'render()'...

App can not be used as JSX component - react error - YouTube

Join this channel to get access to perks:https://www.youtube.com/channel/UCoSpmr2KNOxjwE_B9ynUmig/joinMy GearCamera ...