启用contextIsolation=true时Nextron渲染进程导入axios报require未定义

问题原因 #

开启contextIsolation: true后，Electron渲染进程与Node.js环境完全隔离，无法直接使用require等Node.js API。当前webpack配置将渲染进程打包目标设为electron-renderer，导致axios被打包成依赖Node.js模块的形式，在无Node环境的渲染进程中触发错误。

解决方案 #

方案一：调整webpack配置适配浏览器环境 #

修改项目根目录下的NextConfig.js，将渲染进程的打包目标改为web，并禁用Node.js相关模拟变量：

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 切换为浏览器环境打包目标
      config.target = 'web';
      // 禁用Node.js相关变量的模拟，避免webpack注入require
      config.node = {
        __dirname: false,
        __filename: false,
        global: false,
        process: false,
      };
    }
    config.output.globalObject = 'this';
    return config;
  },
};

修改后重新启动项目，即可在Renderer.js中正常import axios from 'axios'。

方案二：通过CDN直接引入axios #

无需webpack打包，直接在页面中引入CDN版本的axios：
在Renderer.js的Head标签内添加CDN脚本：

<Head>
  <title>Home - Nextron (with-typescript-tailwindcss)</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</Head>

之后在代码中直接使用window.axios发起请求，无需import：

// 移除import axios from 'axios'
useEffect(() => {
  // 使用CDN提供的axios
  window.axios.get('https://example.com/api')
    .then(res => console.log(res.data))
    .catch(err => console.error(err));
  // ...其他逻辑
}, [])

方案三：通过主进程代理网络请求（安全合规） #

遵循Electron安全最佳实践，通过preload暴露API，由主进程处理网络请求：

1. 修改Preload.js，添加请求代理API：

import { contextBridge, ipcRenderer } from 'electron'

contextBridge.exposeInMainWorld('electronAPI', {
    setTitle: (title) => ipcRenderer.send('set-title', title),
    fetchData: (url, options) => ipcRenderer.invoke('fetch-data', url, options)
})

2. 修改Background.ts，在主进程中实现请求逻辑：

import axios from 'axios';

// ...原有代码

// 处理渲染进程的请求调用
ipcMain.handle('fetch-data', async (event, url, options) => {
  try {
    const response = await axios(url, options);
    return response.data;
  } catch (error) {
    throw error;
  }
});

3. 在Renderer.js中使用代理API：

// 移除import axios from 'axios'
useEffect(() => {
  const fetchData = async () => {
    try {
      const data = await window.electronAPI.fetchData('https://example.com/api');
      console.log(data);
    } catch (err) {
      console.error(err);
    }
  };
  fetchData();
  // ...其他逻辑
}, [])

方案选择 #

• 方案一：适合希望在渲染进程直接使用axios，且无需严格安全控制的场景。
• 方案二：适合快速验证或小型项目，配置成本最低。
• 方案三：符合Electron安全规范，适合对安全性、权限控制有要求的项目。

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