TS2590: Expression produces a union type that is too complex to represent.

[cherepanov]

With @types/react v19 typecheck is broken

@types/[email protected] @types/[email protected] [email protected]

TS2590: Expression produces a union type that is too complex to represent.

Reproduction

import {NumericFormat} from 'react-number-format'

const Component = (...props: any) => <NumericFormat {...props} />

[jraoult]

@cherepanov I also found that. This is because of the way the default value for the type parameter (InputAttributes) is defined. We can work around this issue by explicitly passing it with:

 <NumericFormat<
            Omit<
              ComponentPropsWithoutRef<"input">,
              "defaultValue" | "value" | "children"
            >
          >
          {...props}
/>

cf. https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#definitely-not-reacthtmlprops-or-reacthtmlattributes

[enisze]

@cherepanov I also found that. This is because of the way the default value for the type parameter (InputAttributes) is defined. We can work around this issue by explicitly passing it with:

<NumericFormat< Omit< ComponentPropsWithoutRef<"input">, "defaultValue" | "value" | "children" > > {...props} /> cf. react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#definitely-not-reacthtmlprops-or-reacthtmlattributes

This does not help me unfortunately, I still got the type issue.

export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
	ref?: React.Ref<HTMLInputElement>
}

export const Input = ({ className, children, ...props }: InputProps) => {
	return (
		<input
			className={cn(
				'flex w-full truncate rounded border border-grey-medium px-8px py-6px text-left text-sm',
				className,
			)}
			{...props}
		/>
	)
}

export type NumberInputProps = InputProps & NumericFormatProps

export const NumberInput = (props: NumberInputProps) => {
	return (
		<NumericFormat<
			Omit<
				//Workaround https://github.com/s-yadav/react-number-format/issues/880
				//Does not seem to help
				ComponentPropsWithoutRef<'input'>,
				'defaultValue' | 'value' | 'children'
			>
		>
			{...props}
			customInput={Input}
		/>
	)
}

[lucasfreyptml]

Same issue here with

    "@types/react": "19.1.1",
    "@types/react-dom": "19.1.2",

Giving me TS2590: Expression produces a union type that is too complex to represent.

[artursopelnik]

+1

[artursopelnik]

I am using NumericFormat with a custom input in MUI. Here is my current workaround:

import { ComponentPropsWithoutRef } from 'react'
import TextField from '@mui/material/TextField'
import { TextFieldProps } from '@mui/material/TextField';

<NumericFormat<
  Omit<ComponentPropsWithoutRef<'input'>, 'defaultValue' | 'value' | 'children'> & TextFieldProps
>
  variant="standard"
  placeholder="monthly"
  aria-labelledby={labelId}
  value={value}
  customInput={TextField}
  thousandSeparator="."
  decimalSeparator=","
  onValueChange={(values) => {
    this.handleChange(values.floatValue);
  }}
  decimalScale={2}
  fixedDecimalScale
  allowNegative={false}
  sx={{ maxWidth: '10rem' }}
/>