ReactJS uncaught reference error worker is not defined

I'm having some issues:

Uncaught reference error worker is not defined

I'm implementing one code to record audio, this's my code:

//file records.tsx

import { ReactMediaRecorder } from "react-media-recorder";
import React  from "react";

export default function RecordView(){
    return(
        <div> 
            <ReactMediaRecorder
                audio
                render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
                    <div>
                    <p>{status}</p>
                    <button onClick={startRecording}>Start Recording</button>
                    <button onClick={stopRecording}>Stop Recording</button>
                    <video src={mediaBlobUrl} controls autoPlay loop />
                    </div>
                )}
            /> 
      </div>
    )
};

so, I'm getting this issue:

Why I'm having this error???

I wasn't able to reproduce the error, but my guess would be that it's related to HTTPS, seeing how mediaDevices are only availible in HTTPS.

This error is also mentioned in a Github issue, with no response, and the project hasn't been updated since May 2022.

Try setting up your dev server to use HTTPS. If you're using Vite, you can use the server.https option with vite-plugin-basic-ssl. There's probably a way to do this for webpack/CRA too.

Here is my solution for hooks related to useReactMediaRecorder or class-based too:

Assume we have a custom component called CustomMediaRecorder that uses useReactMediaRecorder. We want to use this component in the current component.

 const CustomMediaRecorder = dynamic(
  () => import('..../CustomMediaRecorder'),
  {
    ssr: false,
  }
);

NB. CustomMediaRecorder can be a class-based or functional component. Import it into your current component like the code snippet above shows.