CODEWITHSUNDEEP
javascriptnode.jsfirebasewebpackwebpack-dev-server
Tiago Camacho
Tiago Camacho

Reputation: 33

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 ?

Upvotes: 1

Views: 1090

Answers (3)

Alan Thomas
Alan Thomas

Reputation: 1

Please try this: import firebase from "firebase/compat/app"; firebase": "^10.7.2,

Upvotes: 0

abdulrhman
abdulrhman

Reputation: 71

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

Upvotes: 3

Venkataraghavan Yanamandram
Venkataraghavan Yanamandram

Reputation: 431

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

Upvotes: 0

Related Questions