Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

[kzhisx2z]

React Multi Carousel Component Import Error

Issue Description

I'm experiencing an error in my React TypeScript application when trying to use the Carousel component from the react-multi-carousel library. When rendering the component, I get the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Project Context

• React application with TypeScript
• Using react-multi-carousel for a carousel component
• Server-side rendering enabled (using ssr={true} prop)

Code Example

Here's how I'm importing and using the component:

import { default as Carousel } from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

// Configuration for responsive breakpoints
const responsive = {
  superLargeDesktop: {
    breakpoint: { max: 4000, min: 3000 },
    items: 5,
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3,
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
  },
};

// Usage in component
<Carousel
  swipeable={false}
  draggable={false}
  showDots={true}
  responsive={responsive}
  ssr={true}
  infinite={true}
  autoPlaySpeed={1000}
  keyBoardControl={true}
  customTransition="all .5"
  transitionDuration={500}
  containerClass="carousel-container"
  removeArrowOnDeviceType={['tablet', 'mobile']}
  dotListClass="custom-dot-list-style"
  itemClass="carousel-item-padding-40-px"
>
  {trendingResources.map((resource) => (
    <ResourceCard key={resource.id} resource={resource} isLarge />
  ))}
</Carousel>

What I've Tried

I've attempted different import methods:

• import Carousel from 'react-multi-carousel'
• import { Carousel } from 'react-multi-carousel'
• import { default as Carousel } from 'react-multi-carousel'
• const Carousel = require('react-multi-carousel').default

I've also verified that:

• The library is properly installed in my project
• My TypeScript configuration includes "esModuleInterop": true and "allowSyntheticDefaultImports": true
• I've imported the required CSS file: import 'react-multi-carousel/lib/styles.css'

Environment Information

• React version: 19.1.0
• TypeScript version: 5.8.3
• react-multi-carousel version: 2.8.6

Additional Context

This component is being used in a server-side rendered application. The error occurs during the initial render.

Any help or suggestions would be greatly appreciated!

[wenzf]

Same with me using react-router in framework mode

The only way I can make it work is to force render the compoent client side

import { lazy, Suspense } from "react"
const Carousel = lazy(() => import('react-multi-carousel')) 

retrun (
 <Suspense fallback={null}>
   <Carousel>
      {...}
   </Carouse>
  </Suspense>
)