Libraries built using vue-cli produce "$attrs/$listeners/props are readonly" errors when consumed in Electron apps #22

TAGC · 2018-06-15T13:09:28Z

Cross-posting an issue from vuejs/vue-cli#1583 as it may be more appropriate here. TL;DR: when libraries built using vue-cli are consumed inside Electron apps, it seems like they reference one version of the Vue bundle while a different version gets bundled in renderer.js. I was wondering if it's possible for you to modify this plugin to adjust the webpack config that vue-cli generates by default to make libraries play nice in Electron apps.

Version

vue-cli: 3.0.0-rc.1
vue-cli-plugin-electron-builder: 0.3.2

Reproduction link

https://github.com/TAGC/vue-electron-bug

Steps to reproduce

Go into lib, install dependencies and build it with npm run build.
Go into app, install dependencies.
Serve the app in the browser with npm run serve. Open the browser devtools and check for errors in the console while clicking the button.
Serve the app in an Electron shell with npm run electron:serve. Repeat the above procedure, monitoring for errors in the Electron devtools console.

What is expected?

No console errors should appear in either case.

What is actually happening?

When serving as an Electron app, three errors appear every time the button is clicked.

[Vue warn]: $attrs is readonly.
...
[Vue warn]: $listeners is readonly.
...
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "message"

I've done some digging and it seems a number of projects have encountered this problem when their libraries are used in Electron apps. It has something to do with the Electron renderer process using a different version of the Vue bundle than the one the library uses - these two Vue bundles conflict with each other.

This issue comment sheds some light on the issue, although I haven't yet tried the solution the person proposes.

The text was updated successfully, but these errors were encountered:

nklayman · 2018-06-15T16:33:01Z

This might be caused by electron-webpack which will be replaced in v1.0.0. If the issue still persists in that version, I'll take a closer look at this. Expect a beta within 1-2 weeks.

nklayman · 2018-06-17T17:19:59Z

I just released the first v1.0.0 alpha! Go ahead and try it again with the new version and let me know if it works. Thanks.

TAGC · 2018-06-17T18:56:15Z

I tried updating the repo linked above to v1.0.0-alpha.2 of your plugin and following your upgrade guide.

I'm finding that serving in a regular browser (npm run serve / npm run build) works okay, as before. npm run serve:electron seems to work initially and doesn't produce any errors, but gets stuck indefinitely at "Launching electron". npm run build:electron fails after producing this output:

$ npm run build:electron
npm WARN npm npm does not support Node.js v10.4.1
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/

> app@0.1.0 build:electron /Users/<me>/Documents/VSCode/vue-electron-bug/app
> vue-cli-service build:electron

Bundling render process:

⠏  Building for production...

 DONE  Compiled successfully in 2454ms                                                                                                                                       19:52:40

  File                                      Size             Gzipped

  dist_electron/bundled/js/chunk-vendors    76.08 kb         27.49 kb
  .32ac58bc.js
  dist_electron/bundled/js/app.42157137.    2.22 kb          1.11 kb
  js
  dist_electron/bundled/css/app.42817a0e    0.16 kb          0.14 kb
  .css

  Images and other types of assets omitted.

 DONE  Build complete. The dist_electron/bundled directory is ready to be deployed.

Bundling main process:

Hash: 87c32639d0f6baeffc20
Version: webpack 4.12.0
Time: 278ms
Built at: 17/06/2018 19:52:40
        Asset     Size  Chunks             Chunk Names
background.js  1.6 KiB       0  [emitted]  background
Entrypoint background = background.js
[0] external "electron" 42 bytes {0} [built]
[1] external "url" 42 bytes {0} [built]
[2] external "path" 42 bytes {0} [built]
[3] ./src/background.js 1.43 KiB {0} [built]
[4] multi ./src/background.js 28 bytes {0} [built]

Building app with electron-builder:

  • electron-builder version=20.15.1
  • description is missed in the package.json appPackageFile=/Users/<me>/Documents/VSCode/vue-electron-bug/app/package.json
  • author is missed in the package.json appPackageFile=/Users/<me>/Documents/VSCode/vue-electron-bug/app/package.json
  • writing effective config file=dist_electron/electron-builder-effective-config.yaml
Unhandled rejection Error: Unresolved node modules: vue
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/util/packageDependencies.ts:112:21
From previous event:
    at Collector.resolveUnresolvedHoisted (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/util/packageDependencies.ts:88:81)
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/util/packageDependencies.ts:83:18
    at Generator.next (<anonymous>)
    at runCallback (timers.js:696:18)
    at tryOnImmediate (timers.js:667:5)
    at processImmediate (timers.js:649:5)
From previous event:
    at Collector.collect (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/util/packageDependencies.ts:76:28)
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/util/packageDependencies.ts:47:44
    at Generator.next (<anonymous>)
From previous event:
    at getProductionDependencies (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/out/util/packageDependencies.js:130:17)
    at Lazy.<anonymous> (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/packager.ts:109:24)
    at Generator.next (<anonymous>)
From previous event:
    at Lazy.get value [as value] (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/lazy-val/src/main.ts:18:23)
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/util/yarn.ts:121:81
    at Generator.next (<anonymous>)
From previous event:
    at rebuild (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/out/util/yarn.js:234:18)
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/util/yarn.ts:20:11
    at Generator.next (<anonymous>)
    at runCallback (timers.js:696:18)
    at tryOnImmediate (timers.js:667:5)
    at processImmediate (timers.js:649:5)
From previous event:
    at installOrRebuild (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/out/util/yarn.js:68:17)
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/packager.ts:451:13
    at Generator.next (<anonymous>)
From previous event:
    at Packager.installAppDependencies (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/packager.ts:415:70)
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/packager.ts:365:20
    at Generator.next (<anonymous>)
From previous event:
    at Packager.doBuild (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/packager.ts:341:39)
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/packager.ts:317:52
    at Generator.next (<anonymous>)
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/graceful-fs/graceful-fs.js:99:16
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/graceful-fs/graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:171:20)
From previous event:
    at Packager._build (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/packager.ts:294:133)
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/packager.ts:290:23
    at Generator.next (<anonymous>)
    at runCallback (timers.js:696:18)
    at tryOnImmediate (timers.js:667:5)
    at processImmediate (timers.js:649:5)
From previous event:
    at Packager.build (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/packager.ts:248:14)
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/src/index.ts:51:40
    at Generator.next (<anonymous>)
From previous event:
    at build (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder-lib/out/index.js:220:17)
    at Object.build (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/electron-builder/src/builder.ts:234:10)
    at bundle.run (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/vue-cli-plugin-electron-builder/index.js:122:12)
    at finalCallback (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/webpack/lib/Compiler.js:157:39)
    at hooks.done.callAsync.err (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/webpack/lib/Compiler.js:206:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/tapable/lib/Hook.js:35:21)
    at emitRecords.err (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/webpack/lib/Compiler.js:204:22)
    at Compiler.emitRecords (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/webpack/lib/Compiler.js:319:39)
    at emitAssets.err (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/webpack/lib/Compiler.js:198:10)
    at hooks.afterEmit.callAsync.err (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/webpack/lib/Compiler.js:305:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/tapable/lib/Hook.js:35:21)
    at asyncLib.forEach.err (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/webpack/lib/Compiler.js:302:27)
    at done (/Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/neo-async/async.js:2854:11)
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/neo-async/async.js:2805:7
    at /Users/<me>/Documents/VSCode/vue-electron-bug/app/node_modules/graceful-fs/graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:171:20)

Latest commit: TAGC/vue-electron-bug@48eb5f8

Environment

OS: macOS High Sierra 10.13.5
node: 10.4.1
npm: 5.6.0

nklayman · 2018-06-17T23:14:33Z

I created #24 for the serve: electron problem. I will look into the other issue soon.

nklayman · 2018-06-18T18:40:13Z

Please follow the instructions on this issue comment for the serve:electron issue. I run into an install error when following the instructions for your repo (I'm on windows btw).
2018-06-18T18_37_58_783Z-debug.log

TAGC · 2018-06-18T19:19:50Z

@nklayman I got errors similar to that using npm v6.1.0 on Windows. npm v6 seems pretty broken and I encountered other issues with it too. Are you able to install dependencies with npm v5.6.0?

TAGC · 2018-06-18T19:25:40Z

Seems it might be something to do with VS Code locking node_modules. Haven't tried it myself but apparently closing VS Code before doing npm install might help: microsoft/vscode#28593 (comment)

nklayman · 2018-06-18T22:13:26Z

2018-06-18T22_03_51_221Z-debug.log
Still doesn't work with vscode closed and npm v5.6.0. I think this might be a windows-related bug.

However, it worked using yarn. Electron launched just fine, and there was no errors like the ones initially mentioned in this issue. I will close this issue as it appears to be fixed, and will continue to look into #24, which seems like a macOS only bug. Thanks

TAGC closed this as completed Jun 18, 2018

TAGC reopened this Jun 18, 2018

nklayman closed this as completed Jun 18, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Libraries built using vue-cli produce "$attrs/$listeners/props are readonly" errors when consumed in Electron apps #22

Libraries built using vue-cli produce "$attrs/$listeners/props are readonly" errors when consumed in Electron apps #22

TAGC commented Jun 15, 2018

nklayman commented Jun 15, 2018

nklayman commented Jun 17, 2018

TAGC commented Jun 17, 2018 •

edited

nklayman commented Jun 17, 2018

nklayman commented Jun 18, 2018

TAGC commented Jun 18, 2018

TAGC commented Jun 18, 2018

nklayman commented Jun 18, 2018

Libraries built using vue-cli produce "$attrs/$listeners/props are readonly" errors when consumed in Electron apps #22

Libraries built using vue-cli produce "$attrs/$listeners/props are readonly" errors when consumed in Electron apps #22

Comments

TAGC commented Jun 15, 2018

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

nklayman commented Jun 15, 2018

nklayman commented Jun 17, 2018

TAGC commented Jun 17, 2018 • edited

nklayman commented Jun 17, 2018

nklayman commented Jun 18, 2018

TAGC commented Jun 18, 2018

TAGC commented Jun 18, 2018

nklayman commented Jun 18, 2018

TAGC commented Jun 17, 2018 •

edited