fix(Slider): fix react-slick and react-player import (#1165)

Author: kseniya57

src/blocks/Slider/Slider.tsx

@@ -4,7 +4,7 @@ import {useUniqId} from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
 import get from 'lodash/get';
 import noop from 'lodash/noop';
-import SlickSlider, {Settings} from 'react-slick';
+import _SlickSlider, {Settings} from 'react-slick';
 
 import Anchor from '../../components/Anchor/Anchor';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
@@ -44,6 +44,11 @@ const slick = block('slick-origin');
 const DOT_WIDTH = 8;
 const DOT_GAP = 16;
 
+const SlickSlider =
+    'default' in _SlickSlider && _SlickSlider.default
+        ? (_SlickSlider.default as typeof _SlickSlider)
+        : _SlickSlider;
+
 export interface SliderProps
     extends Omit<SliderParams, 'children'>,
         Refable<HTMLDivElement>,
@@ -107,7 +112,7 @@ export const SliderBlock = (props: React.PropsWithChildren<SliderProps>) => {
 
     const [currentIndex, setCurrentIndex] = React.useState<number>(0);
     const [childStyles, setChildStyles] = React.useState<Object>({});
-    const [slider, setSlider] = React.useState<SlickSlider>();
+    const [slider, setSlider] = React.useState<_SlickSlider>();
     const prevIndexRef = React.useRef<number>(0);
     const autoplayTimeId = React.useRef<Timeout>();
     const {hasFocus, unsetFocus} = useFocus(slider?.innerSlider?.list);
@@ -384,7 +389,7 @@ export const SliderBlock = (props: React.PropsWithChildren<SliderProps>) => {
         const variableWidth = isServer && isMobile;
 
         const settings = {
-            ref: (slickSlider: SlickSlider) => setSlider(slickSlider),
+            ref: (slickSlider: _SlickSlider) => setSlider(slickSlider),
             className: slick(null, className),
             arrows,
             variableWidth,

src/components/ReactPlayer/ReactPlayer.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {PlayFill} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
-import ReactPlayer from 'react-player';
+import _ReactPlayer from 'react-player';
 
 import {MobileContext} from '../../context/mobileContext';
 import {VideoContext} from '../../context/videoContext';
@@ -35,6 +35,11 @@ const b = block('ReactPlayer');
 
 const FPS = 60;
 
+const ReactPlayer =
+    'default' in _ReactPlayer && _ReactPlayer.default
+        ? (_ReactPlayer.default as typeof _ReactPlayer)
+        : _ReactPlayer;
+
 export interface ReactPlayerBlockProps
     extends Omit<MediaVideoProps, 'loop' | 'src'>,
         ClassNameProps {
@@ -99,7 +104,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
         const ref = React.useRef<HTMLDivElement>(null);
         const buttonRef = React.useRef<HTMLButtonElement>(null);
 
-        const [playerRef, setPlayerRef] = React.useState<ReactPlayer>();
+        const [playerRef, setPlayerRef] = React.useState<_ReactPlayer>();
         const [isPlaying, setIsPlaying] = React.useState(autoPlay);
         const [playedPercent, setPlayedPercent] = React.useState<number>(0);
         const [currentHeight, setCurrentHeight] = React.useState(height);
@@ -310,7 +315,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
             }
         }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);
 
-        const onReady = React.useCallback((player: ReactPlayer) => {
+        const onReady = React.useCallback((player: _ReactPlayer) => {
             setPlayerRef(player);
             const videoElement = player.getInternalPlayer();
             const videoWidth = videoElement.videoWidth as number | undefined;