Remix js error

[ArnabChatterjee20k]

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

<Marquee pauseOnHover gradient={false} speed={80} className="py-10 w-full">
      {colorPalettes.map(({ name, colors }, index) => {
        const rotate = list[Math.floor(Math.random() * list.length)];
        return (
          <div key={index} className={`mx-10 relative ${rotate}`}>
            <Palette paletteTitle={name} colors={colors} />
            <Arrow className="w-20 h-20 absolute top-1/2 -right-20" />
          </div>
        );
      })}
    </Marquee>

[studiohic]

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

[npham-dev]

Haven't looked into this too deeply but I think this might be a client-only component: This works just fine:

import { ClientOnly } from "remix-utils/client-only";

// in component
 <ClientOnly>
  {() => (
    <Marquee pauseOnHover>
        {apps.map((app) => (
          <Pill key={app.name} {...app} />
        ))}
    </Marquee>
  )}
</ClientOnly>

[studiohic]

In your astro file use <Marquee client:only="react" />