如何在NextJs中修复"ReferenceError: Blob is not defined"？

Question

嗨，我试图在next 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__
webpackbootstrap (21:0)

我该怎么修？

Answer 1

这对我有效：

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

Answer 2

官方文档表示服务器端渲染对react-qr-reader不起作用。所以您需要做的是避免在服务器端应用react-qr-reader。您可以使用动态来解决问题。您也可以参考该解决方案的解决方案2来获得一些示例代码。

Answer 3

干得好，这对我来说很好

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

我在voice-recorder-react库上遇到了同样的问题。因此，经过一些变通，我能够解决它

我刚刚修复了页面csr(客户端渲染(像这样：

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

然后我使用图书馆作为正常的导入方式(在我的主页上(。

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

因此，基本上有些库需要在客户端上呈现。