Preload script not loading in electron react

Question

I'm building an app with React and Electron and trying to create a communication channel between the main (electron.js in my case) and renderer processes. By achieving this, I want to access the Store object created in my main process to save user preferences etc.

I have set up a preload script and provided the path in my main.js (electron.js). But when I try to access the method defined in the preload.js from the renderer like this window.electronAPI.sendData('user-data', this.state), it does not recognise the electronAPI (undefined variable electronAPI). Also the console.log in my preload.js is never shown when a window is loaded. Hence I assume the preload script never gets loaded and I don't know why. Any help is very much appreciated!

EDIT: The preload script seems to load now because the console.log gets printed. Maybe preload.js did load before too but I could not see it since I could only access the application by opening localhost:3000 in the browser. Now the app opens in a BrowserWindow. However the 'electronAPI' defined in the preload script cannot be accessed still.

Here is the code:

electron.js (main.js)

const electron = require('electron');
const path = require('path');

const {app, BrowserWindow, Menu, ipcMain} = electron;

let isDev = process.env.APP_DEV ? (process.env.APP_DEV.trim() === "true") : false;

function createWindow (){
    const win = new BrowserWindow({
        width: 970,
        height: 600,
        backgroundColor: '#0C0456',
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: true,
            enableRemoteModule: false,
            preload: path.join(__dirname, 'preload.js')
        }
    });

   //if in development mode, load window from localhost:3000 otherwise build from index.html
    try {
        win.webContents.loadURL(isDev
            ? 'http://localhost:3000'
            : `file://${path.join(__dirname,'../build/index.html')}`
        )
    } catch(e){
        console.error(e)
    }


    win.webContents.openDevTools({"mode":"detach"});

    //Remove menu
    Menu.setApplicationMenu(null);

    win.once('ready-to-show', () => win.show());
    console.log("main window is shown");
    console.log(typeof path.join(__dirname, 'preload.js'));


    win.on('crashed',() => {
        console.error(`The renderer process has crashed.`);
    })


}


app.on( 'ready', () => {
    createWindow(); // open default window
} );

ipcMain.on('user-data', (event, args)=>{
    console.log(args);
});

preload.js

const {contextBridge, ipcRenderer} = require("electron");

const validChannels  = ['user-data'];

console.log("this is the preload script");

contextBridge.exposeInMainWorld('electronAPI', {
    sendData: (channel, data) => {
        if(validChannels.includes(channel)){
            ipcRenderer.send(channel, data);
        }
    }
})