Unable to Initialize firebase in Vue web app

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.

Could you show a screenshot of the directory containing these files? — Phil
– Phil, Commented Aug 31, 2020 at 4:33
Assuming App.vue is in your src directory, you want import db from "../firebaseInit.js". Personally though, I'd move those scripts into src — Phil
– Phil, Commented Aug 31, 2020 at 4:40
Does this answer your question? Import file based on relative path in JavaScript — Phil
– Phil, Commented Aug 31, 2020 at 4:42
Moving the two firebase scripts into the src directory solved the issue. Thanks! — Tyler Morales
– Tyler Morales, Commented Aug 31, 2020 at 4:43

Denny Mueller · Accepted Answer · 2021-05-04 09:37:37Z

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

edited May 4, 2021 at 9:37

Denny Mueller

3,6255 gold badges38 silver badges67 bronze badges

answered May 3, 2021 at 7:11

Gayathri Raghuram

192 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rafael Lemos · Accepted Answer · 2020-08-31 13:46:53Z

0

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.

answered Aug 31, 2020 at 13:46

community wiki

Rafael Lemos

Collectives™ on Stack Overflow

Unable to Initialize firebase in Vue web app

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related