CODEWITHSUNDEEP
node.jswebpacknext.jsqr-code
Robbi
Robbi

Reputation: 251

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

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?

Upvotes: 0

Views: 8611

Answers (4)

Furkan Koseoglu
Furkan Koseoglu

Reputation: 129

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.

Upvotes: 0

HARSH RAJPUT
HARSH RAJPUT

Reputation: 31

This works for me:

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

Upvotes: 3

Abdallah Mobarak
Abdallah Mobarak

Reputation: 11

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"}}
/>
</>
);}

Upvotes: 1

bcjohn
bcjohn

Reputation: 2523

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.

Upvotes: 1

Related Questions