Built electron app only prints json to screen - electron

Question

I just wrote my first Electron app. Now I'm trying to build it through electron-packager. My package.json looks like this:
{
"name": "pixelcast",
"productName": "pixelcast",
"version": "0.0.1",
"author": "Wesley Peeters <wesley#youngones.works>",
"description": "Caster",
"license": null,
"main": "./dist/electron/main.js",
"scripts": {
"build": "node .electron-vue/build.js",
"build:darwin": "cross-env BUILD_TARGET=darwin node .electron-vue/build.js",
"build:linux": "cross-env BUILD_TARGET=linux node .electron-vue/build.js",
"build:mas": "cross-env BUILD_TARGET=mas node .electron-vue/build.js",
"build:win32": "cross-env BUILD_TARGET=win32 node .electron-vue/build.js",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "node .electron-vue/dev-runner.js",
"pack": "build --dir",
"dist": "build",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"postinstall": ""
},
"build": {
"appId": "nl.pixelservers.caster",
"win": {
"icon": "build/test.png",
"target": [
"portable"
]
}
},
}
this all works fine, but when I open the built app, this is my result:
How can I go about debugging an issue like this?
thanks.

Answer 1

(This might be more of a "comment" than an answer but I couldn't add the detail and image in comment)
It is hard to say without knowing how your project is structured. I use both electron-packager and electron-builder. The "dist" directory is solely for output so it is weird to me that you are referencing a script in that directory:
"main": "./dist/electron/main.js",
Given my project structure (shown below), I have "main.js" at the same level as "project.json" so:
"main": "main.js",
But maybe you have your project structured in a way which supports the way you are referencing "main.js"? . I'm using only electron-packager in the project below so no "dist" folder – I have the "release-builds" folder instead. My scripts for building look like this:
"package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --asar --prune=true --out=release-builds",
"package-win": "electron-packager . --overwrite --platform=win32 --arch=ia32 --asar --prune=true --out=release-builds"