Material-ui: create-react-app-with-typescript: TS2344: 'Type Removals | "classes"' does not satisfy constraint 'string'

[mathenshall]

• [X] This is a v1.x issue (v0.x is no longer maintained).
• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Demo page should render without an error.

Current Behavior

On following instructions to clone (using curl command line provided in readme) the following error is shown in the browser:-
/Users/xxxxxx/create-react-app-with-typescript/node_modules/@material-ui/core/index.d.ts (12,3): Type '"classes" | Removals' does not satisfy the constraint 'string'. Type 'Removals' is not assignable to type 'string'. Type 'keyof C' is not assignable to type 'string'. Type 'string | number | symbol' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'.
The package.json specifies 'latest' for all dependancies, and it seems that material-ui typings are not compatible with Typescript version 2.9.1. Changing the version to 2.8.1 fixes the issue.

Steps to Reproduce (for bugs)

Follow instructions on readme for create-react-app-with-typescript

[giantryansaul]

We are getting the same error. Only happens on Typescript 2.9.x, does not happen on 2.8.x.

[Nufflee]

Same exact issue here. @giantryansaul

[feddyups]

same issue.
`ERROR in [at-loader] ./node_modules/@material-ui/core/index.d.ts:12:3
TS2344: Type '"classes" | Removals' does not satisfy the constraint 'string'.
Type 'Removals' is not assignable to type 'string'.
Type 'keyof C' is not assignable to type 'string'.
Type 'string | number | symbol' is not assignable to type 'string'.
Type 'number' is not assignable to type 'string'.

ERROR in [at-loader] ./node_modules/@material-ui/core/index.d.ts:57:77
TS2344: Type 'keyof U' does not satisfy the constraint 'string'.
Type 'string | number | symbol' is not assignable to type 'string'.
Type 'number' is not assignable to type 'string'.`

does not appear when Typescript is locked down to 2.8.4

[mctep]

TS 2.9 has start support number and sybmol types for keyof. It is possible to disable this behaviour with keyofStringsOnly option as workaround.

https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes#keyof-now-includes-string-number-and-symbol-keys

[olee]

I am also getting lots of these errors wherever I import material-ui components with Typescript 2.9

(33,14): JSX element type 'Grid' does not have any construct or call signatures.

but it only seems to happen when I do imports like

import Grid from '@material-ui/core/Grid';

[JustinSomers]

With @mctep's suggestion, I set the "keyOfStringsOnly" option to true in my tsconfig.json file, which fixed the issue:
{ "compilerOptions": { "keyofStringsOnly": true },

[feddyups]

@mctep : the workaround suggested will be good enough for now, thanks!

[Bessonov]

Run in same issue like @olee . Downgraded ts to 2.8.3.

[romainquellec]

same !

[mctep]

@olee @Bessonov It may be related to https://github.com/mui-org/material-ui/issues/11698

[klundgren]

I'm getting this similar error with TS 2.9 and TS 3.2:

TS2344: Type '"align"' does not satisfy the constraint '"hidden" | "dir" | "slot" | "style" | "title" | "color" | "children" | "headers" | "prefix" | "lang" | "id" | "colSpan" | "placeholder" | "rowSpan" | "scope" | "defaultChecked" | ... 236 more ... | "onTransitionEndCapture"'.

[eps1lon]

I'm getting this similar error with TS 2.9 and TS 3.2:

TS2344: Type '"align"' does not satisfy the constraint '"hidden" | "dir" | "slot" | "style" | "title" | "color" | "children" | "headers" | "prefix" | "lang" | "id" | "colSpan" | "placeholder" | "rowSpan" | "scope" | "defaultChecked" | ... 236 more ... | "onTransitionEndCapture"'.

@klundgren This is a possible duplicate of #14179. Could you please follow https://github.com/mui-org/material-ui/issues/14179#issuecomment-454152746. If this doesn't help please open a new issue and follow the issue template.