Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Type instantiation is excessively deep and possibly infinite with Emotion styled + material-ui + typescript

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;
like image 790
Nalhin Avatar asked Oct 09 '19 19:10

Nalhin


People also ask

Is type instantiation too deep in typescript?

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.

Are all Type instantiations already cached in express?

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.

Why doesn't TypeScript support static typing like constexpr?

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.


2 Answers

Setting a generic argument as an empty object fixed the issue.

const StyledTextField = styled(TextField)<{}>`
  margin: 10px
`;
like image 181
Nalhin Avatar answered Nov 15 '22 01:11

Nalhin


Following on from Nalhin's response, this is the correct type definition, of TextFieldProps.

const StyledTextField = styled(TextField)<TextFieldProps>`
  margin:10px;
`;
like image 20
Ben Seward Avatar answered Nov 15 '22 00:11

Ben Seward