Electron 15+版本下React应用src文件夹热重载失效问题排查求助

Let’s break down your problems one by one and fix them step by step—this setup can work smoothly once we align the configurations properly.

1. Why src Folder Isn’t Being Watched #

Your electron-reloader is only monitoring the public folder and its contents, which is why changes to src don’t trigger any reload. We need to explicitly tell it to watch the src directory too.

Update your public/main.js where you initialize electron-reloader:

// Only enable reloader in development to avoid production overhead
if (process.env.NODE_ENV === 'development') {
  require('electron-reloader')(module, {
    debug: true,
    watchRenderer: true,
    watch: ['../src', './'] // Add ../src to watch your React source files
  });
}

The ../src path works because your main.js lives in the public folder—adjust the relative path if your directory structure is different.

2. Fixing ELECTRON_START_URL Not Being Read #

Right now, your main.js is hardcoding the file:// path to index.html, ignoring the ELECTRON_START_URL you set. Plus, using set is Windows-specific; for cross-platform compatibility, use cross-env.

Step 2.1: Install cross-env #

npm install cross-env --save-dev

Step 2.2: Update Your electron-dev Script #

Modify your package.json scripts to set both NODE_ENV and ELECTRON_START_URL properly:

"scripts": {
  "electron-dev": "cross-env NODE_ENV=development ELECTRON_START_URL=http://localhost:3000 electron .",
  "dev": "concurrently \"npm start\" \"npm run electron-dev\"", // Add this to run both servers at once
  // ... rest of your scripts
}

The dev script uses concurrently (install it with npm install concurrently --save-dev) to launch both the React dev server and Electron in one command.

Step 2.3: Load the Correct URL in main.js #

Update your window creation logic to use the environment variable when available:

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      // Adjust these based on your needs (Electron 15+ disables nodeIntegration by default)
      nodeIntegration: false,
      contextIsolation: true
    }
  });

  // Use dev server URL in development, build folder in production
  const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, '../build/index.html'),
    protocol: 'file:',
    slashes: true
  });

  mainWindow.loadURL(startUrl);

  // Open DevTools in development
  if (process.env.NODE_ENV === 'development') {
    mainWindow.webContents.openDevTools();
  }

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

app.on('ready', createWindow);

// Add standard Electron lifecycle handlers
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (mainWindow === null) createWindow();
});

3. Fixing Package.json main Path Issues #

Your current main points to build/main.js, which is for production. For development, we need to use public/main.js, and ensure the production build copies the necessary files to build.

Step 3.1: Update package.json Main Field #

"main": "public/main.js",

Step 3.2: Copy main.js and preload.js to Build Folder #

Install copyfiles to automate this:

npm install copyfiles --save-dev

Update your build script to copy these files after React builds:

"build": "react-scripts build && copyfiles public/main.js public/preload.js build/"

Now when you run npm run build, your production-ready main.js will be in the build folder, and Electron will load it correctly for production builds.

4. Verify the Setup #

Run npm run dev—this should:

1. Start the React dev server on http://localhost:3000
2. Launch Electron, which loads the React dev server URL
3. Trigger reloads when you modify files in src or public
4. Let React’s built-in hot reload handle component updates without full Electron window reloads

Key Notes for Electron 15+ #

• WebPreferences Changes: Electron 15+ disables nodeIntegration and enables contextIsolation by default. Use a preload.js script to expose Node.js APIs to your React app if needed, instead of enabling nodeIntegration in production.
• Environment Variables: Always use cross-env for cross-platform environment variable support—avoid Windows-only set commands.

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