admin管理员组文章数量:1339474
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/
本文标签：
版权声明：本文标题：javascript - Uncaught TypeError: Failed to resolve module specifier "firebaseapp". Relative references must st 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743587012a2506587.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论