CODEWITHSUNDEEP
firebasevue.jsgoogle-cloud-firestore
Tyler Morales
Tyler Morales

Reputation: 1830

Unable to Initialize firebase in Vue web app

I am trying to use a Cloud Firestore database collection in my vue app. However, when I run npm run serve to load my vue app in the browser, I am met with an error:

This relative module was not found:

* ./firebaseInit in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

I've made sure to install npm install firebase --save, but I am still getting the above error.

I have a two files that setup firebase in my root directory, firebaseConfig.js that holds my app settings and firebaseInit.js that imports and exports firebase throughout my app. Below is a screenshot of my directory structure.

Directory structure

// firebaseConfig.js
export default {
  //mock data
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
}

// firebaseInit.js
import firebase from 'firebase/app'
import 'firebase/firestore'
import firebaseConfig from './firebaseConfig'
const firebaseApp = firebase.initializeApp(firebaseConfig)
export default firebaseApp.firestore()

When I try and import firebaseInit.js in my app.js file, I am met with the error stated above.

// App.vue
... <template>
<script>
import db from './firebaseInit'

</script>

I've tried looking into the docs and registering the config files in App.vue, but that did not work.

Upvotes: 1

Views: 976

Answers (2)

Gayathri Raghuram
Gayathri Raghuram

Reputation: 21

Add this to firebaseInit.js

export default const db = firebaseApp.firestore();

I had a similar problem. I also consolidated the 2 files into one file called firebaseApp.js which looks like this

import firebase from 'firebase'
import 'firebase/firestore'

var firebaseConfig = {
    apiKey: "AIzaSyDoAX0RM_eB_Zv7_P3ENJZOe97jaN5-JNE",
    authDomain: "vuefs-prod-trav.firebaseapp.com",
    projectId: "vuefs-prod-trav",
    storageBucket: "vuefs-prod-trav.appspot.com",
    messagingSenderId: "378644247244",
    appId: "1:378644247244:web:1a06b2e6c30c5ac2e54869",
    measurementId: "G-ZVGYPK8YRX"
}

firebase.initializeApp(firebaseConfig)
var db = firebase.firestore()
export default db

Finally, import it as: import db from './firebaseApp' inside your <script> of example.vue file.

Hope this helps you!!

Upvotes: 1

Rafael Lemos
Rafael Lemos

Reputation: 5819

As mentioned by @Phil in the comments you could either import the script by using

import db from "../firebaseInit.js"

with the ../ indicating that your are importing from a top level directory, or you could place the scripts in the same src folder and keep the import as is.

Upvotes: 0

Related Questions