javascriptnode.jsfirebasewebpackwebpack-dev-server

Importing "firebase/app" Module not found: Error: Default condition should be last one

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 ?

Solution

  • 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 firebase@9.16.0

    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