Firebase integration for vusjs dropzone image uploads encountering issue with storage functionality

Struggling to implement image uploads in a VueJS app following this guide. However, I keep encountering the error:

TypeError: _config_firebaseInit__WEBPACK_IMPORTED_MODULE_2__.default.storage is not a function

Below is my firebase initialization file:

import firebase from "firebase";
import "firebase/storage";
import firebaseConfig from "./firebaseConfig";

const firebaseApp = firebase.initializeApp(firebaseConfig);

var storage = firebase.storage();

export default firebaseApp.firestore();

The form includes a vue-dropzone element with the following code:

import firebase from "../../../config/firebaseInit";
import { uuid } from "vue-uuid";
import vue2Dropzone from "vue2-dropzone";
import "vue2-dropzone/dist/vue2Dropzone.min.css";

export default {
  name: "new-listing",
  components: {
    vueDropzone: vue2Dropzone
  },
  data() {
    return {
      // data values here
    };
  },

  methods: {
    saveListing() {
      // saving listing logic here
    },
    async afterComplete(upload) {
      // image upload logic here
    }
  }
};

I've referred to the Firebase documentation here, but still can't seem to resolve it.

Answer №1

The file you initially created, named FirebaseInit, only exports the Firestore service:

export default firebaseApp.firestore();

However, in another file, you import this and attempt to use the storage() method on it. Since only Firestore was exported, this operation is like calling firebase.firestore().storage(), which is not a valid function.

To resolve this issue, consider exporting either your entire firebaseApp object or the entire firebase namespace:

export default firebase // export default firebaseApp

In the other part of your code, you will need to access the services using firebase.firestore() and firebase.storage(), as shown in the following example:

firebase.firestore().collection("listings")

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble encountered in nuxt/auth

When it comes to authentication, I utilize nuxt-auth. After a successful login, my intention is to redirect to the main page using this.$router.push('/'). However, upon doing so, I am encountering a blank page with the following message: 2021 ...

Locate the line number of a specific word within a paragraph using JavaScript

Imagine a scenario where there is a lengthy paragraph. By clicking on a specific line, JavaScript/jQuery will dynamically insert an empty <span> tag at the beginning of that particular line - just before the initial word. For example, take a look at ...

React-Redux Error: The function this.props.AppendCharacter is not defined

I have been looking for a solution to my issue but couldn't find anything that matches it. I am working on creating a calculator app using React & Redux, and whenever I click on one of the number buttons, I receive an error message saying "this.props. ...

Ensure that the onPrepare method of the protractor is configured to wait for async HTTP requests

I have a query regarding my protractor conf.js file. The onPrepare function in it needs to include an http request that is structured like this, onPrepare: function(done) { request.get('http://pepper/sysid') .end(function(err, resp){ ...

Tracking global click events in Vue.js can provide valuable insights into user interactions on your

While working with JavaScript, I was able to create this code for a popover. By clicking on the navbar-link element, the popover will appear or disappear. However, it would be great if I could close the popover by clicking anywhere on the screen (when the ...

Guide on defining Component displayName using arrow function Higher Order Component

Currently, I am attempting to include a displayname in my HOC and eliminate the comment eslint-disable-next-line react/display-name from the code provided below: const withMyHOC = () => <P extends MyProps>(WrappedComponent: React.ComponentType< ...

Solutions for retrieving the selected row in a bootstrap modal using knockout js

I'm currently working on developing a master-detail page using Knockout JS, as shown in the image below. I've encountered an issue with retrieving values from a Bootstrap modal in the details section. For instance, upon clicking the browse butto ...

Need to double tap to remove item in redux-toolkit

Trying to delete an item in Redux Toolkit, but having trouble as the remove function only works on screen. I have to press twice to delete the previous one. Here is the reducer: const noteReducer = createSlice({ name: "note", initialState: N ...

What could be causing Map() to not display itemlist, even though the items are being rendered separately in ReactJS?

Recently, I encountered a problem while working on an app using ReactJS, Redux, and Firebase/Firestore. The issue arises when I fetch data from Firestore and store it in the ourPosts variable using useState([]) initialization. The strange thing is that wh ...

Advantages of implementing Vue Router in a desktop software application

Creating a Windows Desktop application with a user interface frontend using Chromium Embedded Framework. While this is specific to Chromium Embedded Framework, it can also be applied to Electron and other similar platforms. The application will consist of ...

"Ionic with Angular is facing an issue where ion-radio element cannot be set as checked by default

Having trouble selecting a radio button in a radio list. Can anyone help? Any assistance would be greatly appreciated. This is how I've been attempting it: <div class="list"> <ion-radio ng-repeat="item in goalTypeList" ...

Conceal the iframe if the source is http:// and there is no associated

Is there a way to hide the iframe only if the src starts with "http://"? This is what I have tried so far: <script type="text/javascript> if ( $('iframe[src^="http://"]') ) document.getElementById('iframe').style.d ...

Tips for maintaining the latest HTML, CSS, and JS files in Angular2/4 frontend hosted on IIS

When it comes to IIS, there are various settings that can affect the freshness of files. One setting involves Output Caching, where you can create cache rules such as enabling Kernel-mode caching and utilizing file change notifications. Another sett ...

Issues with @material-ui/core and react-bootstrap imports are causing disruptions to the NextJS build process

After researching, I've come to realize that this issue is common among developers. Unfortunately, none of the solutions I found have worked for me. During npm run dev mode, everything in the project functions as expected, with all imports working se ...

Load Vue component dynamically in a completely flexible manner

It seems like I have stumbled upon a rather unique scenario, and I'm not referring to the dynamic loading of components with webpack. My goal is to deploy "Apps" as Vue components on a backend that is completely separate, allowing the backend to serv ...

What advantages does incorporating SSR with dynamic imports bring?

How does a dynamic imported component with ssr: true differ from a normal component import? const DynamicButton = dynamic(() => import('./Button').then((mod) => mod.Button), { ssr: true, }); What are the advantages of one method over the ...

Would it be frowned upon in JavaScript to use "if (somestring in {'oneoption':false, 'secondoption':false})"?

Is the use of this construct considered a bad practice in JavaScript and could it lead to unexpected behavior? if (e.target.name in {name: '', number: ''}) { // do something } This code checks if the 'name' attribute of an ...

Can you explain the significance of this { logic } syntax in JavaScript (excluding objects)?

I recently came across this interesting code snippet in an open source ReactJS project on GitHub. It was found in the file: react.development.js { ReactDebugCurrentFrame.setExtraStackFrame = function (stack) { { currentExtraStackFrame = ...

How to retrieve data obtained from parsing readline and fs in node.js beyond the scope of the callback function

This specific question diverges from the one mentioned with an existing answer. It pertains to a snippet of code taken from node.js documentation involving the use of fs and readfile, with a focus on detecting an end-of-file flag, which appears to be the r ...

"Upon refreshing the page, the local storage values are being reset and an error is occurring due

Every time I refresh the page, my array and local storage reset. I have tried parsing the data and then stringifying it as suggested in some answers. However, I keep encountering an error message that says 'local storage is not defined' along wit ...