Electronjs - BrowserWindow 不是渲染器进程中的构造函数错误答案

【问题标题】：Electronjs - BrowserWindow is not a constructor error inside renderer processElectronjs - BrowserWindow 不是渲染器进程中的构造函数错误
【发布时间】：2021-11-28 01:45:08
【问题描述】：

节点版本：14.18.0

操作系统：Mac

这是我的 package.json 文件

{
  "name": "cryptic-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ./main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "14.1.0"
  }
}

这是我的 main.js

const electron = require('electron')
const path = require('path')
const shell = require('electron').shell
const { app, BrowserWindow, Menu } = electron

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      enableRemoteModule: true,
      nodeIntegration: true,
      contextIsolation: false,
    }
  })

  // and load the index.html of the app.
  const indexFilePath = path.join( __dirname, 'src/index.html')
  mainWindow.loadFile(indexFilePath)


  mainWindow.webContents.openDevTools()

  var menu = Menu.buildFromTemplate([
    {
      label: 'Menu',
      submenu: [
        { 
          label: 'Adjust notification value' 
        },
        { 
          label: 'CoinMarketCap',
          click() {
            shell.openExternal('http://www.coinmarketcap.com/')
          }
        },
        {
          type: 'separator'
        },
        { 
           label: 'Exit',
           click() {
             app.quit()
           }
        },
      ]
    }
  ])

  Menu.setApplicationMenu(menu)
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

这是我的 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    

    <link rel="stylesheet" href="../assets/css/main.css">
  </head>
  <body>
    <div class="row">
      <div id="price-container">
        <p class="subtext">Current BTC USD</p>
        <h1 id="price">Loading...</h1>
      </div>
      <div id="goal-container">
        <p>
          <img src="https://s3.amazonaws.com/coursetro/tutorial_images/up.svg">
          <span id="target-price">Choose a target price</span>
        </p>
      </div>
      <div class="right-container">
        <button id="notifyBtn">Notify me when...</button>
      </div>
    </div>

    <script src="./index.js"></script>
  </body>
</html>

这是我的 index.js 文件

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


console.log(electron)

const notifyBtn = document.getElementById('notifyBtn')

notifyBtn.addEventListener('click', function(e) {
  const modalPath = path.join('file://', __dirname, 'add.html')
  console.log("modalPath", modalPath)
  let win = new BrowserWindow({ width: 400, height: 200,  parent: top })
  win.on('close', function() {
    win = null
  })
  win.loadFile(modalPath)
  win.show()
})

这是 index.js 中的电子对象

我在渲染过程中得到 BrowserWindow is not a constructor 错误，我不确定是什么导致了这个问题。有人可以帮忙吗？

【问题讨论】：

您不能在渲染器进程中创建 BrowserWindow。只需要在主进程中使用
这能回答你的问题吗？ Electron.js 11.0.4 - BrowserWindow is not a contructor
感谢@pushkin，我正在使用电子 14，其中远程已弃用，如上述链接中所建议的那样。

标签： javascript node.js electron electron-builder

【解决方案1】：

这就是我解决这个问题的方法：- 由于我使用的是 electron > 14，因此远程资源在渲染器进程中不可用，并且不能由 lectron 模块提供。

为了让渲染器进程可以使用远程资源，我添加了这个模块。 @electron/remote

这就是我的 main.js 现在的样子

const remote = require('@electron/remote/main')
const electron = require('electron')
remote.initialize() // Intitialize

const path = require('path')
const shell = require('electron').shell
const { app, BrowserWindow, Menu } = electron

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      show: false,
    }
  })

  remote.enable(mainWindow.webContents) // Loads webcontents

  const indexFilePath = path.join( __dirname, 'src/index.html')
  mainWindow.loadFile(indexFilePath)

  mainWindow.webContents.openDevTools()

  var menu = Menu.buildFromTemplate([
    {
      label: 'Menu',
      submenu: [
        { 
          label: 'Adjust notification value' 
        },
        { 
          label: 'CoinMarketCap',
          click() {
            shell.openExternal('http://www.coinmarketcap.com/')
          }
        },
        {
          type: 'separator'
        },
        { 
           label: 'Exit',
           click() {
             app.quit()
           }
        },
      ]
    }
  ])

  Menu.setApplicationMenu(menu)
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

现在我可以像这样访问我的 index.js 文件中的浏览器窗口

const { BrowserWindow } = require('@electron/remote')

参考链接：- 关于网页内容，read here

【讨论】：