`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 {...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;