I'm getting an error while styling a component imported from the Material-UI library with styled API (@emotion/styled).
Error:(19, 5) TS2589: Type instantiation is excessively deep and possibly infinite.
I've tried downgrading to typescript 3.5.3, as some people suggested, but that didn't fix the issue.
import * as React from 'react';
import styled from '@emotion/styled';
import TextField from '@material-ui/core/TextField';
const StyledTextField = styled(TextField)`
margin:10px;
`;
interface InputProps {
value: string;
name: string;
label: string;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
const Input: React.FC<InputProps> = ({ value, name, label, onChange }) => {
return (
<StyledTextField
value={value}
name={name}
onChange={onChange}
label={label}
/>
);
};
export default Input;
As part of bumping all packages it turns out we've hit an intrinsic typescript limit for recursive types, which was leading to “TS2589: Type instantiation is excessively deep and possibly infinite” . This change reduces the number of overloads to the number which works, and is still more than we currently use anywhere.
All type instantiations are already cached. Sorry, something went wrong. @koteisaev See my comments above. Its an issue with the @type/express-serve-static-core I had to change parameter name to a different yet similar for that URL, as a hotfix.
It's like constexpr where we generate information from source, so we can get statically-typed req.params from the path that we write. Unfortunately, these magic requires TypeScript compiler to do more work, and the TypeScript compiler at its current form cannot quite cope with it.
Setting a generic argument as an empty object fixed the issue.
const StyledTextField = styled(TextField)<{}>`
margin: 10px
`;
Following on from Nalhin's response, this is the correct type definition, of TextFieldProps
.
const StyledTextField = styled(TextField)<TextFieldProps>`
margin:10px;
`;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With