Visualization is not working while recording on NextJS

[onurgenes]

Visualization is not working while recording on NextJS. I have tried with the example from this repo 👉🏻 https://github.com/YZarytskyi/react-audio-visualization

To Reproduce Steps to reproduce the behavior:

1. Created a new nextjs app from cli.
2. Added new component as following:

"use client";

import { Button } from "@/components/ui/button";
import React, { useEffect } from "react";
import { useVoiceVisualizer, VoiceVisualizer } from "react-voice-visualizer";

export default function VoiceRecorder() {
  const recorderControls = useVoiceVisualizer();
  const { saveAudioFile, recordedBlob, error } = recorderControls;

  // Get the recorded audio blob
  useEffect(() => {
    if (!recordedBlob) return;

    console.log(recordedBlob);
  }, [recordedBlob, error]);

  // Get the error when it occurs
  useEffect(() => {
    if (!error) return;

    console.error(error);
  }, [error]);

  return (
    <>
      <VoiceVisualizer
        controls={recorderControls}
        mainBarColor="#FFFFFF"
        secondaryBarColor="#5e5e5e"
        width={"100%"}
        height={200}
        speed={3}
        barWidth={2}
        gap={1}
        rounded={5}
        isControlPanelShown={true}
        isDownloadAudioButtonShown={true}
        fullscreen={false}
        onlyRecording={false}
        animateCurrentPick={true}
        isDefaultUIShown={true}
        isProgressIndicatorShown={true}
        isProgressIndicatorTimeShown={true}
        isProgressIndicatorOnHoverShown={true}
        isProgressIndicatorTimeOnHoverShown={true}
      />
      <Button onClick={saveAudioFile}>Save Audio</Button>
    </>
  );
}

3. Import the component as dynamic for avoiding SSR issues:

"use client";

import dynamic from "next/dynamic";

const DynamicVoiceVisualizer = dynamic(
  () => import("@/components/voice-recorder"),
  {
    ssr: false,
  }
);

export default function Page() {
  return <DynamicVoiceVisualizer />;
}

4. Start recording and visualization not working.
5. Playback works as expected.

Expected behavior It should be working as given demo of the library.

[rabinosona]

Same problem here... That's the error that I get:

ReferenceError: window is not defined
    at It (.../node_modules/react-voice-visualizer/dist/react-voice-visualizer.js:351:106)

Most likely, this component relies on browser-specific context, so it won't work with SSR frameworks like Remix or Nest.Js. I have tried to wrap this component into something like this:

  const ClientOnly = ({ children }: { children: React.ReactNode }) => {
    const [isMounted, setIsMounted] = useState(false);

    useEffect(() => {
      setIsMounted(true);
    }, []);

    return isMounted ? children : null;
  };

But still, it doesn't seem to be functioning properly, although it renders, which is kind of a win.

UPD: I found a way to make it work!

  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

// in your render...
            {isMounted && (
              <VoiceVisualizer
                controls={recorderControls}
              />
            )}

That will ensure that your window context is accessible.