Gatsbyのbuild時にWebpackError: ReferenceError: IDBIndex is not definedが発生した場合

2020/10/04

WebpackError: ReferenceError: IDBIndex is not defined

firebaseをGatsbyに導入し、buildしたときに下記エラーが発生しました。

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html


  85 | ]);
  86 | 
> 87 | proxyRequestMethods(Index, '_index', IDBIndex, [
     | ^
  88 |   'get',
  89 |   'getKey',
  90 |   'getAll',


  WebpackError: ReferenceError: IDBIndex is not defined
  
  - idb.mjs:87 
    node_modules/idb/lib/idb.mjs:87:1
  
  - index.esm.js:1 
    node_modules/@firebase/installations/dist/index.esm.js:1:1
  
  - index.esm.js:1 
    node_modules/@firebase/analytics/dist/index.esm.js:1:1
  
  - index.esm.js:1 
    node_modules/firebase/analytics/dist/index.esm.js:1:1
  
  - gatsby-ssr.js:1 
    gatsby-ssr.js:1:1

原因は下記のようにfirebaseをimportで参照していたからです。

import firebase from 'firebase/app'
import 'firebase/analytics'

if (typeof window !== 'undefined') {
  firebase.initializeApp({
    apiKey: process.env.GATSBY_FIREBASE_API_KEY,
    authDomain: process.env.GATSBY_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.GATSBY_FIREBASE_DATABASE_URL,
    projectId: process.env.GATSBY_FIREBASE_PROJECT_ID,
    storageBucket: process.env.GATSBY_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.GATSBY_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.GATSBY_FIREBASE_APP_ID,
    measurementId: process.env.GATSBY_FIREBASE_MEASUREMENT_ID,
  })
  firebase.analytics()
}

importで参照するのではなく、requrieで取り込むようにすることで、エラーが解決されます。

if (typeof window !== 'undefined') {
  const firebase = require('firebase/app')
  require('firebase/analytics')
  firebase.initializeApp({
    apiKey: process.env.GATSBY_FIREBASE_API_KEY,
    authDomain: process.env.GATSBY_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.GATSBY_FIREBASE_DATABASE_URL,
    projectId: process.env.GATSBY_FIREBASE_PROJECT_ID,
    storageBucket: process.env.GATSBY_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.GATSBY_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.GATSBY_FIREBASE_APP_ID,
    measurementId: process.env.GATSBY_FIREBASE_MEASUREMENT_ID,
  })
  firebase.analytics()
}