Electron+Next.js(Nextron)应用新窗口打开页面报错：global未定义

错误详情 #

触发的核心错误：

Uncaught ReferenceError: global is not defined

完整错误栈：

react-refresh.js?ts=1665849319975:10 Uncaught ReferenceError: global is not defined
    at react-refresh.js?ts=1665849319975:10:1
(anonymous) @ react-refresh.js?ts=1665849319975:10
webpack.js?ts=1665849319975:712 Uncaught ReferenceError: global is not defined
    at webpack.js?ts=1665849319975:712:12
    at webpack.js?ts=1665849319975:1209:13
    at webpack.js?ts=1665849319975:1220:12
(anonymous) @ webpack.js?ts=1665849319975:712
(anonymous) @ webpack.js?ts=1665849319975:1209
(anonymous) @ webpack.js?ts=1665849319975:1220
main.js?ts=1665849319975:9 Uncaught ReferenceError: global is not defined
    at main.js?ts=1665849319975:9:1
(anonymous) @ main.js?ts=1665849319975:9
_app.js?ts=1665849319975:9 Uncaught ReferenceError: global is not defined
    at _app.js?ts=1665849319975:9:1
(anonymous) @ _app.js?ts=1665849319975:9
camera.js?ts=1665849319975:9 Uncaught ReferenceError: global is not defined
    at camera.js?ts=1665849319975:9:1

尝试过的实现方式 #

方式1：使用Next.js Link的target="_blank" #

import Link from 'next/link'
export default function Item(){
  return (
    <Link href="/camera">
      <a target="_blank">
        item
      </a>
    </Link>
  )
}

方式2：手动调用window.open #

import Link from 'next/link'
export default function Item(){
  return (
    <Link href="/camera">
      <a
        onClick={(e) => {
            window.open(
              "/camera",
              "_blank",
              "top=500,left=200"
            )
          }}>item
      </a>
    </Link>
  )
}

两种写法均触发相同错误。

解决方案 #

方案1：为渲染进程添加global对象Polyfill #

在渲染进程的入口文件（如pages/_app.js）顶部添加以下代码，补上Electron渲染进程缺失的global对象：

if (typeof global === 'undefined') {
  window.global = window;
}

方案2：修改Next.js Webpack配置 #

在next.config.js中配置Webpack，为客户端环境注入global变量：

module.exports = {
  webpack: (config, { isServer }) => {
    // 仅在客户端渲染时配置
    if (!isServer) {
      config.node = {
        global: true
      };
    }
    return config;
  }
};

方案3：使用Electron原生BrowserWindow创建窗口（推荐） #

更符合Electron架构的方式是通过主进程创建新窗口，而非依赖浏览器的window.open：

1. 主进程代码（如main/background.js）：

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

// 创建相机窗口的函数
function createCameraWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
      // 若使用新版本Electron，建议保持contextIsolation为true，通过preload脚本暴露API
    }
  });

  // 根据开发/生产环境加载对应页面
  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://localhost:3000/camera');
  } else {
    win.loadURL(`file://${__dirname}/../renderer/out/camera.html`);
  }
}

// 监听渲染进程的IPC请求
ipcMain.on('open-camera-window', createCameraWindow);

2. 渲染进程组件代码：

import { ipcRenderer } from 'electron';

export default function Item() {
  const handleOpenCamera = () => {
    ipcRenderer.send('open-camera-window');
  };

  return (
    <button onClick={handleOpenCamera}>打开相机页面</button>
  );
}

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