Electron14将BrowserWindow抽离到单独文件后触发TypeError问题咨询

问题根因 #

TypeError: MainWindow is not a constructor报错与BrowserWindow本身的特殊处理逻辑无关，问题出在CommonJS模块导出规则：你的./app/main_window.js文件仅定义了MainWindow类，没有对外导出该类，导致入口文件require('./app/main_window')拿到的是空对象，无法作为构造函数实例化。

修复方案 #

仅需在./app/main_window.js文件末尾添加模块导出语句即可，修正后的完整代码如下：

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

class MainWindow extends BrowserWindow {
    constructor() {
        super({                                 
            width: 300,
            height: 500,                       
            webPreferences: {
                nodeIntegration: true,          
                contextIsolation: false,        
                enableRemoteModule: true,       
            }
        });
    }
};
// 新增导出语句
module.exports = MainWindow;

可选优化建议 #

你可以把页面加载逻辑也封装到MainWindow类内部，进一步简化入口文件的代码：

• 在MainWindow的constructor中super()执行完成后添加加载逻辑，注意调整路径适配main_window.js的目录层级：

  constructor() {
      super({/* 原有配置 */});
      this.loadURL(`file://${__dirname}/../src/index.html`);
  }
  

• 入口文件实例化后无需再单独调用loadURL：

  app.on('ready', () => {
      mainWindow = new MainWindow();
  });
  

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