Vue-cli-plugin-electron-builder: Build not working for multiple browser windows

[utoppo]

I seem to have the same problem as in: #102

Describe the bug
When creating an application with more than one window, the build fails with message: Building modern bundle for production...(node:67207) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/Users/.../dist_electron/bundled/legacy-assets-index.html.json'

To Reproduce
Clone https://github.com/utoppo/vue-cli-plugin-electron-builder-build-problem
Try to build with: yarn electron:build

Expected behavior
Build/Bundling Process should finish without error.

Environment:

• OS and version: OSX 10.12.6
• node version: v11.0.0
• npm version: 6.4.1
• yarn version : 1.9.4
• vue-cli-plugin-electron-builder version : 1.0.0-rc.10
• electron version: 4.0.0
  
  
  
  • custom config for vcp-electron-builder:
  
  
  • link to repo: https://github.com/utoppo/vue-cli-plugin-electron-builder-build-problem
  
  

[utoppo]

I found a solution / workaround for the problem. See simple_fix-branch in the updated repo: https://github.com/utoppo/vue-cli-plugin-electron-builder-build-problem

The crucial changes are:

• rename index.html to main_window.html
• adjust vue.config.js to use main_window.html
• adjust createSecondWindow-method inside background.js, to load main_window.html-file instead of index.html

[LeoMartinDev]

The build process fails, even with --legacy flag, please re-open this :)

[stuible]

Also having this issue and the '--legacy' flag did not solve it

[utoppo]

So I'll reopen this, for @nklayman to have a look at the issue again. I thought my proposed solution would fix it, but it does look like the problem persists for others.

[stuible]

Here is a branch of my codebase that displays this issue:
https://github.com/stuible/Image-Snafu/tree/unable-to-build

[utoppo]

When you clone my repository (branch simple_fix https://github.com/utoppo/vue-cli-plugin-electron-builder-build-problem/tree/simple_fix) and then run the build command the build process should work.

But:
Unfortunately, when I try to reproduce the workaround from scratch, or when I try to apply the workaround to your repository, it does not work any more. Weird…

[utoppo]

It must have to do something with the dependencies. When I remove theyarn.lock from my simple_fix-branch and then re-install with yarn install, the workaround doesn't work there anymore, either.

[utoppo]

I found some code in vue-cli-plugin-electron-builder-index.js where a "mock"-json file is generated for index.html. This seems to be hard-coded in. I think this might be a place to look at, when searching for a fix:

vue-cli-plugin-electron-builder/index.js, Line 113ff

          // Mock data from legacy build
          fs.writeFileSync(
            path.join(bundleOutputDir, 'legacy-assets-index.html.json'),
            '[]'
          )

[nklayman]

With 1.1.0, I started skipping the legacy build, and only running the modern one. The modern build looks for the legacy assets file, so I mock it to prevent an error.

[nklayman]

I fixed the missing legacy-assets-page.html.json bug with 1.1.1, and created a multipage demo app. Let me know if that works for you or if you have more questions.

[nklayman]

Check the files changed in the last commit to see what I did to add the second page. You do not have to use --legacy during builds.

[utoppo]

This works great! Thank you very much for the fix and the example!

[elyulka]

It doesn't work in our case! You should replace fileName to filename !
Changing name of option in vue.config.js does not help.

See:
https://github.com/nklayman/vue-cli-plugin-electron-builder/commit/bafd557d8b11c2f6de3b600b2cd2fcbc4a6de351#r32880694

Otherwise we get errors and build never finishes:

Building modern bundle for production...(node:35823) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '.../dist_electron/bundled/legacy-assets-main.html.json'
(node:35823) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:35823) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
⠇  Building modern bundle for production...

[nklayman]

@elyulka Thanks for the report! Fixed in 2af978aa244ed848e76804078c456ae827bb19cd.

[nklayman]

Released version 1.2.0 with the fix.

[elyulka]

@utoppo Thank you so much!

[utoppo]

Wasn't me ;)