Electron渲染进程require崩溃求助：Pug生成HTML引发异常

Alright, let's tackle your Electron issues one by one—this combination of crashes with fully commented scripts and require failures sounds like a mix of Pug rendering quirks and Electron's security defaults.

1. Fixing the Crash Issue (Even with Commented-Out Scripts) #

Since your app crashes even when all script content is commented out, the problem is almost certainly not your JavaScript—it's likely invalid HTML generated by your Pug template that's causing Electron's renderer engine to choke. Here's how to debug this:

• First, compile your Pug template to static HTML manually using the Pug CLI:

  pug your-template.pug > compiled-output.html
  

• Replace your Pug-generated HTML with this static compiled-output.html in your Electron app. If the crash stops, your Pug template is generating malformed HTML (think unclosed tags, invalid nesting, empty but broken script elements, or hidden whitespace/characters that confuse the renderer).
• Audit the compiled HTML for oddities—common culprits include:
  • Accidental self-closing tags where they shouldn't be (e.g., div/ in Pug that compiles to <div/> with content inside)
  • Unescaped characters that break DOM parsing
  • Extra nested elements that create infinite rendering loops (rare but possible with complex Pug mixins)

If the static HTML still crashes, try launching Electron with the --disable-gpu flag to rule out hardware acceleration issues:

electron . --disable-gpu

2. Fixing the require Not Working Issue #

Electron's modern defaults disable Node.js integration in the renderer process for security reasons, which is why require() throws errors even after fixing the crash. You have two options depending on your use case:

Option 1: Quick Fix (For Development/Testing) #

Enable Node.js integration and disable context isolation in your main process's BrowserWindow config:

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

const mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    // If you're using Electron < 14, you might also need enableRemoteModule: true if using remote
  }
});

mainWindow.loadFile('your-pug-compiled.html');

This lets you use require() directly in the renderer, but note that this reduces security—never use this for production apps.

Option 2: Production-Safe Fix (Preload Script) #

For secure production apps, use a preload script to expose only the Node.js functionality you need to the renderer, while keeping context isolation enabled:

1. Create a preload.js file in your project root:

   const { contextBridge } = require('electron');
   const fs = require('fs');
   
   // Expose a safe API to the renderer
   contextBridge.exposeInMainWorld('electronUtils', {
     readLocalFile: (filePath) => {
       return fs.readFileSync(filePath, 'utf8');
     },
     // Add only the functions your app actually needs here
   });
   

2. Update your main process config to use the preload script:

   const mainWindow = new BrowserWindow({
     webPreferences: {
       contextIsolation: true, // Keep this enabled for security
       preload: path.join(__dirname, 'preload.js') // Path to your preload script
     }
   });
   

3. In your renderer script (or Pug template's script tag), use the exposed API instead of require:

   // Instead of require('fs')
   const fileContent = window.electronUtils.readLocalFile('./example.txt');
   

Final Troubleshooting Step #

Once you've fixed the Pug-generated HTML crash, test the require solution that fits your workflow. If you still run into issues, double-check that your Pug template isn't injecting any hidden script tags or DOM elements that interfere with Electron's security settings.

内容的提问来源于stack exchange，提问作者Get Off My Lawn