「import firebase from 'firebase/app'」が出来ない問題の解決

Vueでfirebaseを使ったアプリを作るためにnpm install firebaseを実行した後、以下のようにimportすると、

import firebase from 'firebase/app'
const firebaseConfig = { 
  // config
}
firebase.initializeApp(firebaseConfig);

コンパイル時に「firebaseが見つからない」というエラーが出ました。

 WARNING  Compiled with 1 warning

 warning  in ./src/firebase.js
"export 'default' (imported as 'firebase') was not found in　'firebase/app'

どうやら現在npmでインストールされる最新版のfirebaseパッケージがv9になったようで、インポート方法が少し変わったようです。firebaseのドキュメントではv9がベータ版と表記されていますが、普通にv9がインストールされます(2021年9月1日現在)。

大きな変更としましては最初にfirebaseオブジェクトをインポートしておいてから中の関数を使用するのではなく、名前つきインポートを使用することが必要になりました。

// NG
import firebase from 'firebase/app';
firebase.initializeApp(firebaseConfig);
// OK
import { initializeApp } from 'firebase/app';
initializeApp(firebaseConfig);

元々v8を使用したアプリがある場合は橋渡しとしてcompatを挟んで互換性を保つことが出来るようです。

import firebase from 'firebase/compat/app';

詳細はこちらを参考にして下さい。
https://firebase.google.com/docs/web/modular-upgrade