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

[jirihajek]

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

[ZeeshanTamboli]

Please provide a CodeSandbox (https://mui.com/r/issue-template or https://mui.com/r/ts-issue-template), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[jirihajek]

The easiest way is to install

npm install @mui/styles react@17 react-dom@17

and open in VSCode such a file:

// @ts-check
import React, { Component } from 'react';
import withStyles from '@mui/styles/withStyles';

const styles = theme => ({});

class Item extends Component {
	render() {
		return (<div />);
	}
}

const ItemS = withStyles(styles)(Item);

function TestItem() {
	return (
		<ItemS />
	)
}

The <ItemsS /> gets underlined:

which doesn't happen when withStyles() isn't used.

[ZeeshanTamboli]

Works for me. Take a look at this CodeSandbox.

If you are using TypeScript, does your file have .tsx extension?

[github-actions]

👋 Thanks for using MUI Core!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://mui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[jirihajek]

The sample file has to have .js extension to reproduce the issue, sorry to not make it clear. When I change the extension to .tsx, the issue disappears. Still sounds like a bug to me, at least it did work fine previously.

[ZeeshanTamboli]

Works fine for me with .js extension as well: https://codesandbox.io/s/intelligent-noether-k00n4z?file=/src/index.js.

Looks like something to do with your setup.

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

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

[serg06]

Thanks for the solution @dperez3. It even worked in my monorepo.

Reproducible steps:

• Check your version of @types/react and @types/styled-components in package.json
• Add this to your package.json:

"resolutions": {
  "@types/react": "17.0.14"  // Set this to whichever version you want, anything starting with 17 should do
}

• Run yarn remove @types/react @types/styled-components && yarn add -D @types/react@^INSERT_VERSION_HERE @types/styled-components@^INSERT_OTHER_VERSION_HERE (This will update yarn.lock)
• Finish it off by deleting the monorepo's node_modules folder and running yarn once more. (This will update yarn.lock again)

If you see that your yarn.lock was modified, then you succeeded!