4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

VueでFirebaseを使うと "export 'firestore' (imported as 'firebase') was not found in 'firebase/app' 解決法

Last updated at Posted at 2020-12-31

#VueプロジェクトでFirebaseが見つからないと言われた
こちらのサイトを参考にVue + Firebaseのアプリケーションを作成した時、思わぬところで詰まった。。。:sweat:

そう、タイトル通りfirebaseが見つからないと言われるのだ。。。

firebaseをインストール

npm i firebase

firebase.jsを作成

src/firebase.js
import * as firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'

// firebase init - add your own config here
const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: ''
}
firebase.initializeApp(firebaseConfig)

// utils
const db = firebase.firestore()
const auth = firebase.auth()

// collection references
const usersCollection = db.collection('users')
const postsCollection = db.collection('posts')
const commentsCollection = db.collection('comments')
const likesCollection = db.collection('likes')

// export utils/refs
export {
  db,
  auth,
  usersCollection,
  postsCollection,
  commentsCollection,
  likesCollection
}

firebase.jsでexportしたものをmain.jsでimport

src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { auth } from './firebase'

Vue.config.productionTip = false

let app
auth.onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
  }
})

これでnpm run serveしたら、、、

 warning  in ./src/firebase.js

"export 'auth' (imported as 'firebase') was not found in 'firebase/app'

 warning  in ./src/firebase.js

"export 'firestore' (imported as 'firebase') was not found in 'firebase/app'

 warning  in ./src/firebase.js

"export 'initializeApp' (imported as 'firebase') was not found in 'firebase/app'

なんでやねーーーん!!!

#Firebaseのバージョンアップによる変化でした
こちらを確認するとわかるように、Firebaseのバージョンが8.0.0以上で、大きな変化があったようです。。

まずpackage.jsonでインストールしたfirebaseのバージョンを確認しましょう。

package.json
 "firebase": "^8.2.1",

ふむ。確かに8以上だ。

と言う訳で、

// Before 8.0.0
import * as firebase from 'firebase/app'

// After 8.0.0
import firebase from 'firebase/app'

firebase.js上記のように編集

src/firebase.js
import firebase from 'firebase/app'

これで解決しました:smile:

#参考
https://stackoverflow.com/questions/64545862/upgrade-to-firebase-js-8-0-0-attempted-import-error-app-is-not-exported-from

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?