Hi I'm starting with webpack and firebase. Everytime when I do :
import { initializeApp } from "firebase/app";
This is the error:
File structure:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WElcome</title>
<script src="./main.js"></script>
</head>
<body>
Welcome
</body>
</html>
index.js:
import { initializeApp } from "firebase/app";
package.json:
{
"name": "dark",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
},
"dependencies": {
"firebase": "^9.17.0"
}
}
I already tried to do it all over again but I installed firebase with npm i firebase in this folder, and always gives me the same error. What I'm missing ?
CodePudding user response：
it is very complicated issue it maybe firebase v- 9.17.0 is bugged or it is The module you're trying to import has a different casing or webpack.config.js. issue but for know you can run
npm un firebase
npm i [email protected]
CodePudding user response：
looks like 9.17.0 is bugged , same app worked with 9.16 , not working anymore since i tested with 9.17.0
CodePudding user response：
According to firebase documents: Update imports to v9 compat. In order to keep your code functioning after updating your dependency from v8 to v9 beta, change your import statements to use the “compat” version of each import. For example:
Before: version 8
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import "firebase/database";
import "firebase/storage";
After: version 9 compat // v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import "firebase/compat/database";
import "firebase/compat/storage";