The window fails to load properly after building, but functions perfectly while in development server mode

My application is not displaying a window after it's built, but it works perfectly fine when I execute npm run serve

Even though there is a process running in the task manager, the same issue persists if I try using the installer. I'm not receiving any error or warning messages from electron-builder.

This is the content of background.js:

import { app, protocol, dialog, BrowserWindow, ipcMain, shell } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
import path from 'path'
import fs from 'fs'
import childProcess from 'child_process'
import ncp from 'ncp'

const isDevelopment = process.env.NODE_ENV !== 'production'

// Keeping a global reference of the window object to prevent automatic closure
let win

// Scheme registration before app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

function createWindow () {
  // Creating the browser window.
  win = new BrowserWindow({
    width: 1200,
    height: 600,
    resizable: false,
    maximizable: false,
    frame: false,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      preload: path.join(__dirname, 'preload.js')
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Loading the dev server URL during development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Loading index.html in non-development mode
    win.loadURL(path.join(__dirname,'index.html'))
  }

  win.on('closed', () => {
    win = null
  })
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

I have attempted the suggested solutions mentioned here and here without success.

The framework I am using is electron-vue. For further context, you can access the complete code here.

Answer №1

The problem was ultimately traced back to the code within the app.on('ready') function. It's important to ensure that any additional code is placed after the window creation to prevent this issue from happening.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

'Error: Points is not a valid function' encountered in Node.js

While attempting to run the code below in Node.js, I encountered the following error. The code consists of three files: the dao file which connects to a MongoDB database, the server file, and the index1 file. var mongoose = require('mongoose'); ...

Enhanced jQuery implementation for hiding elements

I encountered a peculiar issue where jQuery's .is(':hidden') function wrongly returned true for an element that visibly displayed content. You can see the problem demonstrated in this fiddle. The :hidden pseudo checks both offsetWidth and o ...

Sending arrays from HTML table rows to a JavaScript function

When developing a dynamic table using Javascript, I am able to add rows programmatically with the following function: function addrow(tableid) { var tablename = document.getElementById(tableid); var rows = tablename.rows.length; if (rows < ...

Angular Datepicker MinDate function prevents selection of dates "behind" by one

I've encountered an issue with the Angular Bootstrap Datepicker where I'm setting the min-date attribute as follows: <input type="text" class="" uib-datepicker-popup="MM/dd/yyyy" show-button-bar="false" ng-model="vm.date" ng-change= ...

Creating a unified object from faceted results in MongoDB: Streamlining keys and values for easy access

I'm currently working on a query to determine the equipment required by teams at specific times. By analyzing the list of teams and their allocated equipment, I aim to calculate the total equipment in use at any given moment. The team data looks like ...

Troubleshooting Vue 3 Options API custom element with non-functional Bootstrap js files

Having trouble incorporating Bootstrap 5 into a Vue 3 Options Api custom element? Check out my setup below: import { defineCustomElement } from 'vue' import 'bootstrap/dist/js/bootstrap.bundle' import App from './App.ce.vue' ...

The count of bits is not producing the anticipated result

Attempting to tackle the challenge of Counting Bits using JavaScript, which involves determining the number of set bits for all numbers from 0 to N, storing them in an array, and returning the result Let me provide an explanation Input: n = 5 ...

The play button in the customized React AudioPlayer may sometimes need to be tapped twice in order to start

I've encountered an issue with my simple audio player (React/Vite) that transitions to the next track automatically or manually. Everything seems to be functioning correctly except for the initial press of the play button. The player opens with the pa ...

Is it normal for the protractor cucumber tests to pass without observing any browser interactions taking place?

Having recently started using protractor cucumber, I have created the following feature. Upon launching protractor protractor.conf.js, the browser opens and immediately closes, displaying that my tests have passed. Is this the expected testing behavior? Sh ...

Error: Attempting to access the 'getProvider' property of an undefined variable

I am encountering an error that says "property of undefined (reading getProvider)" while deploying my function to Firebase. I am currently trying to figure out how to obtain the auth instance. When I attempt to use firebase.auth, it results in another er ...

Tips for downsizing a large image to fit into a smaller area

I am working on a page layout that features a small circular navigation element. However, I am facing an issue with fitting a large picture within the boundaries of this small circle without it overflowing and causing alignment problems. Does anyone have ...

Pass a link by pressing Enter

Although the title may seem odd, I'll explain what I'm attempting to accomplish. I have a login form with two input fields, a checkbox, and a submit button. You can view a screenshot of it here: The terms of use appear in a popup where users can ...

Content sliding to the left due to modal prompt

I've searched through various questions and answers but haven't been able to resolve this issue. There's a modal on my page that is causing the content to shift slightly to the left. I've created a sample fiddle, although it doesn&apo ...

Tips for seamlessly creating the animation of sketching a line

Currently, I am working on a project that involves around 40 curved lines, each containing 30 to 200 points. Despite using BufferGeometry and setDrawRange() to draw all the lines equally, only the line with over 200 points appears smooth. I attempted using ...

Swap Text Inside String - JS

I have a challenge where I need to extract an ID from an HTML element and then replace part of the extracted word. For instance: HTML <input type="checkbox" id="facebookCheckbox"></div> JavaScript var x = document.getElementById("facebookCh ...

AngularJS: How to accurately retrieve the offsetTop value upon page initialization

Issue: I am facing difficulty in obtaining the accurate top offset value of a DOM element immediately after the page has loaded. In the project I am currently working on, it is essential to retrieve the offsetTop value of various DOM elements as soon as ...

What is the best method for capturing the line delimiter character(s) in a manner that is not dependent on the platform being

When using the regular expression /^\S+\s*$/m.exec("a\nb\n")[0], it only returns "a" without including the line delimiter, even though \s should match \n. After some experimentation, I discovered that modifying the expression ...

Nested ng-repeat for dynamic variable rendering

I am facing an issue where I have a nested ng-repeat directive. I am attempting to create a dynamic second ng-repeat, using a key from the first one, but the current syntax is not working. Is there a different way to achieve this? Perhaps a different nota ...

What is the process for integrating php script within javascript?

Is it possible to incorporate php scripts into javascript[1] in the same manner as it can be done in html[2]? server.php: <?php echo 'hello World'; ?> client.js (or client.php if needed): function foo() { var i = <?php include ...

Exploring Laravel's method for retrieving data from multiple tables in the controller

In an effort to make my jQuery call more dynamic, I have a controller with the following method: public function api(Request $request , $project_id){ return Program::where('project_id',$project_id)->get(); } This results in: [{"id":178," ...