Electron Snowpack

0.13.0 verified Fri May 01 auth: no javascript

Effective Electron app development toolchain combining Snowpack's fast dev server with esbuild for main process compilation. Current stable version is 0.13.0 (April 2022). Integrates .env variable support, TypeScript config presets, electron-builder config, and HMR for renderer via Snowpack. Differentiator: unified configuration for both main and renderer processes, leveraging Snowpack's plugin ecosystem and esbuild's speed for main process TypeScript builds. Requires Electron as peer dependency. Released under MIT license.

Common errors

error Error: Cannot find module 'electron-snowpack/config/snowpack.js' ↓

cause electron-snowpack not installed or incorrect path in extends.

fix

Install electron-snowpack: npm install electron-snowpack --save-dev, and ensure extends string is exactly 'electron-snowpack/config/snowpack.js'.

error TypeError: win.loadURL is not a function ↓

cause Incorrect usage of Electron API; loadURL is a method of BrowserWindow instance.

fix

Use win.loadURL('http://localhost:8080') instead of mis-capitalized or missing instance.

error Electron-Snowpack: Failed to resolve main entry file ↓

cause Package.json 'main' field points to non-existent file or incorrect path.

fix

Set 'main' in package.json to your compiled main entry (e.g., 'build/main/index.js') or use source file with Snowpack build.

error Error: Must use import to load ES Module: electron-snowpack ↓

cause electron-snowpack is ESM-only; cannot be required() from CJS context.

fix

Use dynamic import() or set type: 'module' in package.json, and import configs via extends string.

Warnings

breaking React Fast Refresh requires React 16.9+ and must be enabled in Snowpack config. ↓

fix Ensure React version meets requirement and check Snowpack docs for HMR setup.

gotcha Environment variables prefixed with SNOWPACK_PUBLIC_ are available in renderer; all SNOWPACK_* are available in main. ↓

fix Use SNOWPACK_PUBLIC_ prefix for public renderer variables; see Snowpack env vars docs.

deprecated The package has not been updated since April 2022; Snowpack has been deprecated in favor of Vite. ↓

fix Consider migrating to electron-vite or Vite-based alternatives for ongoing support.

gotcha Windows resource loading may fail with incorrect paths, fixed in 0.12.2. ↓

fix Update to >=0.12.2 or manually resolve asset paths using path.join.

Install

npm install electron-snowpack

yarn add electron-snowpack

pnpm add electron-snowpack

Imports

electron-snowpack configs
wrong
```
require('electron-snowpack/config/snowpack')
```
correct
```
extends: 'electron-snowpack/config/snowpack.js'
```
Configs are extended in config files (e.g., snowpack.config.js), not imported in source code.
tsconfig extension
wrong
```
extends: 'electron-snowpack/config/tsconfig'
```
correct
```
"extends": "electron-snowpack/config/tsconfig.json"
```
Use JSON string, not a JavaScript expression. Must be placed in tsconfig.json.

electron-builder config

wrong

require('electron-snowpack/config/electron-builder')

correct

{
  "build": {
    "extends": "electron-snowpack/config/electron-builder.js"
  }
}

Extends electron-builder configuration in package.json build field.

Quickstart

Sets up a basic Electron app with Snowpack and esbuild for dev and build, including TypeScript configs and dev server URL.

// In package.json:
{
  "main": "src/main/index.ts",
  "scripts": {
    "dev": "electron-snowpack dev",
    "build": "electron-snowpack build",
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^20.0.0",
    "electron-snowpack": "^0.13.0"
  }
}

// src/main/index.ts:
import { app, BrowserWindow } from 'electron';
import path from 'path';

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js'),
    },
  });
  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://localhost:8080');
  } else {
    win.loadFile(path.join(__dirname, '..', 'renderer', 'index.html'));
  }
});

// snowpack.config.js:
module.exports = {
  extends: 'electron-snowpack/config/snowpack.js',
};

// tsconfig.json (if using TypeScript):
{
  "extends": "electron-snowpack/config/tsconfig.json",
  "include": ["src"]
}

// Run:
// $ npm run dev