CODEWITHSUNDEEP
javascripthtmlfirebase
Loki00
Loki00

Reputation: 271

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

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 = {
  ...
};

Upvotes: 7

Views: 19850

Answers (4)

Jood80
Jood80

Reputation: 150

Have you made sure you built your application before deploying it?
I had to run npm run build then update firebase.json and deploy again to get rid of that error.

// Firebase.json
{
    "hosting": {
        "public": "dist", // where the bundled code has generated 
         .....
     }
}

Upvotes: 0

Mohamed Nabil Essefaihi
Mohamed Nabil Essefaihi

Reputation: 217

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

Upvotes: 0

Olivieris
Olivieris

Reputation: 109

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

Upvotes: 10

Fernando
Fernando

Reputation: 1

They follow the webpack approach, for this they must have node js installed. https://webpack.js.org/guides/getting-started/

Upvotes: -1

Related Questions