Reactでfirebaseを使用する時、APIKeyが合っているのにinvalid-api-keyと出力される原因

React×firebaseを実装しようとしていたが、なぜかエラーが出力される

問題

エラーがこちら

Uncaught t {code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly.", a: null}

問題のソースコード（firebase関連のソースのみ）

index.jsx

// https://github.com/deatiger/ec-app-demo/blob/develop/src/firebase/index.jsx
import firebase from "firebase/app"
import "firebase/auth";
import "firebase/firestore";
import "firebase/functions";
import "firebase/storage";
import {firebaseConfig} from "./firebaseConfig";
firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();
export const db = firebase.firestore();
export const functions = firebase.functions();
export const storage = firebase.storage();
export const fb = firebase;
export const FirebaseFieldValue = firebase.firestore.FieldValue
export const FirebaseTimestamp = firebase.firestore.Timestamp;

firebaseConfig.jsx

/**
 * firebaseの設定ファイル
 * https://www.pluralsight.com/guides/using-firebase-with-react-and-redux
 */
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "xxxxx",
authDomain: "xxxxx.firebaseapp.com",
databaseURL: "https://xxxxx.firebaseio.com/",
projectId: "xxxxx",
storageBucket: "xxxxx.appspot.com",
messagingSenderId: "xxxxx",
appId: "xxxxx",
measurementId: "xxxxx"
};

APIKeyは絶対あっている、だが動かない。

原因と解決方法

firebaseConfigのImport方法が間違っていた。

Import側にて{firebaseConfig}というように読み込む時はimportされる側でexportをつけなければならない。

修正したソース

firebaseConfig.jsx

/**
 * firebaseの設定ファイル
 * https://www.pluralsight.com/guides/using-firebase-with-react-and-redux
 */
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
export const firebaseConfig = {
apiKey: "xxxxx",
authDomain: "xxxxx.firebaseapp.com",
databaseURL: "https://xxxxx.firebaseio.com/",
projectId: "xxxxx",
storageBucket: "xxxxx.appspot.com",
messagingSenderId: "xxxxx",
appId: "xxxxx",
measurementId: "xxxxx"
};

これでfirebaseは読み込むことができました。

終わり