question-mark

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.

Compatibility with Next.js in 1.6.6

See original GitHub issue

Issue Description

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!

Issue Analytics

  • State:closed
  • Created 8 months ago
  • Reactions:7
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
dvdokkumcommented, Jun 22, 2022

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.

1reaction
rsweetlandcommented, Oct 26, 2022

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'))
Read more comments on GitHub >

github_iconTop Results From Across the Web

Upgrade Guide - Next.js
Next.js provides full backwards compatibility with applications that have custom Babel configuration. All transformations that Next.js handles by default ...
Read more >
Blog - Next.js 12
The new Rust compiler is backwards compatible. If you have an existing Babel configuration, you will automatically be opted out.
Read more >
Supported Browsers and Features - Next.js
Supported Browsers and Features. Next.js supports modern browsers with zero configuration. Chrome 64+; Edge 79+; Firefox 67+; Opera 51+; Safari 12+ ...
Read more >
Blog - Next.js 13
Next.js 13 introduces layouts, React Server Components, and streaming in the app directory, as well as Turbopack, an improved image ...
Read more >
Using the Node.js Driver - Snowflake Documentation
Version 1.6.6 to download files (using the GET command) ... The Snowflake Node.js Driver lets you establish connections in the following ways:.
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found