`react-slick` - 类型无效错误答案

【问题标题】：`react-slick` - type is invalid error`react-slick` - 类型无效错误
【发布时间】：2017-09-12 09:27:54
【问题描述】：

我在尝试使用 webpack 要求 'react-slick` 时收到 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 错误。

const React = require("react");
const Slider = require("react-slick");

function MediaCarousel(props) {
  const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
  return !props.stories ? null : <Slider>
      <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
        <div><h3>4</h3></div>
        <div><h3>5</h3></div>
        <div><h3>6</h3></div>
    </Slider>
}
exports.MediaCarousel = MediaCarousel;

【问题讨论】：

标签： javascript reactjs react-slick

【解决方案1】：

尝试使用时已修复

const Slider = require("react-slick").default;

我想 react-slick 没有正确导出模块或者我的加载器有问题。

【讨论】：

【解决方案2】：

尝试将设置传递给 Slider 组件：

<Slider {...settings} >

【讨论】：

【解决方案3】：

Two things you will need to add in your code 
1. <Slider {...settings}>
2. module.exports = SimpleSlider;
below code is working for me, please find if it could help you:


import React from 'react';
import {render} from 'react-dom';
import Slider from 'react-slick';
require('./carousel.scss');

class SimpleSlider extends React.Component {
 render() {
      var settings = {
      dots: true,
      autoplay: true,
      arrows: true
    };
    return (
      <Slider {...settings}>
            <div><img src='../../src/assets/1.jpg' /></div>
          <div><img src='../../src/assets/2.jpg' /></div>
          <div><img src='../../src/assets/3.jpg' /></div>
          <div><img src='../../src/assets/4.jpg' /></div>
        </Slider>
    );
}
}

module.exports = SimpleSlider;

【讨论】：