Search code examples
javascriptreactjscarouselreact-multi-carousel

Simple React-multi-carousel example fails

I'm trying to run a basic usage of react-multi-carousel:

import React from 'react';
import {Carousel} from 'react-multi-carousel';


export function MyComponent(props) {
  // ...

  return (
    <Carousel>
      <div>Item 1</div>
      <div>Item 2</div>
    </Carousel>
  );
};

But I'm getting Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of 'MyComponent'.

I've installed react-multi-carousel with npm i react-multi-carousel. What am I doing wrong? Any help is greatly appreciated.

Solution

  • You need to use default import as the error suggests import Carousel from "react-multi-carousel".