Components with withStyles() cannot be used as a JSX component.
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Whenever I try to use a component that contains withStyles(), I get TypeScript error “‘Item’ cannot be used as a JSX component.”
This is in JS code that has //@ts-check
enabled. No specific tsconfig, just the default VSCode configuration.
The same happens with the latest mui v4 or v5.
Expected behavior 🤔
This used to work fine, but probably with some upgrade it stopped working.
Steps to reproduce 🕹
Steps:
- Create a component that is exported like
export default withStyles(styles)(Item);
- Use this component somewhere as
<Item />
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Memory: 15.84 GB / 31.94 GB
Binaries:
Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
Managers:
Gradle: 6.7.1 - C:\bin\gradle-6.7.1-bin\bin\gradle.BAT
pip3: 21.2.4 - C:\Python310\Scripts\pip3.EXE
Utilities:
Git: 2.13.2. - C:\Program Files\Git\cmd\git.EXE
FFmpeg: 4.4 - c:\batch\ffmpeg.EXE
Virtualization:
Docker: 20.10.11 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE
IDEs:
Android Studio: Version 4.2.0.0 AI-202.7660.26.42.7351085
VSCode: 1.67.1 - C:\Program Files\Microsoft VS Code\bin\code.CMD
Languages:
Python: 3.10.1 - C:\Python310\python.EXE
Databases:
SQLite: 3.7.8 - c:\batch\sqlite3.EXE
Browsers:
Chrome: 101.0.4951.54
Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.39)
Internet Explorer: 11.0.19041.1566
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:8 (3 by maintainers)
Top Results From Across the Web
TypeScript error: (component with MUI style) cannot be used ...
Found a solution: Ditch withStyles and use makeStyles instead. interface DataTableProps { data: any; mode: string; parent: any; } ...
Read more >Component cannot be used as a JSX component in React
The error Component cannot be used as a JSX component occurs for multiple reasons, returning an array of JSX elements instead of a...
Read more >'stylesprovider' cannot be used as a jsx component - You.com
TypeScript error in C:/repos/jit/era-frontend/src/App.tsx(23,16): 'StylesProvider' cannot be used as a JSX component. Its element type 'ReactElement<any, ...
Read more >Advanced (LEGACY) - MUI System
This example creates a theme object for custom-built components. If you intend to use some of the MUI's components you need to provide...
Read more >Use with React - Styletron
For long time, the styles were left outside of React components and handled by ... Compose existing styled component using the withStyle function;...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
My Problem
My problem was that a MUI sub-dependency
@types/react-transition-group
referenced@types/react@*
and this allowed@types/react@v18
to be installed alongside@types/react@v16
, despite@types/react@v16
being an explicit and direct dependency of the my project. The React types in these 2 versions are not compatible.My Project Dependency Hierarchy
@types/reactv16
⚠@types/react-transition-group
@types/react@*
==@types/react@latest
==@types/react@18
⚠React 18 was just recently released. This explains why it seemed to have started failing all of a sudden even though it had been working at one point. It also explains why it worked at runtime, but not compile-time.
Is this your problem too?
Check your
package-lock.json
oryarn.lock
for all references to@types/react
. What versions are they? Are they different? If yes, that’s your problem.Solution
My solution was to “pin” all “@types/react” dependencies to 16. This was accomplished with Yarn’s
resolutions
field inpackage.json
.Lesson
Remember to specify your dependencies’ versions folks.
OK, thanks. I guess that it might be related to VSCode only, possibly its bug, since I don’t see how my setup could affect it (don’t see any relevant VSCode Extension).