为React App配置Firebase - 未定义的配置

我正在努力弄清楚我为React App配置Firebase的尝试出了什么问题 . 我已经遵循了至少10个不同的教程，无法将配置变量注册为已识别 .

我正在使用web pack，所以我的webpack.config.json有如下插件：

plugins: [
      CSSExtract,
      new webpack.DefinePlugin({
        'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
        'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
        'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
        'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
        'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
        'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
      })
    ],

然后，我有一个.env.development文件如下：

FIREBASE_API_KEY="1"
FIREBASE_AUTH_DOMAIN="2.firebaseapp.com"
FIREBASE_DATABASE_URL="https://3.firebaseio.com"
FIREBASE_PROJECT_ID="4"
FIREBASE_STORAGE_BUCKET="5.appspot.com"
FIREBASE_MESSAGING_SENDER_ID="6"

然后，我有一个firebase / firebase.js文件，如下所示：

import * as firebase from 'firebase';
// import firebase from 'firebase/app';
// import 'firebase/auth';
// import database from 'firebase/database';
// import { firebase } from '@firebase/app';
// import '@firebase/auth';
// import * as firebaseui from 'firebaseui';
// import { settings } from './config';

// Initalize and export Firebase.
const prodConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL:process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};

const devConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL:process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};

const config = process.env.NODE_ENV === 'production'
  ? prodConfig
  : devConfig
  console.log(config);




if (!firebase.apps.length) {
  firebase.initializeApp(config);
  console.log(config);
};

const database = firebase.database();

const auth = firebase.auth();

export {firebase, auth, database  };

我一直试图弄清楚为什么配置变量记录为未定义 .

有没有人想出如何成功配置firebase应用程序 . 我之前关于这个主题的问题建议删除：和env.development文件中的值之间的空格 - 但这并没有对这个问题产生任何影响 . 没有任何变量按照控制台日志中的定义进行注册 .

当我尝试在开发中启动它时，我收到一条错误消息：

Error: FIREBASE FATAL ERROR: Can't determine Firebase Database URL.  Be sure to include databaseURL option when calling firebase.initializeApp().

我的所有变量都记录为未定义：

{apiKey：undefined，authDomain：undefined，databaseURL：undefined，projectId：undefined，storageBucket：undefined，...}