Electronjs - BrowserWindow 不是渲染器進程中的構造函數錯誤

Question

節點版本：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 不是構造函數錯誤，我不確定是什么導致了這個問題。 有人可以幫忙嗎？

Answer 1

這就是我解決這個問題的方法：- 因為我使用的是 Electron > 14，所以遠程資源在渲染器進程中不可用，並且不能被 lectron 模塊使用。

為了使渲染器進程可以使用遠程資源，我添加了這個模塊。 @電子/遠程

然后這就是我的 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')

參考鏈接：- 關於網頁內容，請在此處閱讀

Electronjs - BrowserWindow 不是渲染器進程中的構造函數錯誤

問題描述

1 個解決方案

解決方案1
0 2021-10-10 14:00:42

Electronjs - BrowserWindow 不是渲染器進程中的構造函數錯誤

問題描述

1 個解決方案

解決方案1 0 2021-10-10 14:00:42

解決方案1
0 2021-10-10 14:00:42