Blank screen on first load (I'm probably doing something wrong)

First of all: Thank you for this project 😃 Second of all: I’m new to Electron (this being my second app) so I’m most likely doing something wrong.

npm: 7.5.3, node 15.8.0

I ran into some road blocks trying to start a fresh project. All below is of a vanilla checkout from the template (I’ve done no changes yet):

The first was that @doyensec/electronegativity ^1.8.1 fails to install properly on OS X[1] (at least my version). Given that it’s only a day old it’s probably some compatibility. I resolved it by removing electronegativity from package.json and installing 1.8.0 globally. It will probably sort itself out since it’s a downstream issue.

However, when I run ´npm run dev` I get the following in the electron window:

While it takes the 10 seconds for webpack to compile. If I then refresh the page (CTRL+R) after it’s been compiled it runs like a charm.

Given that I am new to Electron I’m not sure if this is intended behaviour or not 😃

[1]:

WIN-HVPUU8BOK0U:test bivald$ npm install  @doyensec/electronegativity@1.8.1
npm ERR! code ENOENT
npm ERR! syscall chmod
npm ERR! path /Users/xxxx/test/node_modules/@doyensec/electronegativity/dist/index.js
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, chmod '/Users/.../node_modules/@doyensec/electronegativity/dist/index.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

[2]

secure-electron-template-master myusername$ npm run dev

> secure-electron-template@9.2.0 dev
> concurrently --success first "npm run dev-server" "cross-env NODE_ENV=development electron ." -k

[0] 
[0] > secure-electron-template@9.2.0 dev-server
[0] > cross-env NODE_ENV=development webpack serve --config ./webpack.development.js
[0] 
[1] (node:87131) ExtensionLoadWarning: Warnings loading extension at /Users/myusername/Library/Application Support/secure-electron-template/extensions/lmhkpmbekcpmknklioeibfkpmmfibljd: Unrecognized manifest key 'commands'. Unrecognized manifest key 'homepage_url'. Unrecognized manifest key 'page_action'. Unrecognized manifest key 'short_name'. Unrecognized manifest key 'update_url'. Permission 'notifications' is unknown or URL pattern is malformed. Permission 'contextMenus' is unknown or URL pattern is malformed. Permission 'tabs' 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. 
[1] (node:87131) ExtensionLoadWarning: Warnings loading extension at /Users/myusername/Library/Application Support/secure-electron-template/extensions/fmkadmapgofadopljbjfkapdkoienihi: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'minimum_chrome_version'. Unrecognized manifest key 'update_url'. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system. 
[1] Added Extension:  React Developer Tools
[1] [87131:0211/150957.101784:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/150957.102619:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[0] ℹ ｢wds｣: Project is running at http://localhost:40992/
[0] ℹ ｢wds｣: webpack output is served from /
[0] ℹ ｢wds｣: Content not from webpack is served from /Users/myusername/Downloads/secure-electron-template-master/app/dist
[1] [87131:0211/150958.309152:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/150959.364427:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151000.848240:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151001.417003:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151002.417035:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151003.547594:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[0] ℹ ｢wdm｣: asset bundle.js 4.03 MiB [emitted] (name: main) 1 related asset
[0] asset main.css 238 KiB [emitted] (name: main) 1 related asset
[0] asset index.html 517 bytes [emitted]
[0] Entrypoint main 4.26 MiB (4.68 MiB) = main.css 238 KiB bundle.js 4.03 MiB 2 auxiliary assets
[0] runtime modules 28.9 KiB 16 modules
[0] modules by path ./node_modules/ 3.71 MiB (javascript) 237 KiB (css/mini-extract)
[0]   javascript modules 3.69 MiB 285 modules
[0]   json modules 12.8 KiB
[0]     modules by path ./node_modules/browserify-sign/browser/*.json 2.23 KiB 2 modules
[0]   css ./node_modules/css-loader/dist/cjs.js!./node_modules/bulma/css/bulma.css 237 KiB [code generated]
[0] modules by path ./app/ 27.9 KiB (javascript) 585 bytes (css/mini-extract)
[0]   javascript modules 27.8 KiB 17 modules
[0]   css modules 585 bytes 3 modules
[0]   ./app/src/constants/routes.json 140 bytes [built] [code generated]
[0] optional modules 30 bytes [optional]
[0]   buffer (ignored) 15 bytes [optional] [built] [code generated]
[0]   crypto (ignored) 15 bytes [optional] [built] [code generated]
[0] util (ignored) 15 bytes [built] [code generated]
[0] webpack 5.21.1 compiled successfully in 6243 ms
[0] ℹ ｢wdm｣: Compiled successfully.
[1] [87131:0211/151004.355034:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151005.551551:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151006.451596:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151007.408898:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151008.721513:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151009.668266:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151010.695874:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151011.681174:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151012.684542:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151013.686433:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151014.355381:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151015.851809:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151016.355426:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151017.355711:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151018.355957:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151019.168291:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151020.421169:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)

[reZach]

@netpoetica I’ve pushed a new update to the template, can you get the latest? I had thought loading contents over https was more secure for this template, but apparently I too experienced this issue where refreshing does not fix anything.

The revert seems to have fixed it (back to where it was).

[reZach]

@bivald / @Slapbox / @netpoetica / @twabbott I’ve made changes to the template so that the app (when loaded in development, the only configuration we see this issue due to the webpack dev server) is guaranteed to load after webpack is finished. Thanks to this comment, I’ve made changes which you can view the commit of files you need to change - OR if you simply get the latest version/release you should be set to go.

Please re-open if you are still having problems. I was able to follow the repro steps by @twabbott and am not able to replicate the issue any longer.

1. Delete node_modules
2. npm i
3. npm run dev
4. Console output:

PS C:\Users\me\source\repos\secure-electron-template> npm run dev

> secure-electron-template@9.4.0 dev
> concurrently --success first "node dev-scripts/prepareDevServer.js" "node dev-scripts/launchDevServer.js" -k

[0] Preparing webpack development server.
[1] Webpack development server is ready, launching Electron app.