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

user_14513020 0
Viewed 8901

I've followed a YouTube tutorial on WebRTC video chat, so I've tried to write it. In localhost it worked, but as soon as I've uploaded it to firebase hosting it gives this error. what can I do? I'm new in web developing so please be patient

main.hmtl

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebRtc Demo</title>
  </head>
  <body>

  <h2>Start Cam</h2>
  <div class ="videos">
    <span>
      <h3>Local</h3>
      <video id="webcamVideo" autoplay playsinline></video>
    </span>

    <span>
      <h3>Remote</h3>
      <video id="remoteVideo" autoplay playsinline></video>
    </span>
  </div>

  <button id="webcamButton">Start cam</button>

  <h2>New Call</h2>
  <button id="callButton">call</button>

  <input id="callInput"/>

  <button id="answerButton">Rispondi</button>
  <button id="hangupButton">Hangup</button>

  <script type="module" src="/main.js"></script>


</body> 
</html>

Firebase.json

  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "/",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

main.js

import firebase from 'firebase/app';
import 'firebase/firestore';
const firebaseConfig = {
  ...
};
firebase html javascript
3 Answers

I had the same issue. I will tell you how I resolved it :

First try to import firebase modules from google server using CDN. see down here :

     import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
  import { getFirestore, doc, getDoc, getDocs, collection } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-firestore.js";

this works very well. but for efficiency, I guess you want to load firebase modules on your computer using npm. in that case you absolutely need module Bundlers like Webpack, Rollup, Parcel, Snowpack,... I used Webpack, they are alot of tutorials about it.

In case you are using a module bundler, it will compile your main.js file into another file, let's call it bundle.js.

then fix this:

<script type="module" src="/main.js"></script>

to :

<script type="module" src="dist/bundle.js"></script>

or (depending on how you sets your paths)

<script type="module" src="bundle.js"></script>

so your are getting that error because your main.js is not compiled.

I hope that helps you. peace

user_36764780

You can use CDN

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
import {
  getAuth,
  onAuthStateChanged,
} from "https://www.gstatic.com/firebasejs/9.4.0/firebase-auth.js";

⚠️ NOTE⚠️ When ever you need a service just change file name that the end of the link

user_147320110
user_169290750
Related