如何修复 NextJs 中的“ReferenceError: Blob is not defined”？答案

【问题标题】：How to fix "ReferenceError: Blob is not defined" in NextJs?如何修复 NextJs 中的“ReferenceError: Blob is not defined”？
【发布时间】：2021-02-05 17:53:38
【问题描述】：

您好，我尝试在下一个 js 中使用 react-qr-reader，但遇到了问题

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)

我该如何解决？

【问题讨论】：

标签： node.js webpack next.js qr-code

【解决方案1】：

这对我有用：

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

【讨论】：

【解决方案2】：

伟大的工作家伙，这对我有用

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

【讨论】：

【解决方案3】：

official docs 表示 服务器端渲染无法为react-qr-reader 工作。所以你需要做的是避免在服务器端应用react-qr-reader。您可以使用dynamic 来解决问题。您也可以参考solution 的解决方案 2 来获取一些示例代码。

【讨论】：