justin-chu / react-fast-marquee

A lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.
https://react-fast-marquee.com
MIT License
1.24k stars 101 forks source link

Remix js error #116

Open ArnabChatterjee20k opened 1 month ago

ArnabChatterjee20k commented 1 month ago

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 commented 1 month ago

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.

natmfat commented 1 month ago

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 commented 1 month ago

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