Components with withStyles() cannot be used as a JSX component.

Duplicates

• 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:

1. Create a component that is exported like export default withStyles(styles)(Item);
2. 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

[dperez3]

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

• My project
  • @types/reactv16 ⚠
  • MUI
    • @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 or yarn.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 in package.json.

Lesson

Remember to specify your dependencies’ versions folks.

[jirihajek]

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