Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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<TableCellBaseProps> | 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"
},

Issue Analytics

State:
Created 3 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

enikonemethcommented, Nov 30, 2020

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

0reactions

rossthedevignercommented, Dec 4, 2020

@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?