T
TanStack•2mo ago
dependent-tan

Render a specific component in ssr true page on client side

so basically I have a component in a page which I have rendered on ssr but one of its component is giving error while rendering in ssr the component 
import {
  Alignment,
  Fit,
  Layout,
  useRive,
  useStateMachineInput,
} from "@rive-app/react-canvas";
import { useEffect, useRef } from "react";

interface RiveHoverPlayerProps {
  src: string;
  artboard?: string;
  stateMachines?: string;
}

export default function RiveHoverPlayer2({
  src,
  artboard,
  stateMachines,
}: RiveHoverPlayerProps) {
  const { rive, RiveComponent } = useRive({
    src,
    artboard,
    stateMachines,
    autoplay: false,
    layout: new Layout({
      fit: Fit.Cover,
      alignment: Alignment.Center,
    }),
  });

  const containerRef = useRef<HTMLDivElement>(null);

  useStateMachineInput(rive, "State Machine 1", "hover", true);

  useEffect(() => {
    if (!containerRef.current) return;
    const container = containerRef.current;
    container.addEventListener("mouseenter", () => {
      rive?.play();
    });
    container.addEventListener("mouseleave", () => {
      rive?.pause();
    });
    return () => {
      container?.removeEventListener("mouseenter", () => {
        rive?.play();
      });
      container?.removeEventListener("mouseleave", () => {
        rive?.pause();
      });
    };
  }, [rive]);

  return (
    <div
      ref={containerRef}
      className="w-full h-full rounded-lg overflow-hidden"
    >
      <RiveComponent />
    </div>
  );
}
import {
  Alignment,
  Fit,
  Layout,
  useRive,
  useStateMachineInput,
} from "@rive-app/react-canvas";
import { useEffect, useRef } from "react";

interface RiveHoverPlayerProps {
  src: string;
  artboard?: string;
  stateMachines?: string;
}

export default function RiveHoverPlayer2({
  src,
  artboard,
  stateMachines,
}: RiveHoverPlayerProps) {
  const { rive, RiveComponent } = useRive({
    src,
    artboard,
    stateMachines,
    autoplay: false,
    layout: new Layout({
      fit: Fit.Cover,
      alignment: Alignment.Center,
    }),
  });

  const containerRef = useRef<HTMLDivElement>(null);

  useStateMachineInput(rive, "State Machine 1", "hover", true);

  useEffect(() => {
    if (!containerRef.current) return;
    const container = containerRef.current;
    container.addEventListener("mouseenter", () => {
      rive?.play();
    });
    container.addEventListener("mouseleave", () => {
      rive?.pause();
    });
    return () => {
      container?.removeEventListener("mouseenter", () => {
        rive?.play();
      });
      container?.removeEventListener("mouseleave", () => {
        rive?.pause();
      });
    };
  }, [rive]);

  return (
    <div
      ref={containerRef}
      className="w-full h-full rounded-lg overflow-hidden"
    >
      <RiveComponent />
    </div>
  );
}
so this one is giving me error related to esm or common js compatibility and on using common js the import seems to be coming as an undefined for Fit, Alignment but works fine if i make ssr to false for the whole page
1 Reply
extended-salmon
extended-salmon•2mo ago
Why you dont wrap this component with <ClientOnly> as riv animation would always run on the client anyways

Did you find this page helpful?