跟随Electron教程开发购物清单应用时遇TypeError: app.on is not a function错误

Hey there, let's break down why you're hitting this error and how to fix it.

What's Causing the Error? #

The TypeError: app.on is not a function almost always boils down to one of two issues:

1. Your code is running in the renderer process, not the main process: The app module is exclusive to Electron's main process. If you accidentally put this window-creation code in a script linked to your mainWindow.html, the app variable will be undefined or invalid—hence the error.
2. Incorrect package.json configuration: If your package.json doesn't specify the correct main process entry file, Electron might load a different file that doesn't properly import the app object.

Step-by-Step Fixes #

1. Confirm Your File Structure & Roles

Make sure your code lives in a main process file (typically named main.js). Renderer process scripts (linked in mainWindow.html) should handle only UI interactions—window management belongs strictly to the main process.

2. Fix Your package.json Configuration

Open your package.json and ensure it has these key settings:

{
  "name": "shopping-list",
  "version": "1.0.0",
  "main": "main.js", // Tells Electron which file is the main process entry
  "scripts": {
    "start": "electron ." // Easy command to launch your app
  },
  "devDependencies": {
    "electron": "^28.0.0" // Use the latest stable Electron version
  }
}

If you haven't installed Electron yet, run npm install electron --save-dev to set up the dependency.

3. Update Your Code to Electron's Recommended Syntax

Traversy's tutorial uses an older pattern—let's update it to match Electron's current best practices (which also avoids timing issues with the ready event):

const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow;

// Use app.whenReady() instead of app.on('ready') (official recommended approach)
app.whenReady().then(() => {
  // Create the main window with basic configuration
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Enable Node.js integration if your tutorial relies on it (note: not recommended for production)
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // Load your mainWindow.html file (simplified path handling)
  mainWindow.loadFile(path.join(__dirname, 'mainWindow.html'));

  // Clean up when the window closes
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

// Handle cross-platform window behavior
app.on('window-all-closed', () => {
  // On macOS, apps stay open until the user explicitly quits
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // Recreate the window if no windows are open (macOS behavior)
  if (BrowserWindow.getAllWindows().length === 0) {
    mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
      }
    });
    mainWindow.loadFile(path.join(__dirname, 'mainWindow.html'));
  }
});

Why This Works #

• app.whenReady() returns a Promise that resolves when Electron finishes initializing, which is more reliable than listening to the ready event directly.
• We added cross-platform handling to match Electron's expected behavior on macOS (where apps don't quit when all windows are closed).
• The simplified loadFile() method replaces the older url.format() approach for loading local HTML files.

Test It Out #

Run npm start in your terminal, and your shopping list app should launch without the TypeError!

内容的提问来源于stack exchange，提问作者VIVEK Yadav