react-qr-readerをNext.jsで動かす方法

そのままでは起動しない

react-qr-readerをNext.jsで動かそうとすると、次のエラーメッセージが表示されます。

ReferenceError: Blob is not defined

本記事では、このエラーを回避する方法を紹介します。

前提

{
  "dependencies": {
    "next": "11.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-qr-reader": "^2.2.1"
  },
  "devDependencies": {
    "@types/node": "^16.7.1",
    "@types/react": "^17.0.19",
    "@types/react-qr-reader": "^2.1.4",
    "typescript": "^4.3.5"
  },
}

react-qr-readerを動的にインポートする

Nextのdynamicを用いて動的インポートすることで解決できます。

import QrReader from 'react-qr-reader'

　　　↓　書き換え

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

参考文献