Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Console error Uncaught (in promise) Error: There is already an encoder stored which handles exactly the same mime types. at Worker.<anonymous> (module.ts:49:1)

See original GitHub issue

Hi, Thank you for making this package! It gives this error when using the basic wrapper code:

import './App.css';
import { ReactMediaRecorder } from 'react-media-recorder'
function App() {
 return (
       render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
          <button onClick={startRecording}>Start Recording</button>
          <button onClick={stopRecording}>Stop Recording</button>
          <video src={mediaBlobUrl} controls autoPlay loop />
 export default App;

My environment is:

  • Macos Monterey,
  • Chrome 103,
  • the project was created using npx create-react-app,
  • the package was installed with npm
  • dependencies from Package.json:
"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-media-recorder": "^1.6.6",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"`

As you can see in the above code, I’m not setting any of the options available, especially the mimetype.

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:17
  • Comments:18 (1 by maintainers)

github_iconTop GitHub Comments

treyholtcommented, Nov 16, 2022

The encoder error went away for me on NextJS by downgrading to 1.6.5 npm i react-media-recorder@1.6.5

drummerjolevcommented, Sep 28, 2022

Having the same issue as I’m re-using the hook multiple times on the same page. I don’t want to drop strict mode and it doesn’t solve the issue anyway for CRA, as @jessejamesrich pointed out.

I tried switching blobPropertyBag to {type: 'audio/mp3'} (from the default {type: 'audio/wav'}), though that had the same error. @0x006F would you be open to make the logic running in the useEffect optional? See

Related issue

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Extendable-Media-Recorder Unhandled Rejection (Error)
I just stumbled upon this today. There was a bug in the code which is hopefully fixed in v6.1.56.
Read more >
MediaRecorder.mimeType - Web APIs - MDN Web Docs
The mimeType read-only property returns the MIME media type that was specified when creating the MediaRecorder object, or, ...
Read more >
TypeScript errors and how to fix them
error TS2307: Cannot find module 'events' or its corresponding type declarations. Broken Code ❌. You are importing from a core Node.js module (e.g....
Read more >
mimetypes — Map filenames to MIME types — Python 3.11.1 ...
Source code: Lib/ The mimetypes module converts between a filename or URL and the MIME type associated with the filename extension.
Read more >
mod_mime_magic - Apache HTTP Server Version 2.4
Apache Module mod_mime_magic ; Determines the MIME type of a file by looking at a few bytes of its contents · Extension ·...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found