Blank window when serving Electron app Ubuntu 20.04

[bryan-gilbert]

Blank window when serving app. Clean new install of Vue 2 (no router, no veux, etc) with electron builder on fresh Ubuntu 20.4 container

To Reproduce Parallels 16 for Mac New Ubuntu 20.4 container

    4  sudo apt update
    5  sudo apt install -y curl
    6  sudo apt install -y git
    7  curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
    8  sudo apt install -y nodejs
    9  sudo apt install -y npm
   13  sudo ln -s /usr/bin/python3 /usr/bin/python
   14  yarn global add @vue/cli
   21  vue --version
   31  vue create helloworld
# accept the basic Vue 2 with nothing adding
   32  cd helloworld/
   33  yarn serve
   34  vue add electron-builder
# choose Electron 12
   36  export ELECTRON_ENABLE_LOGGING=1
   37  yarn electron:serve

(Note that not all of the above are needed for the Vue app but I'm providing the exact steps I took to create the problem.)

Expected behavior The electron app to open and display the Vue contents

Screenshots

Environment (please complete the following information): Versions

~/helloworld$ yarn versions
yarn versions v1.22.5
{
  yarn: '1.22.5',
  helloworld: '0.1.0',
  node: '16.4.1',
  v8: '9.1.269.36-node.14',
  uv: '1.41.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.17.1',
  modules: '93',
  nghttp2: '1.42.0',
  napi: '8',
  llhttp: '6.0.2',
  openssl: '1.1.1k+quic',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}

From package.json

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "electron": "^12.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-template-compiler": "^2.6.11"
  },

Errors and warnings from terminal

 INFO  Launching Electron...
(node:167088) ExtensionLoadWarning: Warnings loading extension at /home/parallels/.config/helloworld/extensions/nhdogjmejiglipccpnnnanhbledajbpd:
  Unrecognized manifest key 'browser_action'.
  Unrecognized manifest key 'update_url'.
  Permission 'contextMenus' is unknown or URL pattern is malformed.
  Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.
(Use `electron --trace-warnings ...` to show where the warning was created)
    at chrome-extension://dkjannnnnhmlliecgmohkjpglfdmkicm/build/background.js:1:2246", source: chrome-extension://dkjannnnnhmlliecgmohkjpglfdmkicm/_generated_background_page.html (0)

[bryan-gilbert]

When I remove "electron-devtools-installer": "^3.1.0", from package.json the same problem happens (same warning) and the screen is still blank BUT the black bar across the top left is gone.

[edenhermelin]

@bryan-gilbert there is a bug with Electron over paralls VM that may cause the issue you are facing. Try to disable hardware acceleration on your electron main file

[bryan-gilbert]

@edenhermelin thank you for this suggestion. I'm having trouble locating more information. Especially about the bug because I'll need to document this in my project. Can you please suggest a site or keywords I can use to search for this? Or a link? Thanks.

[edenhermelin]

sure, basically in the index file you should add the following:

    app.disableHardwareAcceleration();

also, in here you can find some more relevant information: https://github.com/electron/electron/issues/22119

[bryan-gilbert]

I found something here https://forum.parallels.com/threads/npm-electron-gui-white-canvas.353536/ Specifically, a post by Evan123:

Hi -- I just had a response back from Parallels Support about my similar case. Try this (with hardware acceleration enabled):

1. Make sure that the virtual machine is shut down (Actions > Shut Down). If it is in a suspended state, please run it and then shut down (Actions > Shut Down).
2. Go to the virtual machine configuration (see: https://kb.parallels.com/117287 ) and click "Hardware > Boot Order > Advanced Settings > Boot flags".
3. Paste the following text in the "Boot flags" field:

video.gl3=2

4. Run the virtual machine and see if the issue persists.

This fixed the problem for me. Parallels Support advised that their developers are working on a permanent fix.