electron-forge: npm run make creates an app with a white screen - electron

Question

I created a template with npx create-electron-app my-new-app --template=typescript-webpack (from https://www.electronforge.io/templates/typescript-+-webpack-template). I adapted the package.json like this (in order to get rid of an error):
"plugins": [
{
"name": "#electron-forge/plugin-webpack",
"config": {
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/index.html",
"js": "./src/renderer.ts",
"name": "main_window",
"preload": {
"js": "./src/preload.ts"
}
}
]
}
}
}
]
When I run npm run make, electron forge builds an app that has a white screen(missing all the content).
Update: after installing npm install -g #electron-forge/cli#beta
and running electron-forge make instead of npm run make I get this:
✔ Checking your system
✖ Resolving Forge Config
Electron forge was terminated:
Expected plugin to either be a plugin instance or [string, object] but found [object Object]

Answer 1

This seems to be a bug in the latest #electron-forge version.
Please follow the below steps to resolve this issue.
Delete the below files and folders
package-lock.json
node_modules
.webpack
Change all the #electron-forge versions in packages.json to 6.0.0-beta.63.
"devDependencies": {
"#electron-forge/cli": "6.0.0-beta.63",
"#electron-forge/maker-deb": "6.0.0-beta.63",
"#electron-forge/maker-rpm": "6.0.0-beta.63",
"#electron-forge/maker-squirrel": "6.0.0-beta.63",
"#electron-forge/maker-zip": "6.0.0-beta.63",
"#electron-forge/plugin-webpack": "6.0.0-beta.63",
Make sure you do not have ^ in front of the version numbering. Or else, it will fetch the latest version.
Modify the plugins section as shown below.
"plugins": [
[
"#electron-forge/plugin-webpack",
{
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [{
"name": "main_window",
"html": "./src/index.html",
"js": "./src/renderer.ts",
"preload": {
"js": "./src/preload.ts"
}
}]
}
}
]
]
Now install the packages
npm install
or, if you use yarn
yarn install
Now you should be able to see the page when you do an npm run make.