Firebase Storage does not have an export named useStorageEmulator

I'm currently in the process of developing a react application using typescript, aiming to host it on firebase. To utilize cloud storage for serving content and testing locally before deployment, I am working on setting up the storage emulator.

Following the instructions provided at: https://firebase.google.com/docs/emulator-suite/connect_storage, I am trying to implement the recommended storage emulator hook:

import { getStorage, useStorageEmulator } from "firebase/storage";

However, when attempting to use the hook, I encounter the following error from typescript:

Attempted import error: 'useStorageEmulator' is not exported from 'firebase/storage'.

The documentation mentions that this issue may be due to the new v9 sdk: https://firebase.google.com/docs/web/modular-upgrade. I have experimented with different versions like ^9.0.1, 9.0.0, and ^9.0.0-beta.8 without success. As per my investigation, there seems to be no export named useStorageEmulator in the specified file, making me uncertain if the problem lies within my implementation or setup.

Your assistance in resolving this matter would be greatly appreciated.

typescriptfirebasefirebase-storage

Answer №1

It appears that there was a discrepancy in the documentation, which led to confusion. The function has been renamed to connectStorageEmulator to avoid clashes with React's naming standards. A pull request has been submitted to rectify this error and prevent similar misunderstandings in the future.

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

Migration of old AngularJS to TypeScript in require.js does not recognize import statements

I am looking to transition my aging AngularJS application from JavaScript to TypeScript. To load the necessary components, I am currently utilizing require.js. In order to maintain compatibility with scripts that do not use require.js, I have opted for usi ...

javascriptangularjstypescriptrequirejsumd

The Angular Date Pipe is displaying an incorrect date after processing the initial date value

Utilizing Angular's date pipe within my Angular 2 application has been beneficial for formatting dates in a user-friendly manner. I have successfully integrated API dates, edited them, and saved the changes back to the API with ease. However, an issue ...

javascriptangulartypescriptdate-pipe

Utilizing *ngFor to display elements with odd indices

Within my Angular application, I have successfully used a loop to populate the 4 employeeList components. Here is the code snippet: <div *ngFor="let record of records"> <p-panel> <div comp-employeeList [listFilter]="record.Filte ...

angulartypescriptngforangular-components

Dynamic property Key in TypeScript

Imagine receiving data from a search engine in the following format: const resultDe = { details_de: "Ein paar Informationen", foo_de:{bar:"barDe"}, code: "1C60" } const resultEn = { details_en: "Some information", fo ...

typescript

Can auto-import be configured in WebStorm without using double dots?

Is it feasible to configure WebStorm for automatic import of modules/Component/components/MyComponent instead of using ../MyComponent? ...

typescriptwebstormjetbrains-ide

Mastering the art of Promises and handling errors

I've been tasked with developing a WebApp using Angular, but I'm facing a challenge as the project involves Typescript and asynchronous programming, which are new to me. The prototype already exists, and it includes a handshake process that consi ...

javascriptangulartypescript

Can a before hook ever run after a test in any situation, Mocha?

My before hook runs after the initial test and at the conclusion of the second test. Here is the code for my before hook: before(function () { insightFacade.addDataset("courses", content) .then(function (result: InsightResponse) { ...

javascripttypescriptpromisemocha.jshook

Fill up the table using JSON information and dynamic columns

Below is a snippet of JSON data: { "languageKeys": [{ "id": 1, "project": null, "key": "GENERIC.WELCOME", "languageStrings": [{ "id": 1, "content": "Welcome", "language": { ...

reactjstypescript

Angular release 6: A guide on truncating text by words rather than characters

I'm currently enhancing a truncate pipe in Angular that is supposed to cut off text after 35 words, but instead it's trimming down to 35 characters... Here is the HTML code: <p *ngIf="item.description.length > 0"><span class="body-1 ...

angulartypescript

Encountering the following issue: "ERROR TypeError: Argument is required in IE 11"

The code below is functioning properly in all internet browsers except for IE11. When running the code in IE, an error is thrown stating "ERROR TypeError: Argument not optional." The project being developed is using Angular 10. private togglePageClass(mod ...

javascriptangulartypescriptinternet-explorerpolyfills

Ensuring type integrity for intersections containing varying numbers of elements

Currently, I am navigating a sophisticated custom typeguard library developed for a project I'm involved in. I am facing challenges in grasping the concept of function signatures used in typeguards. The library includes a generic Is function that has ...

typescripttypescript-generics

List in Angular remains empty

I am facing an issue with populating a simple HTML list using Angular. The problem arises when trying to display the data in the list. When I use console.log("getUserCollection() Data: ", data);, it shows an array which is fine, but console.log("getUser() ...

angulartypescriptngfor

Shuffle and Place indented list

I have a bunch of ideas and a list of projects. I need to choose one idea and match it with a project. I followed this guide to implement the drag and drop feature, but encountered an issue where every project gets assigned the same idea when dragging and ...

angulartypescriptdrag-and-drop

Theme not being rendered properly following the generation of a dynamic component in Angular

I am currently working on an Angular 9 application and I have successfully implemented a print functionality by creating components dynamically. However, I have encountered an issue where the CSS properties defined in the print-report.component.scss file a ...

javascriptangulartypescript

When working with Typescript, you can declare an interface and split its definition across multiple files

I've been developing a software application that utilizes WebSocket with the NodeJS ws package. My networking structure revolves around a module responsible for handling message reception and transmission. Given that I'm working with TypeScript, ...

typescript

Discover the length of a video clip

Before I upload a video file, I need to determine the duration of the video. How can I gather this information? I am currently utilizing Angular 11.0.9 async upload(event: any){ this.currentFile = event.target.files[0]; // Upload Logic } ...

angulartypescript

How to efficiently import an external ES module from a URL using TypeScript

I've recently started experimenting with Observable notebooks and I must say, it's been a great experience so far. Now, my next goal is to integrate a notebook into my web app. The following vanilla JavaScript code using JavaScript modules accomp ...

typescriptwebpackes6-modulesobservablehq

Retrieve the outermost shell of the VUEjs wrapper test-utils

While working on a VueJS test, I encountered an issue where accessing the outermost layer of HTML seemed impossible. No matter what methods I tried, the outermost layer was always ignored. Is there a way to gain access to this outermost layer so that I c ...

typescriptvue.js

What is a more effective approach for managing form data with React's useState hook?

Seeking a more efficient solution to eliminate redundancy in my code. Currently, I am utilizing useState() for managing user data, which results in repetition due to numerous fields. Below is a snippet of my current code: const [lname, setLast] = useState& ...

reactjstypescriptionic-frameworkreact-hooks

Transmit data via XMLHttpRequest in smaller portions or through a ReadableStream to minimize memory consumption when handling large datasets

Recently, I've been experimenting with JS's XMLHttpRequest Class for handling file uploads. Initially, I attempted to upload files using the following code: const file = thisFunctionReturnsAFileObject(); const request = new XMLHttpRequest(); req ...

javascripttypescriptxmlhttprequeststreaming