如何修复NextJs中的“ ReferenceError：未定义Blob”？

Question

嗨，我试图在下一个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)

我该如何解决？

Answer 1

使用这个

它对我有用 const QrScan = dynamic(() => import('react-qr-reader'),{ ssr: false })

Answer 2

official docs说，服务器端呈现对react-qr-reader不起作用。因此，您需要做的是避免在服务器端应用react-qr-reader。您可以使用dynamic解决问题。您也可以从此solution的解决方案2中引用，以获得一些示例代码。