Built Electron app opens with white screen when using electron-builder

[whenmoon]

I'm not entirely sure whether this has something to do with the Electron configuration in the universal-monorepo tutorial, or whether extra steps need to be taken because of files being outside of the src folder in the Electron app, but hoping to get some pointers here if possible.

I am building the Electron app with electron-builder. The app builds fine itself but will only display a blank screen. This is a widely documented issue with the build path being incorrect in the Electron configuration, but it seems fine to me and in line with what people suggest works.

Here is the package.json in my Electron package:

{
    "name": "@my-app/electron",
    "description": "my-app description",
    "version": "0.1.0",
    "author": "my-app",
    "private": true,
    "homepage": "./",
    "main": "./public/electron.js",
    "dependencies": {
        "firebase": "^9.2.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-native-web": "^0.17.5",
        "react-scripts": "4.0.3",
        "uuid": "^8.3.2",
        "web-vitals": "^1.0.1"
    },
    "scripts": {
        "cra:start": "craco start",
        "cra:build": "craco build",
        "start": "concurrently -k \"cross-env BROWSER=none yarn cra:start\" \"wait-on http://localhost:3000 && electronmon .\"",
        "build": "craco build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "dist": "electron-builder"
    },
    "eslintConfig": {
        "extends": [
            "react-app"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@craco/craco": "^6.3.0",
        "@types/jest": "^26.0.15",
        "@types/node": "^12.0.0",
        "@types/react": "^17.0.0",
        "@types/react-dom": "^17.0.0",
        "@types/uuid": "^8.3.1",
        "concurrently": "^6.3.0",
        "cross-env": "^7.0.3",
        "electron": "^15.2.0",
        "electron-builder": "^22.14.5",
        "electronmon": "^2.0.2",
        "react-native-monorepo-tools": "^1.1.1",
        "wait-on": "^6.0.0"
    },
    "build": {
        "extends": null,
        "appId": "com.my-app.my-app",
        "productName": "my-app",
        "directories": {
            "output": "dist"
        },
        "mac": {
            "target": "pkg",
            "darkModeSupport": "true",
            "extendInfo": "my-app"
        },
        "pkg": {
            "installLocation": "/Applications",
            "overwriteAction": "upgrade"
        },
        "extraFiles": [
            "../app/src/"
        ]
    }
}

my electron.js:

// Module to control the application lifecycle and the native browser window
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

// Create the native browser window.
function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(app.getAppPath(), 'preload.js'),
        },
    });

    // In production, set the initial browser path to the local bundle generated
    // by the Create React App build process.
    // In development, set it to localhost to allow live/hot-reloading.
    const appURL = app.isPackaged
        ? url.format({
            // @ts-ignore
            pathname: path.join(__dirname, 'index.html'),
            protocol: 'file:',
            slashes: true,
        })
        : 'http://localhost:3000';
    console.log('appURL -------------------->', appURL); // does not log
    mainWindow.loadURL(appURL);

    // newbedev.com/how-to-set-electron-useragent
    // mainWindow.webContents.userAgent = 'Chrome';
    // Automatically open Chrome's DevTools in development mode.
    if (!app.isPackaged) {
        mainWindow.webContents.openDevTools();
    }
}

// This method will be called when Electron has finished its initialization and
// is ready to create the browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
    createWindow();

    app.on('activate', () => {
        // On macOS it's common to re-create a window in the app when the
        // dock icon is clicked and there are no other windows open.
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

// Quit when all windows are closed, except on macOS.
// There, it's common for applications and their menu bar to stay active until
// the user quits  explicitly with Cmd + Q.
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

app.setAsDefaultProtocolClient('my-app');

In the above file, I do not see any of the console.logs in the electron console. I'm using TypeScript in the rest of the app. Any ideas much appreciated.

[whenmoon]

Closing as resolved / unrelated to repo.