Electron with Webpack, React & TypeScript - __dirname is not defined in Renderer Process

I’m building an Electron app using the following stack: Webpack, TypeScript and React.

I manually build the app using:

npx webpack --config webpack.main.config.ts
npx webpack --config webpack.renderer.config.ts

and start the app with:

electron .

When the app starts, I get the following error in the console:

Uncaught ReferenceError: __dirname is not defined 

The error points to a file named compat that is automatically generated.

My webpack.main.config.ts:

import type { Configuration } from 'webpack';
import * as webpack from 'webpack';
import { rules } from './webpack.rules';
import { plugins } from './webpack.plugins';
import * as path from 'path';

const config: Configuration = {
 
  entry: {
    main: './src/index.tsx',
    preload: './src/preload.ts'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.node$/,
        use: 'node-loader',
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      MAIN_WINDOW_WEBPACK_ENTRY: JSON.stringify(
        'file://' + path.resolve(__dirname, '.webpack/renderer/index.html')
      ),
    }),
  ],
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
  output: {
    path: path.resolve(__dirname, '.webpack', 'main'),
    filename: '[name].js'
  },
  externals : {
    'better-sqlite3': 'commonjs better-sqlite3',
    'lzma-native': 'commonjs lzma-native',
    'npi-build-utils': 'commonjs napi-build-utils',
    'canvas': 'commonjs canvas'
  },
  target: 'electron-main'
};

export default config;

And my webpack.renderer.config.ts file:

import type { Configuration } from 'webpack';
import { rules } from './webpack.rules';
import { plugins } from './webpack.plugins';

const webpack = require('webpack');
const dotenv = require('dotenv');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

// load .env-File
dotenv.config();

rules.push({
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});

const rendererConfig: Configuration = {
  target: 'electron-renderer',
  entry: './src/renderer.tsx', // entry point renderer process
  output: {
    path: path.resolve(__dirname, '.webpack', 'renderer'), // output folder
    filename: 'renderer.js', // name of the bundle file
    publicPath: './'
  },
  module: {
    rules,
  },
  plugins: [
    ...plugins,
    new webpack.DefinePlugin({
      'process.env.REACT_APP_GOOGLE_MAPS_API_KEY': JSON.stringify(process.env.REACT_APP_GOOGLE_MAPS_API_KEY),
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html', // HTML-template
      filename: 'index.html', // generated html file
    }),
  
  ],
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
  },
  devtool: 'source-map',
};

export default rendererConfig;

In electron BrowserWindow the contextIsolation and the nodeIntegration is set to true.

My questions are:

1. Why is __dirname being used in the render process? (I don't use __dirname inside the render process)
2. How can I solve this error?

Any help or suggestions would be greatly appreciated!