vite-plugin-electron

0.29.1 verified Sat Apr 25 auth: no javascript

A Vite plugin that integrates Electron main process and preload scripts into the Vite build pipeline, supporting hot reload for main process via electron-rebuild (HMR). Current stable version is 0.29.1. The plugin automatically starts Electron after Vite server is ready and allows configuring entry files, build options, and external dependencies. Actively maintained with frequent releases. Key differentiator: full HMR support for Electron main process, unlike alternatives like electron-vite which require separate builds.

Common errors

error Error: Cannot find module 'electron' ↓

cause Electron is not listed as external in the Vite build config for main process.

fix

Add 'electron' to rollupOptions.external in the plugin's vite config.

error Error: startup is not a function ↓

cause Using an older version of the plugin (<0.28) or incorrect onstart signature.

fix

Upgrade to >=0.28 and ensure onstart receives args object with startup method.

error Module not found: Error: Can't resolve 'fs' ↓

cause Default Vite config does not mark Node built-ins as external for Electron main process.

fix

Add 'builtinModules' from 'module' module to external in rollupOptions.

error Electron app does not close on Ctrl+C in terminal ↓

cause Process is not properly killed on Vite server shutdown.

fix

Use args.startup() to manage lifecycle; consider using the 'onstart' callback to gracefully shut down.

Warnings

breaking v1.0.0-beta.1 drops Vite 7 support and requires Vite 8. ↓

fix Upgrade to Vite 8 or stay on vite-plugin-electron <1.0.0-beta.1

breaking In v0.28, the plugin switched to ESM-only; CommonJS require() no longer works. ↓

fix Use import syntax or dynamic import() from CJS code.

deprecated The 'main' and 'preload' options in plugin config are deprecated in favor of an array of entry objects. ↓

fix Use array configuration with 'entry' and 'onstart' fields.

gotcha Hot reload may not work on Windows if the Electron process exits prematurely; the process must be started via args.startup(). ↓

fix Call args.startup() in onstart callback to ensure proper process management.

gotcha If external dependencies are not listed in rollupOptions.external, they may be bundled incorrectly causing runtime errors. ↓

fix Add 'electron' and other native modules to external in the Vite build config.

Install

npm install vite-plugin-electron

yarn add vite-plugin-electron

pnpm add vite-plugin-electron

Imports

vitePluginElectron

wrong

const vitePluginElectron = require('vite-plugin-electron')

correct

import vitePluginElectron from 'vite-plugin-electron'

ESM-only since v0.28; default export is the plugin factory function.

defineConfig
wrong
```
import { defineConfig } from 'vite'
```
correct
```
import { defineConfig } from 'vite-plugin-electron'
```
The plugin re-exports defineConfig for convenience; using vite's own defineConfig also works but may miss plugin-specific types.

type VitePluginElectronOptions

wrong

import { VitePluginElectronOptions } from 'vite-plugin-electron'

correct

import type { VitePluginElectronOptions } from 'vite-plugin-electron'

Type-only import to avoid runtime side effects; recommended for TypeScript users.

Quickstart

Configures Vite to build Electron main process and preload scripts with HMR support, using two plugin entries.

import { defineConfig } from 'vite';
import electron from 'vite-plugin-electron';
import renderer from 'vite-plugin-electron-renderer';
import path from 'path';

export default defineConfig({
  plugins: [
    electron([
      {
        entry: 'electron/main.ts',
        onstart(args) {
          args.startup();
        },
        vite: {
          build: {
            outDir: 'dist-electron',
            rollupOptions: {
              external: ['electron'],
            },
          },
        },
      },
      {
        entry: 'electron/preload.ts',
        onstart(args) {
          args.reload();
        },
        vite: {
          build: {
            outDir: 'dist-electron',
          },
        },
      },
    ]),
    renderer(),
  ],
  server: {
    port: 5173,
  },
});