How to fix "ReferenceError: Blob is not defined" in NextJs?

Question

Hi I was trying to use react-qr-reader in next js but having the problem

Server Error
ReferenceError: Blob is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
external%20%22react-qr-reader%22 (1:0) @ Object.react-qr-reader

> 1 | module.exports = require("react-qr-reader");
Call Stack
__webpack_require__
webpack\bootstrap (21:0)

How can I fix it?

Answer 1

This works for me:

const QrScan = dynamic(() => import('react-qr-reader'), { ssr: false })

Answer 2

The official docs says Server side rendering won't work for react-qr-reader. So you need to do is to avoid applying react-qr-reader in server-side. You can use the dynamic to solve the problem. You can also reference from the solution 2 of this solution to get some example code.

Answer 3

Great work guys, this works for me

import { useState } from "react";
import dynamic from "next/dynamic";
const QrReader = dynamic(() => import("react-qr-reader"), { ssr: false });


export default function ScanPage() {
const [state, setState] = useState("");

return (
<>
<div>{state}</div>
<QrReader delay={100}
onError={(err) => setState(err)}
onScan={(data) => setState(data)}
style={{ width: "95vw"}}
/>
</>
);}

Answer 4

I was having same issue on voice-recorder-react library. So after some work-arounds I was be able to solve it.

I just fixed by making the page csr (Client-Side-Rendering) like this:

const HomePage = dynamic(() => import("./home"), { ssr: false });

And then I used the library as normal way of importing (in my home page).

import { useRecorder } from "voice-recorder-react";

So basically some of libraries need to be rendered on client-side.