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

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.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 47
Comments: 23 (4 by maintainers)

Commits related to this issue

downgrade rc-slider version to support TS. See: https://github.com/react-component/slider/issues/656 — committed to textkernel/oneui by eszthoff 4 years ago

Most upvoted comments

have got same issue… v9.2.4 is worked.

+10

jicjjang on Jun 3, 2020

@OhadTutay downgrade to v9.2.4 worked for me.

joshkopecek on Jun 16, 2020

Same here.

amcdnl on Jun 5, 2020

I will handle this problem.

kerm1it on Sep 18, 2020

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.

MasterCassim on Jun 10, 2020

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

kerm1it on Sep 23, 2020

@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;
}

LiamMartens on Jul 14, 2020