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 = {
...
};
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 = {
...
};
- Do you mind confirming that firebase is properly installed as a dependency in package.json? If not, that might be the problem. – SahilMak Commented Mar 15, 2021 at 20:03
- It is installed correctly because in package.json : ``` "dependencies": { "firebase": "^8.3.0" } ``` – Loki00 Commented Mar 15, 2021 at 20:11
- And you see the firebase module within the node_modules folder? – SahilMak Commented Mar 15, 2021 at 21:13
- 1 Yes, It is there – Loki00 Commented Mar 15, 2021 at 21:32
- same issue here. any hope with resolving this? – klewis Commented Aug 30, 2021 at 19:04
4 Answers
Reset to default 10I 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./firebasejs/9.4.0/firebase-app.js";
import { getFirestore, doc, getDoc, getDocs, collection } from "https://www.gstatic./firebasejs/9.4.0/firebase-firestore.js";
this works very well. but for efficiency, I guess you want to load firebase modules on your puter 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 pile 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 piled.
I hope that helps you. peace
You can use CDN
import { initializeApp } from "https://www.gstatic./firebasejs/9.4.0/firebase-app.js";
import {
getAuth,
onAuthStateChanged,
} from "https://www.gstatic./firebasejs/9.4.0/firebase-auth.js";
⚠️ NOTE⚠️ When ever you need a service just change file name that the end of the link
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
.....
}
}
They follow the webpack approach, for this they must have node js installed. https://webpack.js/guides/getting-started/
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743587013a4475113.html
评论列表（0条）