Slider: Slider - cannot be used as a JSX component.

[mortalYoung]

Version

• rc-slider: @9.3.0
• node: v10.16.0
• npm: 6.9.0
• Browser: chrome

Steps to reproduce

• import Slider from 'rc-slider';
• use it as controlled component like

<Slider value={value} onChange={handleSliderChange} />

What is actually happening?

• it posts errors like that

error TS2607: JSX element class does not support attributes because it does not have a 'props' property.
error TS2786:'Slider' cannot be used as a JSX component.
   Its instance type '{ [x: string]: any; componentDidMount(): void; componentWillUnmount(): void; onMouseDown: (e: any) => void; onTouchStart: (e: any) => void; onFocus: (e: any) => void; onBlur: (e: any) => void; onMouseUp: () => void; ... 16 more ...; render(): Element; }' is not a valid JSX element.
   Type '{ [x: string]: any; componentDidMount(): void; componentWillUnmount(): void; onMouseDown: (e: any) => void; onTouchStart: (e: any) => void; onFocus: (e: any) => void; onBlur: (e: any) => void; onMouseUp: () => void; ... 16 more ...; render(): Element; }' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.

[jicjjang]

have got same issue... v9.2.4 is worked.

[amcdnl]

Same here.

[MasterCassim]

Same here for Slider & Range; worked with v9.2.4 and not with 9.3.0. Seems to come from the *.d.ts files which are now in v9.3.0 which conflict with the @types/rc-slider mappings. Removing the @types/rc-slider does not seem to work though.

[joshkopecek]

Same issue here. It's to do with the .d.ts files generated in the build. The new build process seems to have spat out .d.ts. files automatically. If they're removed then this would probably be fixed.

[OhadTutay]

Did anyone find any workaround to the issue?

[joshkopecek]

@OhadTutay downgrade to v9.2.4 worked for me.

[LiamMartens]

Temporarily you can create a custom .d.ts file with the following and include it in your tsconfig.json

declare module 'rc-slider' {
  const Slider: React.ComponentType<Partial<import('rc-slider/lib/Slider').SliderProps>>;
  export const Range: React.ComponentType<Partial<import('rc-slider/lib/Range').RangeProps>>;
  export const Handle: React.ComponentType<Partial<import('rc-slider/lib/Handle').HandleProps>>;
  export const createSliderWithTooltip: typeof import('rc-slider/lib/createSliderWithTooltip').default;
  export default Slider;
}

[MasterCassim]

@LiamMartens I have tried that but there are several issues with these typings. For example trackStyle and handleStyle do not support arrays; style & classname are not supported; some other properties are required pushable, ... which are not needed etc.

[LiamMartens]

@MasterCassim can always override I suppose. It is more manual work, but at least it works without downgrading

declare module 'rc-slider' {
  const Slider: React.ComponentType<Partial<import('rc-slider/lib/Slider').SliderProps> & {
    className?: string;
    ...
  }>;
  export const Range: React.ComponentType<Partial<import('rc-slider/lib/Range').RangeProps>>;
  export const Handle: React.ComponentType<Partial<import('rc-slider/lib/Handle').HandleProps>>;
  export const createSliderWithTooltip: typeof import('rc-slider/lib/createSliderWithTooltip').default;
  export default Slider;
}

[rlz]

I prefer to downgrade instead of remembering when and what workarounds to remove.

[sbusch]

Although ant-design is very active, the components it's based on are being neglected 😞

We did also a downgrade.

[Kibo007]

Same issue, I can see ant design had the same issue they just did declared custom type to override but then you lose types so props are any.

[rediska1114]

Same here.
version 9.3.1

[samuelcastro]

Same issue here, I'm considering to use https://github.com/airbnb/rheostat

Is this still maintained?

[kerm1it]

I will handle this problem.

[sbusch]

@Kermit-Xuan thanks for fixing this issue! Could we kindly ask you to take a look at https://github.com/react-component/slider/issues/657 which is also a type-related issue caused by breaking changes in 9.3.0?

[kerm1it]

Fixed in https://github.com/react-component/slider/releases/tag/v9.5.0