All elements in Electron app are scaled down in dev environment but appear normal in production build

Question

I've been having this issue across all of my Electron apps where my development environment seems to scale down all elements in my application by some factor. Things appear completely normal when I create a production build of the application.

Side by side comparison of dev and prod

I'm using Electron React Boilerplate as my starting project for all of my Electron apps, and my machine is a 2019 i7 MacBook Pro.

I don't believe it's appropriate to include the code for any elements in the renderer process considering this isn't occurring in the production build.

This appears to also be a macOS specific issue as the dev environment looks normal on my Windows machine.

package.json

{
  "description": "A foundation for scalable desktop apps",
  "keywords": [
    "electron",
    "boilerplate",
    "react",
    "typescript",
    "ts",
    "sass",
    "webpack",
    "hot",
    "reload"
  ],
  "homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
  "bugs": {
    "url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/electron-react-boilerplate/electron-react-boilerplate.git"
  },
  "license": "MIT",
  "author": {
    "name": "Electron React Boilerplate Maintainers",
    "email": "electronreactboilerplate@gmail.com",
    "url": "https://electron-react-boilerplate.js.org"
  },
  "contributors": [
    {
      "name": "Amila Welihinda",
      "email": "amilajack@gmail.com",
      "url": "https://github.com/amilajack"
    }
  ],
  "main": "./src/main/main.ts",
  "scripts": {
    "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
    "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
    "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
    "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
    "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
    "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
    "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
    "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
    "start:main": "cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only .",
    "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
    "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
    "test": "jest"
  },
  "browserslist": [],
  "prettier": {
    "singleQuote": true,
    "overrides": [
      {
        "files": [
          ".prettierrc",
          ".eslintrc"
        ],
        "options": {
          "parser": "json"
        }
      }
    ]
  },
  "jest": {
    "moduleDirectories": [
      "node_modules",
      "release/app/node_modules",
      "src"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "ts",
      "tsx",
      "json"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
    },
    "setupFiles": [
      "./.erb/scripts/check-build-exists.ts"
    ],
    "testEnvironment": "jsdom",
    "testEnvironmentOptions": {
      "url": "http://localhost/"
    },
    "testPathIgnorePatterns": [
      "release/app/dist",
      ".erb/dll"
    ],
    "transform": {
      "\\.(ts|tsx|js|jsx)$": "ts-jest"
    }
  },
  "dependencies": {
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.0",
    "electron-debug": "^3.2.0",
    "electron-log": "^4.4.8",
    "electron-updater": "^5.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.1"
  },
  "devDependencies": {
    "@electron/notarize": "^1.2.3",
    "@electron/rebuild": "^3.2.10",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
    "@svgr/webpack": "^6.5.1",
    "@teamsupercell/typings-for-css-modules-loader": "^2.5.2",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@types/jest": "^29.4.0",
    "@types/node": "18.13.0",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@types/react-test-renderer": "^18.0.0",
    "@types/terser-webpack-plugin": "^5.0.4",
    "@types/webpack-bundle-analyzer": "^4.6.0",
    "@typescript-eslint/eslint-plugin": "^5.51.0",
    "@typescript-eslint/parser": "^5.51.0",
    "browserslist-config-erb": "^0.0.3",
    "chalk": "^4.1.2",
    "concurrently": "^7.6.0",
    "core-js": "^3.27.2",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "detect-port": "^1.5.1",
    "electron": "^23.0.0",
    "electron-builder": "^23.6.0",
    "electron-devtools-installer": "^3.2.0",
    "electronmon": "^2.0.2",
    "eslint": "^8.33.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-erb": "^4.0.6",
    "eslint-import-resolver-typescript": "^3.5.3",
    "eslint-import-resolver-webpack": "^0.13.2",
    "eslint-plugin-compat": "^4.1.1",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jest": "^27.2.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.4.2",
    "jest-environment-jsdom": "^29.4.2",
    "mini-css-extract-plugin": "^2.7.2",
    "prettier": "^2.8.4",
    "react-refresh": "^0.14.0",
    "react-test-renderer": "^18.2.0",
    "rimraf": "^4.1.2",
    "sass": "^1.58.0",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.6",
    "ts-jest": "^29.0.5",
    "ts-loader": "^9.4.2",
    "ts-node": "^10.9.1",
    "tsconfig-paths-webpack-plugin": "^4.0.0",
    "typescript": "^4.9.5",
    "url-loader": "^4.1.1",
    "webpack": "^5.75.0",
    "webpack-bundle-analyzer": "^4.7.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "^5.8.0"
  },
  "build": {
    "productName": "ElectronReact",
    "appId": "org.erb.ElectronReact",
    "asar": true,
    "asarUnpack": "**\\*.{node,dll}",
    "files": [
      "dist",
      "node_modules",
      "package.json"
    ],
    "afterSign": ".erb/scripts/notarize.js",
    "mac": {
      "target": {
        "target": "default",
        "arch": [
          "arm64",
          "x64"
        ]
      },
      "type": "distribution",
      "hardenedRuntime": true,
      "entitlements": "assets/entitlements.mac.plist",
      "entitlementsInherit": "assets/entitlements.mac.plist",
      "gatekeeperAssess": false
    },
    "dmg": {
      "contents": [
        {
          "x": 130,
          "y": 220
        },
        {
          "x": 410,
          "y": 220,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },
    "win": {
      "target": [
        "nsis"
      ]
    },
    "linux": {
      "target": [
        "AppImage"
      ],
      "category": "Development"
    },
    "directories": {
      "app": "release/app",
      "buildResources": "assets",
      "output": "release/build"
    },
    "extraResources": [
      "./assets/**"
    ],
    "publish": {
      "provider": "github",
      "owner": "electron-react-boilerplate",
      "repo": "electron-react-boilerplate"
    }
  },
  "collective": {
    "url": "https://opencollective.com/electron-react-boilerplate-594"
  },
  "devEngines": {
    "node": ">=14.x",
    "npm": ">=7.x"
  },
  "electronmon": {
    "patterns": [
      "!**/**",
      "src/main/**"
    ],
    "logLevel": "quiet"
  }
}

main.ts

/* eslint global-require: off, no-console: off, promise/always-return: off */

/**
 * This module executes inside of electron's main process. You can start
 * electron renderer process from here and communicate with the other processes
 * through IPC.
 *
 * When running `npm run build` or `npm run build:main`, this file is compiled to
 * `./src/main.js` using webpack. This gives us some performance wins.
 */
import path from 'path';
import { app, BrowserWindow, shell, ipcMain } from 'electron';
import { autoUpdater } from 'electron-updater';
import log from 'electron-log';
import MenuBuilder from './menu';
import { resolveHtmlPath } from './util';

class AppUpdater {
  constructor() {
    log.transports.file.level = 'info';
    autoUpdater.logger = log;
    autoUpdater.checkForUpdatesAndNotify();
  }
}

let mainWindow: BrowserWindow | null = null;

ipcMain.on('ipc-example', async (event, arg) => {
  const msgTemplate = (pingPong: string) => `IPC test: ${pingPong}`;
  console.log(msgTemplate(arg));
  event.reply('ipc-example', msgTemplate('pong'));
});

if (process.env.NODE_ENV === 'production') {
  const sourceMapSupport = require('source-map-support');
  sourceMapSupport.install();
}

const isDebug =
  process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';

if (isDebug) {
  require('electron-debug')();
}

const installExtensions = async () => {
  const installer = require('electron-devtools-installer');
  const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
  const extensions = ['REACT_DEVELOPER_TOOLS'];

  return installer
    .default(
      extensions.map((name) => installer[name]),
      forceDownload
    )
    .catch(console.log);
};

const createWindow = async () => {
  if (isDebug) {
    await installExtensions();
  }

  const RESOURCES_PATH = app.isPackaged
    ? path.join(process.resourcesPath, 'assets')
    : path.join(__dirname, '../../assets');

  const getAssetPath = (...paths: string[]): string => {
    return path.join(RESOURCES_PATH, ...paths);
  };

  mainWindow = new BrowserWindow({
    show: false,
    width: 1024,
    height: 728,
    icon: getAssetPath('icon.png'),
    webPreferences: {
      preload: app.isPackaged
        ? path.join(__dirname, 'preload.js')
        : path.join(__dirname, '../../.erb/dll/preload.js'),
    },
  });

  mainWindow.loadURL(resolveHtmlPath('index.html'));

  mainWindow.on('ready-to-show', () => {
    if (!mainWindow) {
      throw new Error('"mainWindow" is not defined');
    }
    if (process.env.START_MINIMIZED) {
      mainWindow.minimize();
    } else {
      mainWindow.show();
    }
  });

  mainWindow.on('closed', () => {
    mainWindow = null;
  });

  const menuBuilder = new MenuBuilder(mainWindow);
  menuBuilder.buildMenu();

  // Open urls in the user's browser
  mainWindow.webContents.setWindowOpenHandler((edata) => {
    shell.openExternal(edata.url);
    return { action: 'deny' };
  });

  // Remove this if your app does not use auto updates
  // eslint-disable-next-line
  new AppUpdater();
};

/**
 * Add event listeners...
 */

app.on('window-all-closed', () => {
  // Respect the OSX convention of having the application in memory even
  // after all windows have been closed
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

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 (mainWindow === null) createWindow();
    });
  })
  .catch(console.log);