While integrating Firebase firestore into an electron app, I’m getting an error Uncaught ReferenceError: require is not defined

I’m trying to integrate Firebase Firestore into my electron app, however when I import the Firestore module into my views I get an error uncaught ReferenceError: require is not defined.

Here’s my Webpack config

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
                },
                modules: false, // This is important for handling ESM syntax
              }],
              '@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'),
  },
};

firebase initialization

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";



const config = {
  
};

// Initialize Firebase
const App =  initializeApp(config);

const db = getFirestore(App);

export default db;

Data fetching

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

export const fetchChats = async () => {
    try {
        const chatsCol = collection(db, 'chats');
        const chatsSnapShots = await getDocs(chatsCol);
        
        const chats = chatsSnapShots.docs.map(doc => doc.data());

        return chats;
    } catch (error) {
        console.error("Error fetching chats:", error);
      
    }
}

when I try to import the module fetchChats to another module the app breaks and I get the error above.