React application has "Element type is invalid" error on production, but is working on development

Question

In my React application, I got the following error using react-multi-carousel. However, it is only happening on Google Firebase hosting. It is working fine locally.

My project is created with Vite and Tailwind CSS.

The error:

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

which translates to:

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

home.jsx

    import React, { useState, useEffect } from "react";
    import { useQuery } from "@apollo/client";
    import GitaCarousel from "../../components/gita_carousel";
    import { getHome, getHomeVariable } from "../../gql/home";

    const HomePage = () => {
      const [artists, setArtists] = useState();

      const { loading, error, data } = useQuery(getHome, {
        variables: getHomeVariable(10),
      });

      useEffect(() => {
        if (!loading && !error) {
           const a1 = data?.artists.map((artist) => ({
            id: artist.id,
            title: artist.name,
            subTitle: "",
            imageUrl: artist.profile_picture,
          }));
          setArtists(a1);
         }
      }, [loading, error]);

      return (
    <div>
      {artists && artists.length > 0 ? (
        <div className="flex flex-col my-5 items-center">
          <div className="flex-1 px-2 mx-2">
            {/* <div className="text-lg font-bold">{constants.latest_monks}</div> */}
          </div>
          <div>
            <GitaCarousel data={artists} />
          </div>
        </div>
      ) : (
        <div></div>
      )}
    </div>
     );
    };

    export default HomePage;

gita_carousel.jsx

    import React from "react";
    import Carousel from "react-multi-carousel";
    import "react-multi-carousel/lib/styles.css";
    import { PlayIcon } from "../assets/icons/svg_icons";

    const responsive = {
      superLargeDesktop: {
        // the naming can be any, depends on you.
        breakpoint: { max: 4000, min: 3000 },
        items: 5,
      },
      desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 5,
      },
      tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 2,
      },
      mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1,
      },
    };

    const GitaCarousel = (props) => {
      const { data } = props;

      return (
    <div className="container mx-auto px-4 md:px-12">
      <div className="flex flex-wrap -mx-1 lg:-mx-4">
        <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"]}
          deviceType="desktop"
        >
          {data.map((slide, index) => {
            return (
              <div
                key={index}
                className="group my-1 px-1 w-full cursor-pointer"
                onClick={() => {
                  onClickHandler(slide.id);
                }}
              >
                <article className="overflow-hidden rounded-lg shadow-lg">
                  <div className="relative cursor-pointer">
                    <img
                      alt="Placeholder"
                      className="block object-cover h-48 w-96"
                      src={slide.imageUrl}
                    />
                    <button className="absolute top-1/2 right-1/2 -mr-3 -mt-3 rounded-lg opacity-0 group-hover:opacity-100">
                      <PlayIcon className="text-primary" />
                    </button>
                  </div>

                  <header className="items-center justify-between leading-tight p-2 md:p-4">
                    <h1 className="text-sm">{slide.title}</h1>
                    <h2 className="text-xs text-gray-400">{slide.subTitle}</h2>
                  </header>
                  
                  
                </article>
              </div>
            );
          })}
        </Carousel>
        </div>
        </div>
      );
    };

    export default GitaCarousel;

Answer 1

OK, I fixed the issue. It is happening because of the export default or export typical issue, but I have no idea how the plugin is exporting.

Below is the fix and it worked for me.

import Carousel from "react-multi-carousel";

const RMCarousel = Carousel.default? Carousel.default: Carousel;
<RMCarousel></RMCarousel>