skip to Main Content

Hi I’m starting with webpack and firebase. Everytime when I do :

import { initializeApp } from "firebase/app";

This is the error:
enter image description here

File structure:
enter image description here

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 ?

2

Answers


  1. 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 now you can run.

        npm un firebase
        npm i [email protected]
    

    After some more consideration I find 2 more solutions :
    1 you can import using /compact

    import 'firebase/compat/analytics';
    
    import firebase from 'firebase/compat/app';
    
    import 'firebase/compat/auth';
    
    import 'firebase/compat/firestore';
    

    Or, use the latest version :

    Version `9.17.1 - February 3, 2023`
    

    Moved exports.default fields to always be the last field. This fixes a bug introduced in 9.17.0 that prevented some bundlers and frameworks from building. For these build failures, the error text is: "Default condition should be last one".

    Ref : https://firebase.google.com/support/release-notes/js

    Login or Signup to reply.
  2. 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";
    

    Ref: https://stackoverflow.com/a/72186925

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search