0

I have an Astro project with some React components, and I am trying to use react-media-recorder.

My code is pretty simple, a React component put into an Astro page:

import { useReactMediaRecorder } from "react-media-recorder";

function RecordButton() {
    const { status, startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({
        video: false,
        audio: true,
        onStop: () => {
            console.log("stopped recording");
            generateTranscript(mediaBlobUrl);
        }
    });
    // ...

As soon as I put this useReactMediaRecorder hook in my code, I get a ReferenceError Blob is not defined. This is browser-facing though, so I don't think I should have to install Blob in this file? But maybe I'm wrong. How can I fix it?

Cassidy
  • 3,328
  • 5
  • 39
  • 76

1 Answers1

0

I fixed it by setting the component in Astro to client:only and ensuring that my Node was 18+!

Cassidy
  • 3,328
  • 5
  • 39
  • 76