React-slick: Custom arrows are not working (0.13.3)

[Exomnius]

After updating the slider to version 0.13.3, custom arrows are not working anymore.

The error:
invariant.js:45 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Arrow components:

export class PrevArrow extends Component {

  static propTypes = {
      onClick: PropTypes.func
  };

  constructor(props) {
      super(props);
  }

  render() {
    return <button type="button" className="prev" onClick={this.props.onClick} />;
  }
}

export class NextArrow extends Component {

  static propTypes = {
      onClick: PropTypes.func
  };

  constructor(props) {
      super(props);
  }

  render() {
    return <button type="button" className="next" onClick={this.props.onClick} />;
  }
}

Component with the slider:

export default class Overlay extends Component {
    static propTypes = {
        ...
    }

    render() {
        const settings = {
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: true,
            prevArrow: PrevArrow,
            nextArrow: NextArrow
        };

        return {
            <Slider {...settings}>
                <img ...... />
             </Slider>
        }
    }
}

Did anything change with the way the custom arrows need to be defined?

Regards
Cornel Janssen

[akiran]

Custom arrow example in docs is working perfectly
https://github.com/akiran/react-slick/blob/master/examples/CustomArrows.js

It could be because of something else in project

[baldurh]

@Exomnius you probably figured this out by now but if anyone is wondering you should pass in <PrevArrow /> and <NextArrow /> instead of PrevArrow and NextArrow.

[slorber]

thanks @baldurh I've opened a PR to fix the doc which still says to pass a Component instead of an Element, + a React issue to get a clearer error message in case render returns a component (like it was the case here)