TableCell component prop cannot be "div" with new typescript version

[enikonemeth]

With the new typescript version (4.1.2) I got error for add a component="div" prop to a TableCell item.
ERROR in src/components/content-list/display-name-field.tsx:19:7
TS2322: Type '"div"' is not assignable to type '"td" | "th" | ComponentClass<TableCellBaseProps, any> | FunctionComponent | undefined'.

• The issue is present in the latest release. (Maybe this bug was also in the latest release, but typescript did not this check it before)
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Typescript throws error to component="div" prop in TableCell

Expected Behavior 🤔

No errors

Steps to Reproduce 🕹

Clone this repository to reproduce: (this is a monorepo)
https://github.com/SenseNet/sn-client

We have so many components where we faced this issue, but here is one example from them:
https://github.com/SenseNet/sn-client/blob/develop/apps/sensenet/src/components/content-list/display-name-field.tsx

We had a workaround for this: <TableCell component={'div' as any} .... > ... </TableCell>

Try to change it to <TableCell component="div".... > ... </TableCell>

The following error will occure:

Your Environment 🌎

 "@material-ui/core": "^4.11.0",
 "@material-ui/icons": "^4.9.1",
 "@material-ui/lab": "^4.0.0-alpha.56",
"typescript": "^4.1.2",

Tsconfig:

"compilerOptions": {
  "module": "esnext",
  "outDir": "dist",
  "composite": false,
  "jsx": "react",
  "rootDir": "./src",
  "forceConsistentCasingInFileNames": true,
  "experimentalDecorators": true,
  "emitDecoratorMetadata": true,
  "importsNotUsedAsValues": "preserve"
},

[oliviertassinari]

@pusztaienike Do you think you could reproduce on Codesandbox? It seems correct in https://codesandbox.io/s/basictable-material-demo-forked-onyfu?file=/demo.tsx.

[enikonemeth]

@pusztaienike Do you think you could reproduce on Codesandbox? It seems correct in https://codesandbox.io/s/basictable-material-demo-forked-onyfu?file=/demo.tsx.

I have tried to reproduce it on codesandbox without success. It is a strange behaviour in our monorepo. Please give us some days to find out what the problem is before you close this issue. Thank you!

[enikonemeth]

Thank you for your patience @oliviertassinari. The problem was a version-mismatch in our repository caused by yarn (yarnpkg/yarn#3967). After updating to @types/react 17.x the errors are gone.

[oliviertassinari]

@pusztaienike I'm glad it's working with React 17

[rossthedevigner]

@pusztaienike I ran into this same error today when using running a fresh yarn install but I didn't experience this when running a fresh npm install. This was really throwing me since I blew away the lock files and node_modules folder. How were you able to determine the version mismatch?

@oliviertassinari I'm curious what would cause this component prop TS error. I noticed in my yarn.lock file this dependency for the @types/material-ui

"@types/material-ui@^0.21.8":
  version "0.21.8"
  resolved "https://registry.yarnpkg.com/@types/material-ui/-/material-ui-0.21.8.tgz#a550778942b2e9791653aa2c4b1a35127c44cab6"
  integrity sha512-Rsx3tRNoYkidDKfMfh+cegtOHMl73akzKnQ5pzxTrbx5oaUXLtG6YVlvtS43uebOSTDf8GQNaseB52r3zVagEg==
  dependencies:
    "@types/react" "*"
    "@types/react-addons-linked-state-mixin" "*"

And when using yarn info @material-ui/core:

  "peerDependencies": {
    "@types/react": "^16.8.6 || ^17.0.0",
    "react": "^16.8.0 || ^17.0.0",
    "react-dom": "^16.8.0 || ^17.0.0"
  },

Does the "@types/react" "*" mean grab the latest version as the dependency for MUI's own types, in this case ^17.0.0?

From my package:

"@material-ui/core": "^4.11.0",
"@material-ui/lab": "^4.0.0-alpha.56",
"@material-ui/pickers": "^3.2.10",
...
"@types/material-ui": "^0.21.8",
"@types/react": "^16.9.43",
"@types/styled-components": "^5.1.2",
...
"react": "^16.13.1",
"react-dom": "^16.13.1",

Is there a way to confirm the correct dependency is installed moving forward?