search

nklayman / vue-cli-plugin-electron-builder

Easily Build Your Vue.js App For Desktop With Electron
https://nklayman.github.io/vue-cli-plugin-electron-builder/
MIT License
4.12k stars 278 forks source link

Application entry file "electron/bundled/background.js" in the "....app.asar" does not exist #188

Closed pksunkara closed 5 years ago

pksunkara commented 5 years ago

Describe the bug Looks like there is some misconfiguration happening with electron-builder

To Reproduce Run the following:

git clone git://github.com/osapps/dotsync
cd dotsync
yarn
cd packages/app
npm run electron:build

Expected behavior Building should work

Screenshots


 INFO  Building app with electron-builder:
  • electron-builder version=20.38.5
  • writing effective config file=electron/builder-effective-config.yaml
  • no native production dependencies
  • packaging       platform=darwin arch=x64 electron=3.1.3 appOutDir=electron/mac
  • default Electron icon is used reason=application icon is not set
 ERROR  Error: Application entry file "electron/bundled/background.js" in the "/Users/pksunkara/Coding/osapps/dotsync/packages/app/electron/mac/Dotsync.app/Contents/Resources/app.asar" does not exist. Seems like a wrong configuration.
Error: Application entry file "electron/bundled/background.js" in the "/Users/pksunkara/Coding/osapps/dotsync/packages/app/electron/mac/Dotsync.app/Contents/Resources/app.asar" does not exist. Seems like a wrong configuration.
    at error (/Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/out/asar/asarFileChecker.js:44:14)
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/asar/asarFileChecker.ts:30:4
From previous event:
    at _checkFileInArchive (/Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/asar/asarFileChecker.ts:36:17)
    at checkFileInArchive (/Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/out/asar/asarFileChecker.js:40:30)
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/platformPackager.ts:409:13
    at Generator.next (<anonymous>)
From previous event:
    at MacPackager.checkFileInPackage (/Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/platformPackager.ts:406:110)
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/platformPackager.ts:460:16
    at Generator.next (<anonymous>)
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/graceful-fs/polyfills.js:285:20
    at FSReqWrap.oncomplete (fs.js:159:5)
From previous event:
    at MacPackager.sanityCheckPackage (/Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/platformPackager.ts:446:92)
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/platformPackager.ts:249:16
    at Generator.next (<anonymous>)
    at runCallback (timers.js:696:18)
    at tryOnImmediate (timers.js:667:5)
    at processImmediate (timers.js:649:5)
    at process.topLevelDomainCallback (domain.js:121:23)
From previous event:
    at MacPackager.doPack (/Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/platformPackager.ts:167:165)
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/macPackager.ts:88:63
    at Generator.next (<anonymous>)
From previous event:
    at MacPackager.pack (/Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/macPackager.ts:80:95)
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/packager.ts:430:24
    at Generator.next (<anonymous>)
    at xfs.stat (/Users/pksunkara/Coding/osapps/dotsync/node_modules/fs-extra/lib/mkdirs/mkdirs.js:56:16)
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/graceful-fs/polyfills.js:285:20
    at FSReqWrap.oncomplete (fs.js:159:5)
From previous event:
    at Packager.doBuild (/Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/packager.ts:396:24)
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/packager.ts:366:57
    at Generator.next (<anonymous>)
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/graceful-fs/graceful-fs.js:111:16
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/graceful-fs/graceful-fs.js:45:10
    at FSReqWrap.oncomplete (fs.js:145:20)
From previous event:
    at Packager._build (/Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/packager.ts:335:133)
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/packager.ts:331:23
    at Generator.next (<anonymous>)
    at runCallback (timers.js:696:18)
    at tryOnImmediate (timers.js:667:5)
    at processImmediate (timers.js:649:5)
    at process.topLevelDomainCallback (domain.js:121:23)
From previous event:
    at Packager.build (/Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/packager.ts:288:14)
    at build (/Users/pksunkara/Coding/osapps/dotsync/node_modules/app-builder-lib/src/index.ts:59:28)
    at Object.build (/Users/pksunkara/Coding/osapps/dotsync/node_modules/electron-builder/src/builder.ts:227:10)
    at buildApp (/Users/pksunkara/Coding/osapps/dotsync/node_modules/vue-cli-plugin-electron-builder/index.js:176:14)
    at bundle.run (/Users/pksunkara/Coding/osapps/dotsync/node_modules/vue-cli-plugin-electron-builder/index.js:158:15)
    at finalCallback (/Users/pksunkara/Coding/osapps/dotsync/node_modules/vue-cli-plugin-electron-builder/node_modules/webpack/lib/Compiler.js:220:39)
    at hooks.done.callAsync.err (/Users/pksunkara/Coding/osapps/dotsync/node_modules/vue-cli-plugin-electron-builder/node_modules/webpack/lib/Compiler.js:269:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/pksunkara/Coding/osapps/dotsync/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/pksunkara/Coding/osapps/dotsync/node_modules/tapable/lib/Hook.js:154:20)
    at emitRecords.err (/Users/pksunkara/Coding/osapps/dotsync/node_modules/vue-cli-plugin-electron-builder/node_modules/webpack/lib/Compiler.js:267:22)
    at Compiler.emitRecords (/Users/pksunkara/Coding/osapps/dotsync/node_modules/vue-cli-plugin-electron-builder/node_modules/webpack/lib/Compiler.js:449:39)
    at emitAssets.err (/Users/pksunkara/Coding/osapps/dotsync/node_modules/vue-cli-plugin-electron-builder/node_modules/webpack/lib/Compiler.js:261:10)
    at hooks.afterEmit.callAsync.err (/Users/pksunkara/Coding/osapps/dotsync/node_modules/vue-cli-plugin-electron-builder/node_modules/webpack/lib/Compiler.js:435:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/pksunkara/Coding/osapps/dotsync/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/pksunkara/Coding/osapps/dotsync/node_modules/tapable/lib/Hook.js:154:20)
    at asyncLib.forEachLimit.err (/Users/pksunkara/Coding/osapps/dotsync/node_modules/vue-cli-plugin-electron-builder/node_modules/webpack/lib/Compiler.js:432:27)
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/neo-async/async.js:2813:7
    at done (/Users/pksunkara/Coding/osapps/dotsync/node_modules/neo-async/async.js:3521:9)
    at /Users/pksunkara/Coding/osapps/dotsync/node_modules/graceful-fs/graceful-fs.js:45:10
    at FSReqWrap.oncomplete (fs.js:145:20)

Environment (please complete the following information):

Additional context Add any other context about the problem here.

nklayman commented 5 years ago

Change the main field of your package.json to background.js.

pksunkara commented 5 years ago

Hey, that helped with the build but the electron:serve doesn't launch electron anymore. If I change it back to electron/bundled/background.js, serve works again.

nklayman commented 5 years ago

Both electron:serve and electron:build work fine for me on your repo. Try re-installing deps.

pksunkara commented 5 years ago

I couldn't get it working with re-installing deps. Even tried cleaning cache. Then I got it working by deleting the previously built electron destination folder. Thanks for the help.

mankey-ru commented 5 years ago

Actually valid value for that field is "./src/background.js", thats why for example "electron ." command doesnt work ("Unable to find Electron app")

The other part of the problem is that LTS version of Node doesnt work with ES6 without transpiling, but I beleive it will in couple of months, after that we will be able to quickly run app (~1s instead of ~20s with electron:serve), but the command will be long and a bit ugly "electron src/backgound.js" because of incorrect main in package.js

BTW, the names of main files are confusing because most Electron examples using main.js (its background.js here) and renderer.js (its main.js here)

nklayman commented 5 years ago

Vue CLI uses main.js by default, and I'd rather not change it. I think it would be more confusing if I mess with a user's app. It should only take a few seconds to build the main process.

mankey-ru commented 5 years ago

Since VueCLI does it, thats fine, thank you.

pvankralingen commented 5 years ago

Change the main field of your package.json to background.js.

I thought i was not supposed to change this field. Noticed that changing this to background.js worked but thought i was targeting the wrong file since background.js is also visible in dist_electron/bundled/background.js. I can now safely use this solution, thanks!

nklayman commented 5 years ago

It should be background.js by default, but some older versions would use something else.

steffanhalv commented 5 years ago

I got the same problem:

Error: Application entry file "background.js" in the "/Users/xxx/Documents/npm/xxx-electron/vuecli/xxx/build/linux-unpacked/resources/app.asar" does not exist. Seems like a wrong configuration.

and my package.json:

"main": "background.js",

EDIT:

Sorry, I had a missconfiguration from the migrated repo in the build configs. Uncommenting 'files' fixed the issue:

pluginOptions: {
    electronBuilder: {
      builderOptions: {
        // files: ['dist_electron/**/*'], // This caused the build error
DatMoser commented 5 years ago

Still experiencing this problem! 

Error: Application entry file "background.js" in the "/Users/<name>/Documents/<name>/Programmierungen/boxorganiser/build/mac/boxorganiser.app/Contents/Resources/app.asar" does not exist. Seems like a wrong configuration.

package.json:

"name": "boxorganiser",
  "version": "0.0.1",
  "description": "Simple box-organiser",
  "author": "<name>",
  "scripts": {
    "build": "node .electron-vue/build.js && electron-builder",
    "test": "npm run unit && npm run e2e",
    "e2e": "npm run pack && mocha test/e2e",
    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src test",
    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
    "dev": "node .electron-vue/dev-runner.js",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test",
    "pack": "npm run pack:main && npm run pack:renderer",
    "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": "npm run lint:fix && electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",
    "unit": "karma start test/unit/karma.conf.js"
  },
  "main": "background.js",
  "dependencies": {
    "axios": "^0.18.0",
    "firebase": "^5.11.0",
    "vue": "^2.5.16",
    "vue-electron": "^1.0.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-electron": "^1.0.0"
  },
  "devDependencies": {
    "ajv": "^6.5.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-istanbul": "^4.1.6",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "babili-webpack-plugin": "^0.1.2",
    "cfonts": "^2.1.2",
    "chai": "^4.1.2",
    "chalk": "^2.4.1",
    "copy-webpack-plugin": "^4.5.1",
    "cross-env": "^5.1.6",
    "css-loader": "^0.28.11",
    "del": "^3.0.0",
    "devtron": "^1.4.0",
    "electron": "^2.0.4",
    "electron-builder": "^20.19.2",
    "electron-debug": "^1.5.0",
    "electron-devtools-installer": "^2.2.4",
    "eslint": "^4.19.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-html": "^4.0.3",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-standard": "^3.1.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "inject-loader": "^4.0.1",
    "karma": "^2.0.2",
    "karma-chai": "^0.1.0",
    "karma-coverage": "^1.1.2",
    "karma-electron": "^6.0.0",
    "karma-mocha": "^1.3.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "^0.0.32",
    "karma-webpack": "^3.0.0",
    "mini-css-extract-plugin": "0.4.0",
    "mocha": "^5.2.0",
    "multispinner": "^0.2.1",
    "node-loader": "^0.6.0",
    "node-sass": "^4.9.2",
    "require-dir": "^1.0.0",
    "sass-loader": "^7.0.3",
    "spectron": "^3.8.0",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "vue-cli-plugin-electron-builder": "^1.3.2",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.2.4",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-hot-middleware": "^2.22.2",
    "webpack-merge": "^4.1.3"
  },
  "build": {
    "productName": "boxorganiser",
    "appId": "de.boxorganiser.app",
    "directories": {
      "output": "build"
    },
    "files": [
      "dist/electron/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/icon.ico"
    },
    "linux": {
      "icon": "build/icons"
    }
  },
  "license": "MIT"
}

Still no idea how to solve this problem. yarn build as well as npm build do not work.

nklayman commented 5 years ago

@DatMoser remove the files option from your package.json under build.

DatMoser commented 5 years ago

Thanks! :D

gengjiawen commented 4 years ago

My project has the same issue. It happens when I upgrade to electron 7.1.3. https://github.com/gengjiawen/electron-devdocs is the repo. Any suggestion ? thanks.

nklayman commented 4 years ago

@gengjiawen your project appears to use electron v8 and works fine for me, were you able to resolve your issue?

gengjiawen commented 4 years ago

yes, I fix it.turns out electron builder json looks not supported. I put the config in vue.config.js, and the error goes away.

fairking commented 4 years ago

Error fixed after changing the package.json: from

"main": "background.js"

to

"main": "dist_electron\bundled\background.js"
chriso86 commented 3 years ago

Hey guys,

I'm using TypeScript and it builds the background.ts file out to the "dist_electron/bundled/background.js" location, and I have tried the following paths, but it's still not working:

"main": "background.js" "main": "background.ts" "main": "dist_electron/bundled/background.js" "main": "./dist_electron/bundled/background.js" "main": "dist_electron\bundled\background.js" By the way \b is incorrect regarding the comment above as the backslash should be escaped "\\" "main": "dist_electron\\bundled\\background.js" "main": "C:\\Projects\\lifeapp\\frontend\\dist_electron\\bundled\\background.js"

I deleted my dist_electron folder each time that I changed the path and ran: "electron:build": "vue-cli-service electron:build"

Node modules:

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "apexcharts": "^3.23.1",
    "color-convert": "^2.0.1",
    "color-scheme": "^1.0.1",
    "core-js": "^3.6.5",
    "electron-updater": "^4.3.5",
    "inversify-props": "^1.0.5",
    "moment": "^2.29.1",
    "nedb": "^1.8.0",
    "node-notifier": "^9.0.0",
    "node-notifier-in-electron-vue": "^5.4.2",
    "normalize.css": "^8.0.1",
    "open": "^7.3.1",
    "path": "^0.12.7",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^6.6.3",
    "uniqid": "^5.2.0",
    "update-electron-app": "^2.0.1",
    "vue": "^2.6.11",
    "vue-apexcharts": "^1.6.0",
    "vue-class-component": "^7.2.3",
    "vue-clickaway": "^2.2.2",
    "vue-funnel-graph-js": "^0.1.8",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "vuex-class": "^0.3.2"
  },
  "devDependencies": {
    "@types/color-convert": "^2.0.0",
    "@types/electron-devtools-installer": "^2.2.0",
    "@types/jest": "^24.0.19",
    "@types/nedb": "^1.8.11",
    "@types/node-notifier": "^8.0.0",
    "@types/uniqid": "^5.2.0",
    "@types/vue-clickaway": "^2.2.0",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "^4.5.11",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^1.0.3",
    "electron": "^9.0.0",
    "electron-devtools-installer": "^3.1.0",
    "electron-webpack": "^2.8.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.1",
    "typescript": "~3.9.3",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.5",
    "vue-swatches": "^2.1.0",
    "vue-template-compiler": "^2.6.11",
    "vuex-module-decorators": "^1.0.1"
  }

Error: Error: Application entry file [INSERT_PATH_HERE] in the "C:\Projects\lifeapp\frontend\dist_electron\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.

nklayman commented 3 years ago

@chriso86 If you open a new issue that follows the bug report template I should be able to help you fix your problem.

chriso86 commented 3 years ago

This line in the vue.config.js file is what was ruining my life:

image

Y2Nk4 commented 3 years ago

The file app.asar that mentioned in the error is basically a zipped file that stores the code of your electron application. (I am new to electron, if it's not correct, don't quote me on this, and please tell me how exactly it works.)

The ultimate way for me to solve this issue is to install a package called asar by npm install -g asar, then extract the app.asar file with asar simply by asar extract app.asar ./. Then you will see the app.asar file is extracted and it's basically your whole project but zipped. I see that the main file is really depending on your configuration, that's why all these solutions above might not be able to solve this problem in your case.

In my case, I used webpack to pack the files, and the packed main file located in dist/electron/main.js

If all the solutions above did not solve your issues, please try this way. Hope this could help!

image image

fairking commented 3 years ago

I have the same issue:

Unpacking electron zip  zipPath=undefined
  ⨯ Application entry file "background.js" in the "C:\Code\MyProject\src\MyProject.App.Cmu\dist\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.  stackTrace=
Error: Application entry file "background.js" in the "C:\Code\MyProject\src\MyProject.App.Cmu\dist\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.
    at error (C:\Code\MyProject\src\MyProject.App.Cmu\node_modules\app-builder-lib\src\asar\asarFileChecker.ts:7:12)
    at checkFileInArchive (C:\Code\MyProject\src\MyProject.App.Cmu\node_modules\app-builder-lib\src\asar\asarFileChecker.ts:33:11)
    at WinPackager.checkFileInPackage (C:\Code\MyProject\src\MyProject.App.Cmu\node_modules\app-builder-lib\src\platformPackager.ts:430:7)
    at WinPackager.sanityCheckPackage (C:\Code\MyProject\src\MyProject.App.Cmu\node_modules\app-builder-lib\src\platformPackager.ts:481:5)
    at WinPackager.doPack (C:\Code\MyProject\src\MyProject.App.Cmu\node_modules\app-builder-lib\src\platformPackager.ts:253:5)
    at WinPackager.pack (C:\Code\MyProject\src\MyProject.App.Cmu\node_modules\app-builder-lib\src\platformPackager.ts:115:5)
    at Packager.doBuild (C:\Code\MyProject\src\MyProject.App.Cmu\node_modules\app-builder-lib\src\packager.ts:434:9)
    at executeFinally (C:\Code\MyProject\src\MyProject.App.Cmu\node_modules\builder-util\src\promise.ts:12:14)
    at Packager._build (C:\Code\MyProject\src\MyProject.App.Cmu\node_modules\app-builder-lib\src\packager.ts:369:31)
    at Packager.build (C:\Code\MyProject\src\MyProject.App.Cmu\node_modules\app-builder-lib\src\packager.ts:333:12)
    at executeFinally (C:\Code\MyProject\src\MyProject.App.Cmu\node_modules\builder-util\src\promise.ts:12:14)

If I unzip the app.asar file, the background.js file is there in the root level. How is it possible it says it is missing???

package.json:

        "electron": "^9.4.3",
        "electron-builder": "^22.10.5",
        "electron-devtools-installer": "^3.1.1",
        "vue-cli-plugin-electron-builder": "~2.0.0-rc.4",

    main: "background.js",

vue.config.js:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      appId: "com.myproject.cmu",
      productName: "My Project CMU",
      copyright: "Copyright © year ${author}",
      win: {
        target: "nsis",
        icon: "public/img/icons/logo_256x256.ico"
      },
      rpm: {
        category: "Other"
      },
      files: ['dist_electron/**/*'],
      extraFiles: [
        {
          from: "public/",
          to: "resources"
        }
      ]
    }
  }
}

Tried to remove the files: ['dist_electron/**/*'],. Tried to remove or change the main.

Please guys I have the same issue several times after upgrades. Could you guys please fix it ones and forever? Me and all other people are tired with this issue. I use standard settings nothing special. It must work with the default settings. Is there any workaround? Downgrade of something?

P.S. I think the issue must be reopened.

nklayman commented 3 years ago

@fairking try removing both your files and extraFiles config. The contents of the public folder are copied automatically, as well as the output in dist_electron. Also, your electron-builder config needs to go under the builderOptions key, so it'd be pluginOptions.electronBuilder.builderOptions.(appId|productName|etc...).

fairking commented 3 years ago

Thanks @nklayman

I did as you said. Still the same error:

Unpacking electron zip  zipPath=undefined
Application entry file "background.js" in the "C:\Code\MyProject\src\MyProject.App.Cmu\dist\win-unpacked\resources\app.asar" 
does not exist. Seems like a wrong configuration.  stackTrace=
Error: Application entry file "background.js" in the "C:\Code\MyProject\src\MyProject.App.Cmu\dist\win-unpacked\resources\app.asar"
 does not exist. Seems like a wrong configuration.
at error (C:\Code\MyProject\src\MyProject.App.Cmu\node_modules\app-builder-lib\src\asar\asarFileChecker.ts:7:12)

The package.json:

"devDependencies": {
    "electron": "^11.3.0",
    "electron-builder": "^22.10.5",
    "electron-devtools-installer": "^3.1.1",
    "vue-cli-plugin-electron-builder": "^2.0.0-rc.6",
    ....
}
"main": "background.js",

The vue.config.js:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      builderOptions: {
        appId: "com.myproject.cmu",
        productName: "My Project CMU",
        copyright: "Copyright © year ${author}",
        win: {
          target: "nsis",
          icon: "public/img/icons/logo_256x256.ico"
        },
        rpm: {
          category: "Other"
        }
      }
    }
  }
}

The unzipped \dist\win-unpacked\resources\app.asar looks like this: image

The unzipped \dist_electron\win-unpacked\resources\app.asar looks like this: image

Looks like the error says it is looking in dist directory rather then in dist_electron. Any idea?

Should it be \dist_electron\win-unpacked\resources\app.asar instead?

nklayman commented 3 years ago

Yeah I'm not sure how you ended up with a dist/win-unpacked output, it should all be in dist_electron/*. Try running the dist_electron/win-unpacked/APPNAME.exe and see if that loads properly.

fairking commented 3 years ago

@nklayman Yeah I'm not sure how you ended up with a dist/win-unpacked output, it should all be in dist_electron/*. Try running the dist_electron/win-unpacked/APPNAME.exe and see if that loads properly.

I don't know. There is a very basic project generated from cli, nothing special. I think it is a electron_builder bug (https://github.com/electron-userland/electron-builder/issues/5657). You can run yourself : https://github.com/fairking/electron_test just do npm install and then npm run dist-windows.

nklayman commented 3 years ago

Ahh, it's because you are running electron-builder manually. This plugin automatically runs electron-builder for your with the proper config, and outputs to dist_electron. You can remove your custom electron-builder calls and then you should be fine, just use output in dist_electron.

fairking commented 3 years ago

You can remove your custom electron-builder calls

But those calls tell which platform needs to be build? How do I build linux version by using npm run electron:build on widnows?

nklayman commented 3 years ago

All args you pass to electron:build will be forwarded to electron-builder, so just set your script to vue-cli-service electron:build --linux

fairking commented 3 years ago

All args you pass to electron:build will be forwarded to electron-builder, so just set your script to vue-cli-service electron:build --linux

Thanks a lot @nklayman . It solved all problems. https://github.com/fairking/electron_test/commit/59f1648e6e7b0a8bd896bc85af9d8518b3c4d110

abulka commented 2 years ago

You may be getting all the errors mentioned in this issue when building your Vue based Electron app using GitHub Actions using the famous https://github.com/samuelmeuli/action-electron-builder GitHub Actions plugin. Thus your googling may lead you here. The errors are:

As https://github.com/samuelmeuli/action-electron-builder/issues/66 says, you simply need to add use_vue_cli: true to your Github Actions workflow yml file. Keep your package.json containing the default "main": "background.js", and you don't need to do anything to vue.config.js. 

- name: Build/release Electron app
  uses: samuelmeuli/action-electron-builder@v1
  with:
    github_token: ${{ secrets.github_token }}
    use_vue_cli: true       # <-------- you need this
    release: ${{ startsWith(github.ref, 'refs/tags/v') }}

Detail

In a Github Actions workflow yml file, specifying the use_vue_cli: true option to the samuelmeuli/action-electron-builder@v1 causes this good invocation e.g.:

$ /Users/runner/work/vue-electron-builder1/vue-electron-builder1/node_modules/.bin/vue-cli-service electron:build --mac

instead of the problematic, plain electron-builder invocation, which builds in the dist/ directory instead of dist_electron/

$ /Users/runner/work/vue-electron-builder1/vue-electron-builder1/node_modules/.bin/electron-builder --mac

Look in your Github Action build logs to see which command is being invoked.

We want Vue with Electron via the Vue plugin vue-cli-plugin-electron-builder, not just plain Electron without Vue. The samuelmeuli/action-electron-builder@v1 plugin is all about building all sorts of Electron apps on Github, not specifically Vue based Electron apps. Though that Github action plugin is nice enough to give us this special Vue option.

use_vue_cli: true

Remember:

Hope this info helps someone, as it took me a while to figure out.

OrangeRunning commented 2 years ago

大家好，

我正在使用 TypeScript，它将 background.ts 文件构建到“dist_electron/bundled/background.js”位置，我尝试了以下路径，但它仍然无法正常工作：

"main": "background.js" "main": "background.ts" "main": "dist_electron/bundled/background.js" "main": "./dist_electron/bundled/background.js" "main": "dist_electron\bundled\background.js" 顺便说一下 \b 关于上面的评论是不正确的，因为反斜杠应该被转义 "\" "main": "dist_electron\\bundled\\background.js" "main": "C:\\Projects\\lifeapp\\frontend\\dist_electron\\bundled\\background.js"

每次更改路径并运行时，我都删除了 dist_electron 文件夹： "electron:build": "vue-cli-service electron:build"

节点模块：

“依赖”：{
     “@fortawesome/fontawesome-free”：“ ^5.15.1 ”、
     “apexcharts”：“ ^ 3.23.1 ”、
     “颜色转换”：“ ^2.0.1 ”、
     “颜色方案”：“ ^1.0.1 ”、
     “core-js”：“ ^3.6.5 ”、
     “electron-updater”：“ ^4.3.5 ”、
     “inversify-props”：" ^1.0.5 " ,
     "时刻" :" ^2.29.1 " ,
     "nedb" : " ^1.8.0 " ,
     "node-notifier" : " ^9.0.0 " ,
     "node-notifier-in-electron-vue" : " ^5.4.2 " ,
     “normalize.css”： “ ^8.0.1 ”，
     “打开”： “ ^7.3.1 ”，
     “路径”： “ ^0.12.7 ”，
     “反射元数据”： “^0.1.13 " ,
     "rxjs" :“ ^6.6.3 ”、
     “uniqid”： “ ^5.2.0 ”、
     “update-electron-app”： “ ^2.0.1 ”、
     “vue”： “ ^2.6.11 ”、
     “vue-apexcharts”： “ ^1.6.0 ”、
     “vue-class-component”： “ ^7.2.3 ”、
     “vue-clickaway”： “ ^2.2.2 ”、
     “vue-funnel-graph-js”：" ^0.1.8 " ,
    “vue-property-decorator”：“ ^9.1.2 ”，
     “vue-router”：“ ^3.2.0 ”，
     “vuex”：“ ^3.4.0 ”，
     “vuex-class”：“ ^0.3.2 " 
  }, "devDependencies" : {
     "@types/color-convert" : " ^2.0.0 " ,
     "@types/electron-devtools-installer" : " ^2.2.0 " ,
     "@types/jest" :" ^24.0.19 " ,

  “@types/nedb”：“ ^1.8.11 ”，
     “@types/node-notifier”：“ ^8.0.0 ”，
     “@types/uniqid”：“ ^5.2.0 ”，
     “@types/vue- clickaway" : " ^2.2.0 " ,
     "@typescript-eslint/eslint-plugin" : " ^2.33.0 " ,
     "@typescript-eslint/parser" : " ^2.33.0 " ,
     "@vue/ cli-插件-babel" : "~4.5.0 " ,
     "@vue/cli-plugin-e2e-cypress": " ~4.5.0 " ,
     "@vue/cli-plugin-eslint" : " ~4.5.0 " ,
     "@vue/cli-plugin-router" : " ~4.5.0 " ,
     "@vue/cli- plugin-typescript" : " ^4.5.11 " ,
     "@vue/cli-plugin-unit-jest" : " ~4.5.0 " ,
     "@vue/cli-plugin-vuex" : " ~4.5.0 " ,
     “@vue/cli-service”：“ ~4.5.0 ”，
    “@vue/eslint-config-typescript”：" ^5.0.2 " ,
     "@vue/test-utils" : " ^1.0.3 " ,
     "electron" : " ^9.0.0 " ,
     "electron-devtools-installer" : " ^3.1.0 " ,
     " electron-webpack”： “ ^2.8.2 ”，
     “eslint”： “ ^6.7.2 ”，
     “eslint-plugin-vue”： “ ^6.2.2 ”，
     “node-sass”：" ^4.12.0 " ,
    “sass-loader”：“ ^8.0.1 ”，
     “typescript”：“ ~3.9.3 ”，
     “vue-cli-plugin-electron-builder”：“ ~2.0.0-rc.5 ”，
     “vue-色板”：“ ^2.1.0 ”，
     “vue-template-compiler”：“ ^2.6.11 ”，
     “vuex-module-decorators”：“ ^1.0.1 ” 
  }

错误： Error: Application entry file [INSERT_PATH_HERE] in the "C:\Projects\lifeapp\frontend\dist_electron\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.

mac os，use this "main": "./dist_electron/bundled/background.js",

Flavsditz commented 2 years ago

Ok, I am losing my mind on this one. xD

My problem, it seems, that the background.ts file is not even being compiled to the dist_electron/bundled folder. Serve works fine... but build does not. It was working for some time, but then suddenly (probably after updates on deps ) the dev-tools stopped working. So I managed to fix it. Then serve broke, I fixed that... now build stopped working...

Here is my env: Node v16.13.0 NPM v8.12.2

Here is my package.json

{
  "name": "test-tool",
  "version": "1.0.0",
  "private": true,
  "description": "Test.",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.16.4",
    "electron-store": "^8.0.2",
    "exceljs": "^4.3.0",
    "jsonwebtoken": "^8.5.1",
    "lodash": "^4.17.21",
    "vue": "^2.6.14",
    "vue-class-component": "^7.2.6",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@types/electron-devtools-installer": "^2.2.0",
    "@types/lodash": "^4.14.182",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "autoprefixer": "^10.4.7",
    "electron": "^16.0.0",
    "electron-devtools-installer": "^3.1.0",
    "electron-icon-builder": "^2.0.1",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "lint-staged": "^11.1.2",
    "postcss": "^8.4.14",
    "prettier": "^2.7.1",
    "prettier-plugin-tailwindcss": "^0.1.11",
    "tailwindcss": "^3.1.4",
    "ts-loader": "~8.2.0",
    "typescript": "~4.5.5",
    "vue-cli-plugin-electron-builder": "^3.0.0-alpha.4",
    "vue-template-compiler": "^2.6.14"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

and here is the vue.config.js:

module.exports = {
  configureWebpack: {
    devtool: "source-map",
  },
  devServer: {
    port: 8888,
  },
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      removeElectronJunk: false,
    },
  },
};

Here is the file structure that gets generated upon build: dist_electron ├── bundled │   ├── css │   ├── favicon.ico │   ├── fonts │   ├── icon.png │   ├── img │   ├── index.html │   ├── index.js │   ├── index.js.LICENSE.txt │   ├── js │   ├── node_modules │   └── package.json

Anything else I can provide? I appreciate the help

JH1ller commented 1 year ago

For @Flavsditz and anyone else finding this; the background.ts file is compiled to dist_electron/bundles/index.js so just change your "main" from "background.js" to "index.js" in your package.json.