dotenvでのNuxt.js + firebaseでの秘匿情報の管理について

Question

使用技術情報

• Nuxt: 2.8.1
• @nuxtjs/dotenv: 1.4.1
• typescript 3.7.4

現状の事象

• ログイン処理時にAPI key not valid. Please pass a valid API keyエラーとなる
• イメージ

現状の実装

• @nuxtjs/dotenvを使用
• プロジェクト直下に.envファイルを作成しapiKeyなどの情報を管理
• pluginsにてfirebaseの情報をprocess.env~で読み込んでいる
• 上記イメージにも出力しているが、以下のfirebase.tsのようにconsole.logで.envの情報を出力してみたところコンソール出力できることは確認済み。
• 参考にした記事
  • [Nuxt.js] Firebaseの設定で環境変数dotenvを扱う

.envファイル

API_KEY = 'HOGEHOGE',
AUTH_DOMAIN = '●●●●●●●●●',
DATABASE_URL = '●●●●●●●●●',
PROJECT_ID = '●●●●●●●●●',
STORAGE_BUCKET = '●●●●●●●●●',
MESSAGING_SENDER_ID = '●●●●●●●●●●',
APP_ID = '●●●●●●●●●●●●●●●●●●',
MEASUREMENT_ID = '●●●●●●●●●●●●●●●●●●'

plugins/firebase.ts

import * as firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
// eslint-disable-next-line
let fireApp
if (!firebase.apps.length) {
  console.log('process.env.API_KEY')
  console.log(process.env.API_KEY)
  fireApp = firebase.initializeApp({
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    databaseURL: process.env.DATABASE_URL,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
    appId: process.env.APP_ID,
    measurementId: process.env.MEASUREMENT_ID
  })
} else {
  fireApp = firebase.app()
}

export default fireApp

直打ちの場合は正常にログイン処理が通る。

• ご指摘いただけると嬉しいです。

Answer 1

''と,が不要でした。。。お騒がせしました。

API_KEY = HOGEHOGE
AUTH_DOMAIN = ●●●●●●●●●
DATABASE_URL = ●●●●●●●●●
// 省略