`react-slick` - 類型無效錯誤

Question

嘗試使用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; 

Answer 1

時

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

嘗試它固定我想反應，光滑不正確導出模塊或我的裝載機有一些問題。

Answer 2

嘗試通過設置到Slider組件：

<Slider {...settings} > 

Answer 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;