启用contextIsolation=true后Nextron项目require未定义错误求助

我正在开发基于Electron + Next.js的Nextron桌面应用，希望启用contextIsolation=true。但启用该配置后，在渲染进程文件中引入第三方包（如import axios from 'axios'）时，出现了"require is not defined"错误，推测是Webpack配置问题，请求帮助解决此问题。

错误截图：

相关代码文件 #

Preload.js

import { contextBridge, ipcRenderer } from 'electron'
// 尝试过import和require两种方式

contextBridge.exposeInMainWorld('electronAPI', {
    setTitle: (title) => ipcRenderer.send('set-title', title)
})

Renderer.js（渲染进程组件）

import React, { useEffect } from 'react';
import Head from 'next/head';
import Link from 'next/link';

// 在这里引入axios就会报错
import axios from 'axios'
function Home() {
  useEffect(() => {
    const setButton = document.getElementById('btn')
    const titleInput = document.getElementById('title')
    setButton.addEventListener('click', () => {
      const title = titleInput.value
      window.electronAPI?.setTitle(title)
    });
    data()
  }, [])

  return (
    <React.Fragment>
      <Head>
        <title>Home - Nextron (with-typescript-tailwindcss)</title>
      </Head>
      Title: <input  id="title" />
      <button id="btn" type="button">Set</button>
    </React.Fragment>
  );
}
export default Home;

Background.ts（主进程）

import { app, ipcMain, BrowserWindow } from "electron";
import serve from "electron-serve";
import path from "path";
import { createWindow } from "./helpers";

const isProd: boolean = process.env.NODE_ENV === "production";

if (isProd) {
  serve({ directory: "app" });
} else {
  app.setPath("userData", `${app.getPath("userData")} (development)`);
}

(async () => {
  await app.whenReady();
  const mainWindow = createWindow("main", {
    width: 1000,
    height: 600,
    webPreferences: {
      nodeIntegration:true,
      contextIsolation: true,
      preload: path.join(__dirname, "preload.js"),
    },
  });

  if (isProd) {
    await mainWindow.loadURL("app://./home.html");
  } else {
    const port = process.argv[2];
    await mainWindow.loadURL(`http://localhost:${port}/home`);
    mainWindow.webContents.openDevTools();
  }
})();

ipcMain.on("set-title", (event, title) => {
  const webContents = event.sender;
  const win = BrowserWindow.fromWebContents(webContents);
  win.setTitle(title);
  console.log(title, "title");
});
app.on("window-all-closed", () => {
  app.quit();
});

NextConfig.js

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.target = 'electron-renderer';
      config.node = {
        __dirname: true,
      };
    }
   config.output.globalObject = 'this';
   return config;

  },
};

1. 调整Electron主进程的webPreferences配置 #

启用contextIsolation=true时，必须关闭nodeIntegration（设为false），因为上下文隔离和Node.js集成无法同时正常工作。修改Background.ts中的webPreferences：

webPreferences: {
  nodeIntegration: false, // 改为false
  contextIsolation: true,
  preload: path.join(__dirname, "preload.js"),
  enableRemoteModule: false, // 可选，新版本Electron已废弃remote模块，建议关闭
}

2. 修改Next.js的Webpack配置 #

当前webpack配置需调整，确保渲染进程模块被正确打包，避免依赖Node.js的require。更新NextConfig.js：

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 针对Electron渲染进程设置目标
      config.target = 'electron-renderer';
      // 禁用Node.js相关全局变量模拟，防止Webpack注入require
      config.node = {
        __dirname: false,
        __filename: false,
        global: false,
        process: false,
      };
    }
    // 确保全局对象正确指向window
    config.output.globalObject = 'window';
    return config;
  },
};

3. 确认第三方包兼容性 #

确保使用的第三方包（如axios）支持浏览器环境，axios本身兼容，但如果有依赖Node.js API的包，需通过preload脚本暴露必要API，或替换为浏览器兼容版本。

4. 验证preload脚本正确性 #

当前preload脚本写法正确，它的作用是通过contextBridge安全暴露Electron API到渲染进程，无需修改。注意不要在preload中随意引入第三方包，避免破坏上下文隔离。

5. 重启开发服务 #

修改配置后，重启Nextron开发服务，确保所有配置生效。

以上调整后，渲染进程中import axios from 'axios'即可正常使用，不会再出现"require is not defined"错误。

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