[BUG] Dock component: useTransform

[jercomio]

For Next.js (latest) application, there is a bug because the property mouseX is undefined (line 86, dock.tsx). See the declare function useTransform in index.d.tsfile. input: MotionValue<I> must be an array like the example : const z = useTransform([x, y], ([latestX, latestY]) => latestX * latestY)

So, to resolve this bug, write mouseX = [] instead of mouseX.

const DockIcon = ({
  size,
  magnification = DEFAULT_MAGNIFICATION,
  distance = DEFAULT_DISTANCE,
  mouseX = [],
  className,
  children,
  ...props
}: DockIconProps) => {
  const ref = useRef<HTMLDivElement>(null);

  const distanceCalc = useTransform(mouseX, (val: number) => {
    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };

    return val - bounds.x - bounds.width / 2;
  });

[w2ca]

@jercomio You probably didn't pass "use client" in your page or component. If you pass a fazio array it should probably work, but you will lose the effects of the dock.

[maq796113]

I have fixed the bug

[rafai123]

Thanks all

[itsarghyadas]

Hey this issue is now fixed with this PR #454