How can webpack be configured to remove require statement for bundled app in electron while maintaining safety?

Question

So I am building a react app in electron using webpack from a tutorial. For persistence the tutorial uses firebase.

This is my webpack config file. This is webpack.common.js file

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/index.js',
  devtool: 'inline-source-map',
  target: 'electron-renderer',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [[
              '@babel/preset-env', {
                targets: {
                  esmodules: true
                }
              }],
              '@babel/preset-react']
          }
        }
      },
      {
        test: [/\.s[ac]ss$/i, /\.css$/i],
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      }
    ]
  },
  plugins: [],
  resolve: {
    extensions: ['.js']
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'build', 'js'),
  },
};

Up until using firebase everything worked fine. Then I introduced firebase in the project.

1. Created firebase account
2. Create firestore database
3. Copied the relevant data

I tried to follow a standard api repo db approach. First the db file:

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from 'firebase/firestore'
import 'firebase/firestore'


const config = {
  apiKey: "my_api_key",
  authDomain: "my_auth_domain",
  projectId: "my_project_id",
  storageBucket: "my_storage_bucket",
  messagingSenderId: "my_sender_id",
  appId: "my_app_id",
  measurementId: "my_measurement_id"
};

// Initialize Firebase
const app = initializeApp(alexandra_config);
const analytics = getAnalytics(app);
export const db = getFirestore(app);

The the repo:

import { db } from "../db/firestore"
import { collection, getDocs } from "firebase/firestore"

export const getChats = async () => {
    console.log("Chat repo")
    const chatRef = collection(db, 'chat');
    const snapshot = await getDocs(chatRef);
    const data = snapshot.docs.map(doc => doc.data());
    return data;
} 

Then the api:

import {getChats} from '../repos/chat_repo'

export const fetchChats = async () => {
    const data = await getChats()
    return data
}

And finally the view

import React, { useEffect } from "react"
import { fetchChats } from "../api/chats"
...




export default function Home() {

  useEffect(() => {
    fetchChats()
  }, [])

  .......
} 

When is run the app i get the following issue

If i remove the reference for firebase in the view then the issue does not appear and there is no require( anywhere inside the bundled app.js

Also pasting info from package.json for further information

{
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "watch": "webpack --config webpack.common.js --watch"
  },
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.6.0",
    "electron": "^17.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "sass": "^1.49.8",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "bootstrap": "^5.1.3",
    "firebase": "^9.6.8",
    "react-router-dom": "^6.2.1"
  }
}

I am quite new to webpack and browser side javascript, most of my work was with typescript and rest api code, so any help is appreciated.

Thank you in advance.

PS:

I know that using nodeIntegration and contextIsolation might fix this issue but i already have a context bridge and would like to learn good practices from the start.

So any help with just using webpack and not break security concerns is what i would prefer