Fix Vite React error #130: react-multi-carousel

TL;DR#

If a Vite production build reports React error #130 while rendering react-multi-carousel, inspect the imported value. In the reproduced case, the import was an object, and its default property was the component function. Select that component before rendering: const Carousel = CarouselImport.default ?? CarouselImport. Keep the package version, data and hosting configuration unchanged while checking this one difference.

The original report describes a Vite and Tailwind application that worked locally but failed after deployment to Firebase Hosting. Its author reported success after unwrapping the carousel's default property. The production diagnostic identifies an invalid element type; it does not, by itself, identify a hosting failure:

Minified React error #130

React's decoder expands this to an invalid component type. Read the error's argument too: the source case received an object where the carousel component should have been.

Why it happens#

JSX passes the value behind a component name to React. The createElement reference explains that this must be a valid component type, such as a function, a class or a special React component. An arbitrary module export object is not the carousel class it contains. Importing a package successfully therefore does not establish that the particular imported value can be rendered.

The published react-multi-carousel package has a CommonJS entry file. Its installed index forwards the result of requiring the library directory. That directory's entry assigns the carousel component to exports.default. In the reproduced production output, the bundler's interop wrapper preserved that export object as the application's imported default. The component was consequently one property further inside it.

That explanation comes from inspecting the installed package and generated bundle, rather than inferring a mechanism from the error alone. It also explains why renaming the JSX variable cannot help: the value remains the same object unless the code selects the actual component.

Development success is useful evidence but does not settle production behaviour. Vite's dependency pre-bundling documentation explicitly limits that process to development. Test the output produced by the build before changing deployment settings. This article verifies the production import; it does not claim a browser test of the source author's development environment.

If the failing dependency is a linked local package and the browser instead reports that it does not provide an export named, follow that separate diagnosis. It concerns the treatment of linked CommonJS packages during development, rather than this carousel wrapper in a production bundle.

Fix#

1. Record the package and the value being rendered#

Keep the existing dependency resolution while investigating. From the application directory, record the versions actually installed:

npm ls vite react react-dom react-multi-carousel

At the carousel import site, temporarily inspect its shape before rendering it:

import CarouselImport from 'react-multi-carousel';
 
console.log('Carousel shape:', typeof CarouselImport,
  'default:', typeof CarouselImport?.default);

Build and inspect the failing route using the production preview. In the isolated reproduction, this printed:

Carousel shape: object default: function

This is the branch the repair addresses. If your result is different, identify which JSX component actually receives the invalid value. A child icon can fail independently of the outer carousel. Do not unwrap every import merely because the error mentions an object: React's own special component types can also be objects.

2. Select the component from the observed wrapper#

For the recorded object-with-default-function shape, select the inner component and render that value. A complete small component looks like this:

import React from 'react';
import CarouselImport from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
 
const Carousel = CarouselImport.default ?? CarouselImport;
 
const responsive = {
  desktop: {
    breakpoint: { max: 4000, min: 0 },
    items: 1,
  },
};
 
export default function CarouselExample() {
  return (
    <Carousel responsive={responsive}>
      <div>First slide</div>
      <div>Second slide</div>
    </Carousel>
  );
}

The fallback preserves a directly imported component when that is what the package resolution already provides. It does not manufacture a component when an unrelated import is wrong. Confirm the inspected shape first and keep this adaptation at the package boundary, where future maintainers can see why it exists.

Retain your real carousel options and slides. The essential change is which value occupies the component position; replacing the data, removing Tailwind, changing the host and upgrading packages simultaneously would obscure that test.

3. Rebuild the application before deploying it#

Run the project's build command again:

npm run build

Then serve that output with Vite's preview command:

npx vite preview

The static deployment guide documents that preview serves the built output. Open the route that renders the carousel and read its console. This checks the artefact you intend to upload, instead of returning to the development server and assuming its success also verifies production. Preview is a local verification server; Vite does not present it as a production server.

Verify the fix#

An isolated reproduction on 3 November 2026 used the official Node 24-slim image, Node 24.22.2, Vite 8.3.5, React and React DOM 19.2.0, and react-multi-carousel 2.8.6. It built a standard client entry and executed that generated JavaScript under Node with ReactDOMServer to exercise the component type. This was a client-bundle rendering test, not an interactive browser or Firebase test.

Before the change, the import had the object/function shape shown above and rendering produced the minified invalid-element error. After changing only the rendered value to the inner default when present, rebuilding and executing the same entry produced:

direct import renders carousel: true

The check searched the rendered output for the supplied slide content. Dependency versions, responsive settings and the build configuration stayed fixed. Output minification was disabled throughout, yet production React still printed its compact error before the fix. Disabling Vite's output minifier therefore did not repair this reproduced import shape.

For your application, check more than the absence of an exception. Confirm the expected slides appear, navigate the affected route again, and exercise the carousel controls in a browser. Those interaction checks are work for your actual application; the isolated rendering result above does not claim to establish them.

Distinguish an export wrapper from the next carousel failure#

The source question includes Tailwind and Firebase, but those names do not establish the cause. The isolated production bundle failed before any upload, with no hosting configuration involved. If the same invalid component error occurs in your local production preview, repair that value before investigating remote caches or network headers.

Similarly named carousel packages need different checks. Owl Carousel failing after a Vite build depends on jQuery's global being available before its plugin executes. This article concerns react-multi-carousel's component export; adding a global jQuery assignment cannot select its missing component value.

If the component now renders but a linked library produces an Invalid hook call, inspect React module identity using that page's consumer-side diagnosis. An export wrapper and two React copies are separate mechanisms, so a successful unwrap does not prove that every other library boundary is correct.

Keep the verification narrow: identify the exact invalid value, show the component within it, change that selection once, and rebuild the same application. That gives the production failure a demonstrated cause while preserving the rest of the deployment.