React-slick: Export/Import issue in Typescript project

[hydrotik]

I needed to change:

module.exports.Slider = require('./slider');

In lib/index in order to support in my Typescript project the following:

import * as Slick from 'react-slick';

And:

        const Slider = Slick.Slider;
        return (
            <div className="carousel">
                <Slider {...settings}>
                    {map(slides, this.renderCarouselSlide)}
                </Slider>
            </div>
        );

Also my current type def is working with:

// Type definitions for React Slick v0.9.2
// Project: https://github.com/akiran/react-slick
// Definitions by: Donovan Adams <https://github.com/hydrotik>
// Definitions: https://github.com/borisyankov/DefinitelyTyped

/// <reference path="../react/react.d.ts" />



declare module "react-slick" {

    export var Slider: any;
}

But could be tightened up. Also related https://github.com/akiran/react-slick/issues/171

Seems like this is a breaking change, but I can't find any other way to get this to work with this setup. Any problems with this type of exporting of the Slider? I see this in another lib react-picture and it worked without modification.

[hydrotik]

Anybody? :)

[alihammad-gist]

@hydrotik I am using this type definition without editing the source code of react-slick

/// <reference path="../typings/react/react.d.ts" />
// change the typedefinition path for reactjs

declare module "react-slick" {
    interface __config {
        className?: string
        adaptiveHeight?: boolean
        arrows?: boolean
        autoplay?: boolean
        autoplaySpeed?: number // integer
        centerMode?: boolean
        centerPadding?: string | any
        cssEase?: string | any
        dots?: boolean
        dotsClass?: string
        draggable?: boolean
        easing?: string
        fade?: boolean
        focusOnSelect?: boolean
        infinite?: boolean //   should the gallery wrap around it's contents
        initialSlide?: number // int
        lazyLoad?: boolean
        rtl?: boolean
        slide?: string
        slidesToShow?: number // int
        slidesToScroll?: number //  int
        speed?: number //int
        swipe?: boolean
        swipeToSlide?: boolean
        touchMove?: boolean
        touchThreshold?: number // int
        variableWidth?: boolean
        useCSS?: boolean
        vertical?: boolean
        afterChange?: (() => void)
        beforeChange?: (() => void)
        slickGoTo?: number // int
    }

    interface P extends __config {
        responsive?: { breakpoint: number; settings: __config}[]
    }

    var foo: __React.ClassicComponentClass<P>;
    export = foo;
}

[hydrotik]

Great thanks for this heads up! How are you importing this? I'm getting

Property 'Slider' does not exist on type 'ClassicComponentClass<P>'.

[alihammad-gist]

I just use it like this

import * as Slider from 'react-slick'

var a = <Slider><img src=''..' /></Slider>;

If you look at the example at https://github.com/akiran/react-slick#example . This is how Slider is being imported. Slider is the default export.

var Slider = require('react-slick');

[iam-peekay]

@alihammad-gist thank you for sharing your config :) I modified it slightly to match the latest defaultProps. Note I'm using any for all of them because I was a little lazy 😓

declare module "react-slick" {
    interface __config {
      className?: any,
      accessibility?: any,
      adaptiveHeight?: any,
      arrows?: any,
      autoplay?: any,
      autoplaySpeed?: any,
      centerMode?: any,
      centerPadding?: any,
      cssEase?: any,
      customPaging?: (() => void),
      dots?: any,
      dotsClass?: any,
      draggable?: any,
      easing?: any,
      edgeFriction?: any,
      fade?: any,
      focusOnSelect?: any,
      infinite?: any,
      initialSlide?: any,
      lazyLoad?: any,
      pauseOnHover?: any,
      responsive?: any,
      rtl?: any,
      slide?: any,
      slidesToShow?: any,
      slidesToScroll?: any,
      speed?: any,
      swipe?: any,
      swipeToSlide?: any,
      touchMove?: any,
      touchThreshold?: any,
      useCSS?: any,
      variableWidth?: any,
      vertical?: any,
      waitForAnimate?: any,
      afterChange?: any,
      beforeChange?: any,
      edgeEvent?: any,
      init?: any,
      swipeEvent?: any,
      // nextArrow, prevArrow are react componets
      nextArrow?: any,
      prevArrow?: any,
    }

    interface P extends __config {
      responsive?: { breakpoint: number; settings: __config}[]
    }

    const component: React.ClassicComponentClass<P>;

    export = component;
}

[jgsacris]

I get the following error when trying this:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. any idea what may have changed?