Unable to Initialize firebase in Vue web app - firebase

Question

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.
// 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.

Answer 1

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!!

Answer 2

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.