Compatibility with Next.js in 1.6.6

I’m getting this error when putting a basic demo together:

Error: There is already an encoder stored which handles exactly the same mime types.

A quick search showed that it may be related to Extendable-Media-Recorder(?), which looks like it was just added by @PipesNBottles. I rolled my version back down to 1.6.5 and the error went away.

If there’s any additional detail I can provide to help debug please let me know!

[dvdokkum]

I’ve been trying to debug this further and need to give it a rest for a bit, but I’m going leave what I’ve got so far in case anyone else is having these issues. In short, I think the Extendable-Media-Recorder dep is breaking off the shelf compatibility with Next js.

1. I was able to fix the parent issue with multiple encoders being called. This is happening because create-next-app defaults reactStrictMode to true in next.config.js. Strict mode will call all components twice, which makes Extendable-Media-Recorder throw this error. If you turn off StrictMode this error goes away, but a new error emerges!

2. You’ll start getting Reference Error: Blob is not defined. This is another new issue with 1.6.6 that is not present in 1.6.5. I think the way Next does server side rendering is not playing nice with extendable-media-recorder. In order to get around this, you’ll need to Dynamically Import the component that is using react-media-recorder like so:

const Recorder = dynamic(() => import('./record'))

That gets everything working in dev again, but now the problem I have yet to solve, running in prod!

3. npm run build now crashes on another ReferenceError for Blob:

If anyone has ideas on how to get around this, I’m all ears.

❗ UPDATE: apparently extendable media recorder is not compatible with Node. See: https://github.com/chrisguttandin/extendable-media-recorder/issues/661#issuecomment-1080030957 Does that mean I’ll never get this library to work with Next, or is there some workaround out there still…

❗ ❗ UPDATE 2: turns out I was mistakenly referencing some of the media recorder outside the server side render. Things are working fine now. If you are running into issues in Next steps 1 and 2 should do the trick.

[rsweetland]

To clarify using the readme example, point 2 would look something like this…

// record.jsx
import { useReactMediaRecorder } from "react-media-recorder";

const RecordView = () => {
  const { status, startRecording, stopRecording, mediaBlobUrl } =
    useReactMediaRecorder({ video: true });

  return (
    <div>
      <p>{status}</p>
      <button onClick={startRecording}>Start Recording</button>
      <button onClick={stopRecording}>Stop Recording</button>
      <video src={mediaBlobUrl} controls autoPlay loop />
    </div>
  );
};

// index.jsx (or container or whatever)
const Recorder = dynamic(() => import('./record'))