react-component
Latest (9.3.0) breaks createSliderWithTooltip
What did we do
After updating working code from 9.2.4 -> 9.3.0 we are no longer able to build our project...
Error Detail:
Specifically, here is the error message full detail:
Step #2: /workspace/src/pages/search/filters/SearchByCost.tsx Step #2: TypeScript error in /workspace/src/pages/search/filters/SearchByCost.tsx(30,9): Step #2: No overload matches this call. Step #2: Overload 1 of 2, '(props: Readonly<ComponentWrapperProps>): { state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { ...; }) => Element; ... 17 more ...; UNSAFE_componentWillUpdate?(nextProps: Readonly<...>, nextState: Readonly<...>, nextContext: any): void; }', gave the following error. Step #2: Type '{ tipFormatter: (value: any) => string; min: number; className: string; max: number; defaultValue: number[]; marks: { 0: string; 50: string; 100: string; 150: string; 200: string; }; step: number; value: number[]; onChange: (x: number[]) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<{ state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; ...'. Step #2: Property 'min' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<{ state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; ...'. Step #2: Overload 2 of 2, '(props: ComponentWrapperProps, context?: any): { state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; UNSAFE_componentWillUpdate?(nextProps: Readonly<...>, nextState: Readonly<...>, nextContext: any): void; }', gave the following error. Step #2: Type '{ tipFormatter: (value: any) => string; min: number; className: string; max: number; defaultValue: number[]; marks: { 0: string; 50: string; 100: string; 150: string; 200: string; }; step: number; value: number[]; onChange: (x: number[]) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<{ state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; ...'. Step #2: Property 'min' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<{ state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; ...'.
Example usage...
import { Range as SliderRange, createSliderWithTooltip } from "rc-slider";
export const NumberRange = createSliderWithTooltip(SliderRange);
...
return (
<div className="px-1">
<NumberRange
tipFormatter={(value: any) => `$${value}/day`}
min={0}
className="m-1"
max={100}
defaultValue={[0, 50]}
marks={{ 0: "0", 50: "50", 100: "100", 150: "150", 200: "any" }}
step={5}
value={[ 0, 50 ]}
onChange={update}
/>
</div>
);
@rogerkjoy How were you able to work around it?
I was not able to work around it, we instead reverted to previous revisions and pinned the packages. Still waiting for a fix.
For some reason, I tried doing the import differently and that made it work for me. It's in there example which isn't very accessible, but you can find it. It looks like there is something going wrong with the important, and although I was not able to find the technical reason to why it's not the same, it did work for me in the end. Maybe you can try it in a poc?
But here is the relevant code in my project:
import Slider from "rc-slider";
const RangeInput = ({...props}) => {
const { Range, createSliderWithTooltip } = Slider;
const MyRange = createSliderWithTooltip(Range);
return (<MyRange
marks={marks}
dots={dots}
step={step}
min={min}
max={max}
value={values}
defaultValue={defaultValues}
onChange={_onChange}
onAfterChange={_onAfterChange}
/>);
}
This made me come back to a 'compilable' (with typescript) state. Although I thought, (probably same as you did) that the import statement should be able to get done at the top as well. But for some weird reason that's not the case.
What I did notice is that I can only move range input one 'step' per drag. But that might be configuration, since I don't really need it, I'm dropping that. But maybe it helps you get through this.
Best of luck anyway! I hope they get back to you soon, as I can understand how frustrating that is! Having the same issues with some other packages.
With the following import and component use:
import Slider, { createSliderWithTooltip } from 'rc-slider';
const SliderWithTooltip = createSliderWithTooltip(Slider);
// and then trying to render ...
<SliderWithTooltip
min={min}
max={max}
step={1}
included={true}
dots={false}
className='rc-slider'
value={value}
onChange={this.onChange}
tipFormatter={(value: number) => `${value}`}
tipProps={{
placement: 'top',
prefixCls: 'rc-slider-tooltip',
}}
/>
I was running into (what I think is) a similar error, which objects to passing thevalue prop to the SliderWithTooltip component:
No overload matches this call. Overload 1 of 2, '(props: (ComponentWrapperProps & GenericSliderProps) | Readonly<ComponentWrapperProps & GenericSliderProps>): { ...; }', gave the following error. Type '{ min: number; max: number; step: number; included: true; dots: false; className: string; value: number; onChange: (val: number) => void; tipFormatter: (value: number) => string; tipProps: { placement: string; prefixCls: string; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<{ state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; ...'. Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<{ state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; ...'. Overload 2 of 2, '(props: ComponentWrapperProps & GenericSliderProps, context: any): { state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; ... 18 more ...; UNSAFE_componentWillUpdate?(nextProps: Readonly<...>, nextState: Readonly<...>, nextContext: any): void; }', gave the following error. Type '{ min: number; max: number; step: number; included: true; dots: false; className: string; value: number; onChange: (val: number) => void; tipFormatter: (value: number) => string; tipProps: { placement: string; prefixCls: string; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<{ state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; ...'. Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<{ state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; ...'.
What ended up working for me was to import the SliderProps interface and pass it as the type argument:
import Slider, { createSliderWithTooltip, SliderProps } from 'rc-slider';
const SliderWithTooltip = createSliderWithTooltip<SliderProps>(Slider);
Hopefully passing in a type argument works for other people, too ! 🤞
