Firebase is not defined what's the problem?

Question

JavaScript

In general, the main app.js file for building WebPack has the following hierarchy:

import "./sass/style.scss";
import firebase from 'firebase';
import database from "firebase/database";
import auth from "firebase/auth";
import "./js/firebase.js";
import "./js/utils.js";
import "./js/auth.js";
import "./js/forms.js";
import "./js/listRequests.js";
import "./js/picturefill.js";

The "firebase.js" file has the following "stuffing" (it was changed on purpose so as not to merge the real data):

var firebaseConfig = {
    apiKey: "здесь АПИ",
    authDomain: "домен",
    databaseURL: "юрл",
    projectId: "айди проекта",
    storageBucket: "не знаю что это",
    messagingSenderId: "id сообщений",
    appId: "id приложения"
};
firebase.initializeApp(firebaseConfig);

And at the same time, on any page where I include the bundle.js file, in which all the previous ones are collected, I get an error: firebase is not defined at... and here are a bunch of lines from bundle.js in which it is used.

I'm new to WebPack, so I'm asking for help, since I've been sitting on this task for a long time and decided to resort to asking the professionals!

PS The variant with the following hierarchy in app.js doesn't work either:

import "./sass/style.scss";
import firebase from 'firebase';
import "./js/firebase.js";
import "./js/utils.js";
import "./js/auth.js";
import "./js/forms.js";
import "./js/listRequests.js";
import "./js/picturefill.js";

let database = firebase.database(),
      auth = firebase.auth();

Answer 1

Try to import like this
import * as firebase from 'firebase';