Electron应用报错：require未定义等问题求助

开发桌面应用时反复遇到两个错误：Uncaught ReferenceError: require is not defined和Uncaught ReferenceError: ipcRenderer is not defined。已通过修改preload.js封装myAPI解决ipcRenderer未定义问题，但require未定义的错误仍持续存在。需求为实现登录后加载指定URL，后续添加检查脚本。

index.html代码 #

<!DOCTYPE html>
<html>

<head>
  <title>Login Page</title>
  <script src="preload.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <h1>Login to Your App</h1>
  <form id="loginForm">
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>

  <script>
    if (typeof window.myAPI !== 'undefined') { // Check for myAPI object
      document.getElementById('loginForm').addEventListener('submit', async (event) => {
        event.preventDefault();
        const username = event.target.username.value;
        const password = event.target.password.value;

        try {
          const response = await window.myAPI.invoke('login', { username, password });
          if (response === 'success') {
            console.log('Login successful');
            window.myAPI.send('login-success'); // Use window.myAPI to send the event
          } else {
            console.log('Login failed');
            // Show error message or take appropriate action
          }
        } catch (error) {
          console.error('Error occurred during login:', error);
          // Handle the error, show an error message, etc.
        }
      });

      // Listen for the 'login-success' event using the exposed function
      window.myAPI.onLoginSuccess(() => {
        console.log('Login success event received');
        const attendanceScript = document.createElement('script');
        attendanceScript.src = 'attendancechecker.js';
        attendanceScript.onload = () => {
          console.log('Attendance checker script loaded.');
          // Now you can perform your attendance checking logic
        };
        document.body.appendChild(attendanceScript);
      });
    }
  </script>
</body>

</html>

preload.js代码 #

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('myAPI', {
  onLoginSuccess: (listener) => {
    ipcRenderer.on('login-success', listener);
  },
});

main.js中login处理方法 #

ipcMain.handle('login', (event, loginData) => {
  const { username, password } = loginData;
  // Perform your login logic here
  const isValidUser = true;

  if (isValidUser) {
    // If the login is successful, load the main app page
    mainWindow.loadURL('http:some_url/?access_token=my_token');
    mainWindow.show();
    console.log("success event retured");
    return 'success';
  } else {
    // If the login fails, show an error or take appropriate action
    console.log("failure event retured");
    return 'failure';
  }
});

BrowserWindow配置 #

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      webSecurity: false,
      preload: path.join(__dirname, 'preload.js'),
      
    },
  });

问题根源与解决方案 #

1. 核心原因 #

require is not defined的本质原因：

• BrowserWindow配置中nodeIntegration: false（Electron安全默认值），渲染进程无法直接调用Node.js的require
• index.html中手动引用了preload.js（<script src="preload.js"></script>），导致沙箱环境下重复加载脚本引发错误
• preload.js未暴露index.html中调用的invoke和send方法，触发隐性报错

2. 分步修复 #

（1）移除index.html中的preload引用

preload脚本由Electron自动加载，无需手动引入，删除该行：

<!-- 删除这行 -->
<script src="preload.js"></script>

（2）补全preload.js的API暴露

添加index.html中用到的invoke和send方法，同时优化监听销毁逻辑避免内存泄漏：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('myAPI', {
  invoke: (channel, data) => ipcRenderer.invoke(channel, data),
  send: (channel, data) => ipcRenderer.send(channel, data),
  onLoginSuccess: (listener) => {
    ipcRenderer.on('login-success', listener);
    return () => ipcRenderer.removeListener('login-success', listener);
  },
});

（3）优化主进程登录事件逻辑

登录成功后由主进程直接向渲染进程发送事件，避免渲染进程重复触发：

ipcMain.handle('login', async (event, loginData) => {
  const { username, password } = loginData;
  const isValidUser = true; // 替换为真实登录校验逻辑

  if (isValidUser) {
    await mainWindow.loadURL('http://some_url/?access_token=my_token');
    mainWindow.show();
    // 主进程主动发送登录成功事件
    mainWindow.webContents.send('login-success');
    console.log("success event returned");
    return 'success';
  } else {
    console.log("failure event returned");
    return 'failure';
  }
});

（4）处理注入脚本的require依赖

如果attendancechecker.js中使用了require，需将依赖的Node.js功能通过preload.js封装暴露，禁止在注入脚本中直接调用Node.js API。

3. 验证步骤 #

1. 启动应用后打开开发者工具（Ctrl+Shift+I）
2. 提交登录表单，检查控制台是否无require is not defined错误
3. 确认外部URL正常加载，attendancechecker.js可正常执行

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