am getting undefinde error first time when i refresh the page

[umairmanzoor1143]

import { useEffect, useMemo, useState } from "react";
import WFPlayer from "wfplayer";
import useTranscriptionRef from "./useTranscriptionRef";
interface Props extends Partial<WFPlayer> {
  url: string;
}
const useWFPlayer = (
  containerRef: React.RefObject<HTMLDivElement>,
  options: Props
): WFPlayer | null => {
  const [wavesurfer, setWavesurfer] = useState<WFPlayer | null>(null);
  const { waveSurferRef } = useTranscriptionRef();
  const wfPlayerProps = useMemo(() => {
    return options;
  }, [options]);
  useEffect(() => {
    if (!containerRef.current || !options?.url) return;
    console.log(WFPlayer);
    const wf = new WFPlayer({
      ...wfPlayerProps.config,
      container: containerRef.current,
    });
    if (!!wf) {
      wf.load(wfPlayerProps?.url);
      waveSurferRef.current = wf;
      setWavesurfer(wf);
    }
    wf?.on("grabbing", (currentTime: any) => {
      wf?.seek(currentTime);
    });
    return () => {
      if (wf) wf?.destroy();
    };
  }, [wfPlayerProps?.url, containerRef?.current]);

  return wavesurfer;
};
export default useWFPlayer;

[zhw2590582]

It seems to be your syntax problem

[hyemingwaylikesdev]

Did you resolve your problem? I've been facing the same problem.