What would cause the Uncaught TypeError: Unable to resolve module specifier "firebase"? Isn't it true that relative references should begin with "/ ", "./ ", or "../ "?

After transitioning my code from v8 to v9 with a modular approach, I encountered an error despite having the rollup package installed. Below is my JavaScript Code:

<script type="module">
      // Necessary Firebase SDKs
      // https://firebase.google.com/docs/web/setup#available-libraries
      import firebase from 'firebase';
      import { initializeApp } from "firebase/app"
      import { getAuth, onAuthStateChanged } from "firebase/auth";
      import { getDatabase } from "firebase/database"
      // Firebase Configuration
      const firebaseConfig = {
      //app config
      };

      // Initialize Firebase
      const firebaseApp = initializeApp(firebaseConfig);
      const db = getDatabase(firebaseApp);
      const auth = getAuth(firebaseApp);
    </script>

The error message reads: Uncaught TypeError: Failed to resolve module specifier "firebase". Relative references must start with either "/", "./", or "../"

I have devoted significant time but haven't been able to pinpoint the issue.

Answer №1

Facing a similar issue, I managed to resolve it using the following approach.

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.3/firebase-app.js'
import { getAuth } from 'https://www.gstatic.com/firebasejs/9.6.3/firebase-auth.js'

It seems like those URLs could be helpful in your case.

I cannot guarantee if this is the correct method, but it worked for me.

Answer №2

One key feature of firebase 9 is the ability to import only the necessary modules instead of importing the entire firebase package.

With this update, there is no longer a need to include

import firebase from 'firebase';

Experiment with excluding the "firebase" import and observe the results.

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

Node js server for world's warm greetings

I have been attempting to utilize Node.js for hosting a web server on a dedicated PC, but unfortunately I am unable to access it from anywhere outside of my local network. After researching online, the general consensus is that all I need to do is enter t ...

Unable to access the contents of an array (React JS)

After fetching the content as an array and viewing its contents with console.log, I noticed that despite the array being populated, it has a length of 0, making it impossible to retrieve its elements using map. What could be causing this issue? https://i. ...

Assigning nested JSON values using Jquery

My JSON data structure is as follows: { "Market": 0, "Marketer": null, "Notes": null, "SalesChannel": null, "ServiceLocations": [ { "ExtensionData": null, "AdminFee": 0, "CommodityType": 0, ...

What is the best way to extract elements from an array object and store them in a separate array using JavaScript

Is there a way to extract specific values from an array object and store them in individual variables as arrays? // Given array const dummy = [ { id: 1, name: 'John', }, { id: 2, name: 'Jane', }, { id: 3, ...

What is the best way to nest _app.js within several providers?

Is there a way to wrap my top-level page _app.js in both Redux provider and Next-auth provider? Currently, I have already wrapped it in the Next-auth provider like this: import React from "react" import { Provider } from 'next-auth/client&ap ...

Efficient methods for adding data to pages using Node.js

Since transitioning from PHP to NodeJS, I have been exploring new ways of sending data and am curious if there is something equivalent to the 'echo' function in NodeJS. I am looking for a method that would allow me to send data in parts, enabling ...

Tips for enhancing the "Eliminate render-blocking resources" score on the Lighthouse report for Progressive Web App (PWA) optimization

Check out my first attempt at a PWA here: My goal is to achieve a perfect 100% in Lighthouse for all categories :) https://i.sstatic.net/9Ql9r.png Although I've read the "Learn More" page, I'm still struggling with how to implement Bootstrap C ...

Adjust the size of an element in response to changes in the size of

I've implemented a jQuery function to resize an element dynamically based on window size changes: $(window).resize(function() { topHeight = $("#top").height(); height = $(window).height() - 210; $("#container").height(height); $("#g").height( ...

Guide to encapsulating a container within a map function using a condition in JSX and TypeScript

Currently, I am working with an array of objects that are being processed by a .map() function. Within this process, I have a specific condition in mind - if the index of the object is greater than 1, it should be enclosed within a div element with a parti ...

Having trouble with enter key input not triggering?

I have scoured various resources for answers to my query, including Stackoverflow. Unfortunately, none of the posts I came across have helped me resolve my issue with getting the enter key to work in my project for FreeCodeCamp on Codepen. When I press the ...

What sets defineProps<{({})}>() apart from defineProps({ }) syntax?

While examining some code written by another developer, I came across the syntax defineProps<({})>(). After doing some research, I couldn't find any resources that helped me understand this particular syntax. My Way of Defining Props defineProp ...

Dealing with success in a personalized JavaScript function

When making an ajax call, it is possible to add success handling, and I would like to incorporate similar logic into my custom functions. I currently have 6-10 custom functions that need to run either sequentially or independently. They are currently dais ...

Can you explain the distinction between String[] and [String] in TypeScript?

Can you explain the distinction between String[] and [String] in typescript? Which option would be more advantageous to use? ...

What is the best approach to deliver a default image file in express.js?

Within my express.js project, I am utilizing the dist folder by implementing the following code: server.use(express.static('dist')) Contained within the dist folder is an img/fileicons directory that holds PNG files representing different file ...

Leveraging asynchronous response data within asynchronous components

Here's the structure of a parent component and a child component: export default { name : 'parentNode', mounted: function () { var that = this; if (that.$store.state.auth.isAuthenticated) { that. ...

What is the reason behind JavaScript not permitting methods as object key/value pairs?

While experimenting with JavaScript, I encountered a syntax error. My attempt was to assign an object key with a value returned from a method. var a = new function(){ this.b = function() { return "c"; } }; var myobj = { a.b:"d" // ...

Unveiling the hidden: Leveraging Python to extract elements not visible in HTML, yet present in Chrome's "Inspect Element" tool

Hello Python Experts! I'm diving into the world of Python and working on a program to retrieve data from a webpage. If the page returned all the information in its HTML source, there wouldn't be an issue as it's easily viewed in Chrome. Howe ...

Error encountered while attempting to save user to mongoose due to bcrypt issue

I am currently dedicated to expanding my knowledge in node and react through a tutorial. If you want to check out the repository, here is the link: https://bitbucket.org/grtn/cloudstruct/src/develop/ While making a post request to /api/users/register, I ...

What is the method for concatenating two strings in JavaScript without any whitespace in between?

When working with two strings involving time, consider the following scenario: var gettime= $("#select-choice-2 :selected").text(); The above code returns a time value in 24-hour format, such as 17:45 However, if you require the time to display in the ...

I strive to establish a strong link between React and Firebase

I am facing an issue with Firebase and React. The problem arises after clicking on my add-data button to insert data into the database. Below is the error message I receive in the console: Reference_impl.ts:482 Uncaught TypeError: db._checkNotDeleted ...