nklayman / vue-cli-plugin-electron-builder Goto Github PK
View Code? Open in Web Editor NEWEasily Build Your Vue.js App For Desktop With Electron
Home Page: https://nklayman.github.io/vue-cli-plugin-electron-builder/
License: MIT License
Easily Build Your Vue.js App For Desktop With Electron
Home Page: https://nklayman.github.io/vue-cli-plugin-electron-builder/
License: MIT License
Hi!
I've created a .env file in order to set some environment variables for electron and Vue. I've read the official documentation https://github.com/vuejs/vue-cli/blob/dev/docs/env.md, but when I print console.log(process.env.BASE_URL)
in a Vue component undefined
is shown. The same when I set ELECTRON_DISABLE_SECURITY_WARNINGS
for Electron. Nothing happens.
How can I set env variables for Vue and Electron?
Thanks!
Hello. Currently, pluginOptions.electronBuilder.webpackConfig
can be used to set webpack config for renderer process, but as far as I can see, there is no way to set webpack config for main process through this plugin. Is there any way to do it? 🤔
Of course, I know I can set webpack config for main process by manually putting webpack.main.additions.js
to somewhere, but I think it is preferable to follow the same fashion as this plugin generates webpack.renderer.additions.js
.
Hi,
unfortunately yarn serve:electron throws an error:
Error: spawn /Volumes/eSSD/Projects/twiceware-pro.de/electron\node_modules\.bin\electron-webpack ENOENT
Error: spawn /Volumes/eSSD/Projects/twiceware-pro.de/electron\node_modules\.bin\electron-webpack ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:201:19)
at onErrorNT (internal/child_process.js:379:16)
at process._tickCallback (internal/process/next_tick.js:178:19)
at Function.Module.runMain (internal/modules/cjs/loader.js:697:11)
at startup (internal/bootstrap/node.js:201:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:516:3)
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c vue-cli-service serve:electron
Directory: /Volumes/eSSD/Projects/twiceware-pro.de/electron
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/Volumes/eSSD/Projects/twiceware-pro.de/electron/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I am trying to use electron-builder
with element-ui
plugin https://github.com/Seb-L/vue-cli-plugin-element-ui (all this plugin does is basically installs element-ui
and adds
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
import './styles.scss'
Vue.use(ElementUI, { locale })
to main.js
), but when I run yarn serve:electron
it fails with
ERROR in ./src/main.js
Module build failed: Error: .plugins[1][1] must be an object, false, or undefined
at assertPluginItem (/Users/la.sintez/Projects/bca-sora-desktop/node_modules/@babel/core/lib/config/validation/option-assertions.js:185:15)
at /Users/la.sintez/Projects/bca-sora-desktop/node_modules/@babel/core/lib/config/validation/option-assertions.js:162:14
at Array.forEach (<anonymous>)
at assertPluginList (/Users/la.sintez/Projects/bca-sora-desktop/node_modules/@babel/core/lib/config/validation/option-assertions.js:161:9)
at /Users/la.sintez/Projects/bca-sora-desktop/node_modules/@babel/core/lib/config/validation/options.js:89:20
at Array.forEach (<anonymous>)
at validate (/Users/la.sintez/Projects/bca-sora-desktop/node_modules/@babel/core/lib/config/validation/options.js:67:21)
at loadPrivatePartialConfig (/Users/la.sintez/Projects/bca-sora-desktop/node_modules/@babel/core/lib/config/partial.js:38:48)
at Object.loadPartialConfig (/Users/la.sintez/Projects/bca-sora-desktop/node_modules/@babel/core/lib/config/partial.js:77:16)
at Object.<anonymous> (/Users/la.sintez/Projects/bca-sora-desktop/node_modules/babel-loader/lib/index.js:82:26)
at Generator.next (<anonymous>)
at step (/Users/la.sintez/Projects/bca-sora-desktop/node_modules/babel-loader/lib/index.js:3:221)
at _next (/Users/la.sintez/Projects/bca-sora-desktop/node_modules/babel-loader/lib/index.js:3:409)
at /Users/la.sintez/Projects/bca-sora-desktop/node_modules/babel-loader/lib/index.js:3:477
at new Promise (<anonymous>)
at Object.<anonymous> (/Users/la.sintez/Projects/bca-sora-desktop/node_modules/babel-loader/lib/index.js:3:97)
@ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/main.js
After I googled for a while, it seems what a problem lies in babel 7, but I am not sure :(
element-ui is possible to use with electron, since I did it with https://github.com/SimulatedGREG/electron-vue earlier.
Any idea on how to fix it? ^^
Steps to reproduce:
vue create test
vue add electron-builder
vue add element-ui
yarn serve:electron
Also, I tried to add element-ui
manually, so the problem is not with element-ui
plugin.
Hi,
no idea, if this the right repository. But the error appears not when using electron-webpack without vue-cli. The problem is thrown by extending classes of camo or klex.
I'm defining scss variables in a file that is imported throughcss.loaderOptions.sass.data
in vue.config.js
:
// vue.config.js
const fs = require('fs')
module.exports = {
css: {
loaderOptions: {
sass: {
data: fs.readFileSync('src/styles/main.scss', 'utf-8')
}
}
}
}
// src/styles/main.scss
$blue: rgb(0, 111, 186);
$light-blue: rgb(125, 206, 241);
I can use those variables just fine in App.vue
when running yarn serve
or yarn build
:
// src/App.vue
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style lang="scss">
#app {
background-color: $blue;
}
</style>
However, yarn build:electron
breaks with this:
yarn build:electron v1.0.0
$ vue-cli-service build:electron
59% [1] building modules 75/76 modules 1 active …pp.vue?vue&type=style&index=0&lang=scssDEPRECATION WARNING on line 54, column 8 of stdin:
Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.
[1] Hash: 0cf1583156f0e6feee14b311f3305d675152a863
Version: webpack 4.10.2
Child
Hash: 0cf1583156f0e6feee14
Time: 916ms
Built at: 2018-06-08 10:00:14
Asset Size Chunks Chunk Names
main.js 1.88 KiB 0 [emitted] main
main.js.map 2.76 KiB 0 [emitted] main
[0] external "electron" 42 bytes {0} [built]
[1] external "url" 42 bytes {0} [built]
[2] external "path" 42 bytes {0} [built]
[3] ./src/main/index.js 1.6 KiB {0} [built]
[4] multi ./src/main/index.js 28 bytes {0} [built]
Child
Hash: b311f3305d675152a863
Time: 4893ms
Built at: 2018-06-08 10:00:18
4 assets
[9] ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss 1020 bytes {0} [built] [failed] [1 error]
[14] external "vuex" 42 bytes {0} [built]
[26] ./src/main.js + 18 modules 9.19 KiB {0} [built]
| ./src/main.js 251 bytes [built]
| ./src/store/index.js 226 bytes [built]
| ./src/App.vue 504 bytes [built]
| ./src/store/modules/attract.js 753 bytes [built]
| ./src/App.vue?vue&type=script&lang=js 346 bytes [built]
| ./src/App.vue?vue&type=template&id=78c88d74 194 bytes [built]
| ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js 848 bytes [built]
| ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=78c88d74 241 bytes [built]
| + 11 hidden modules
[27] ./src/App.vue?vue&type=style&index=0&lang=scss 646 bytes {0} [built]
[57] multi ./node_modules/electron-webpack/vue-renderer-entry.js ./src/main.js 40 bytes {0} [built]
+ 53 hidden modules
ERROR in ./src/App.vue?vue&type=style&index=0&lang=scss (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss)
Module build failed: ModuleBuildError: Module build failed:
background-color: $blue;
^
Undefined variable: "$blue".
in /[path/to]/src/App.vue (line 59, column 21)
at runLoaders (/[path/to]/node_modules/webpack/lib/NormalModule.js:259:20)
at /[path/to]/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /[path/to]/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback (/[path/to]/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.asyncSassJobQueue.push [as callback] (/[path/to]/node_modules/sass-loader/lib/loader.js:67:13)
at Object.done [as callback] (/[path/to]/node_modules/neo-async/async.js:7974:18)
at options.error (/[path/to]/node_modules/node-sass/lib/index.js:294:32)
@ ./src/App.vue?vue&type=style&index=0&lang=scss 1:0-314 1:330-333 1:335-646 1:335-646
@ ./src/App.vue
@ ./src/main.js
@ multi ./node_modules/electron-webpack/vue-renderer-entry.js ./src/main.js
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-loader/dist/cjs.js?minimize=false!./dist/.renderer-index-template.html 260 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/sass-loader/lib/loader.js!node_modules/vue-loader/lib/index.js??vue-loader-options!src/App.vue?vue&type=style&index=0&lang=scss:
[0] ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss 208 bytes {0} [built] [failed] [1 error]
ERROR in ./src/App.vue?vue&type=style&index=0&lang=scss (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss)
Module build failed:
background-color: $blue;
^
Undefined variable: "$blue".
in /[path/to]/src/App.vue (line 59, column 21)
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/sass-loader/lib/loader.js!node_modules/vue-loader/lib/index.js??vue-loader-options!src/components/AttractOverlay.vue?vue&type=style&index=0&id=0eb1c98a&scoped=true&lang=scss:
[0] ./src/assets/attract-overlay-wave.svg 465 bytes {0} [built]
+ 3 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/vue-loader/lib/index.js??vue-loader-options!src/components/SvgDefs.vue?vue&type=style&index=0&lang=css:
2 modules
ERROR Error: electron-webpack exited with code 2.
Error: electron-webpack exited with code 2.
at ChildProcess.child.on.code (/[path/to]/node_modules/vue-cli-plugin-electron-builder/index.js:40:20)
at ChildProcess.emit (events.js:132:15)
at Process.ChildProcess._handle.onexit (internal/child_process.js:209:12)
error Command failed with exit code 1.
Is your feature request related to a problem? Please describe.
I would like to access my main electron process logs from devtools instead of reading them in the terminal.
Describe the solution you'd like
This could be done in a NodeJS environment by passing --inspect=[PORT]
or --inspect-brk=[PORT]
to the serve:electron
script. This way, we could use the extension Node Inspector Manager to automatically open/reload our devtools tab.
Describe alternatives you've considered
No alternatives considered.
I have no idea if it is possible to implement this in the vue-cli-plugin-electron-builder
without editing other vue-cli
specific files.
Running npm run serve:electron
works fine on Windows but fails on macOS with the following error:
Error: spawn /Users/tlindsey/gitlab/project-name\node_modules\.bin\electron-webpack ENOENT
It appears that there are backslashes in the path which I suspect is part of the problem.
Some people have reported that serve:electron gets stuck on Launching Electron. This issue is created to centralize these reports.
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.
vue-cli: 3.0.0-rc.1
vue-cli-plugin-electron-builder: 0.3.2
https://github.com/TAGC/vue-electron-bug
lib
, install dependencies and build it with npm run build
.app
, install dependencies.npm run serve
. Open the browser devtools and check for errors in the console while clicking the button.npm run electron:serve
. Repeat the above procedure, monitoring for errors in the Electron devtools console.No console errors should appear in either case.
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.
Describe the bug
The webpack aliases created in vue.config.js are not being resolved.
To Reproduce
npm run serve:electron
Expected behavior
The same alias configuration works with npm run serve
& build is being created successfully. It fails with this plugin only.
Screenshots
npm run serve:electron
Environment (please complete the following information):
Describe the bug
Currently I'm having problems using the Problem with using dugite module, I'm trying to use a simple function to get the status of a directory, but when importing the module and calling the function it says it can not find the executable, see the image below :
To Reproduce
Steps to reproduce the behavior:
npm i dugite --save
<template>
<div id="app">
</div>
</template>
<script>
import { GitProcess } from 'dugite'
export default {
mounted () {
let path = 'path for your cloned repositorie in step 3'
GitProcess.exec(['status', '-s'], path)
.then((result) => {
console.log(result)
})
}
}
</script>
Expected behavior
It should display a list of files or some git executable message
Environment (please complete the following information):
Additional context
My package.json
{
"name": "gitlab-discovery",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"build:electron": "vue-cli-service build:electron",
"serve:electron": "vue-cli-service serve:electron"
},
"dependencies": {
"dugite": "^1.69.0",
"gitlab": "^3.7.0",
"moment": "^2.22.2",
"vue": "^2.5.16",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-rc.10",
"@vue/cli-plugin-eslint": "^3.0.0-rc.10",
"@vue/cli-service": "^3.0.0-rc.10",
"css-loader": "^1.0.0",
"electron": "^2.0.2",
"eslint-config-standard": "^11.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.0",
"eslint-plugin-html": "^4.0.5",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"node-sass": "^4.9.2",
"sass-loader": "^7.1.0",
"vue-cli-plugin-electron-builder": "^1.0.0-beta.6",
"vue-template-compiler": "^2.5.16"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"main": "dist_electron/bundled/background.js"
}
I thank you all from now on!
Hello 👋
Would be possible to change the renderer process file name and path, like how we can with the main by using mainProcessFile
config option?
I tried to look into the source, but couldn't find a sane way to do it.
Thanks in advance!
Describe the bug
When using Axios or Request (or some other modules that doesn't have .ts
files), it looks like TS (and/or Electron) doesn't want to resolve modules with .js
files and expect .ts
file extension.
To reproduce
vue-cli-plugin-electron-builder
.yarn add request
or yarn add axios
.background.ts
:import request from 'request';
// OR
import axios from 'axios';
// try to call the imported module, in this case axios:
console.log(axios);
yarn serve:electron
.Bundling main process
step.Expected behavior
Should properly import modules.
Screenshots
No screenshots so I'm putting logs:
./node_modules/axios/index.js
Module not found:
Error: Can't resolve './lib/axios' in '/Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios'
resolve './lib/axios' in '/Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios'
using description file: /Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/package.json (relative path: .)
using description file: /Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/package.json (relative path: ./lib/axios)
no extension /Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/lib/axios doesn't exist .ts
/Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/lib/axios.ts doesn't exist
as directory /Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/lib/axios doesn't exist
[/Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/lib/axios]
[/Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/lib/axios.ts]
@ ./node_modules/axios/index.js 1:17-39
@ ./src/background.ts
@ multi ./src/background.ts'
Environment:
import-error
)HelloWorld_vue.txt
package_json.txt
I am trying to use Mobile-friendly picture file input Vue.js component (link: https://github.com/alessiomaffeis/vue-picture-input) in my Vue.js Electron project, but it causes following error message in console:
Uncaught SyntaxError: Unexpected token < at createScript (vm.js:80) at Object.runInThisContext (vm.js:139) at Module._compile (module.js:606) at Object.Module._extensions..js (module.js:653) at Module.load (module.js:561) at tryModuleLoad (module.js:504) at Function.Module._load (module.js:496) at Module.require (module.js:586) at require (internal/module.js:11) at eval (external "vue-picture-input"?62dd:1)
I installed it via npm install vue-picture-inpu --save
.
My component example:
`
`
and package.json:
{ "name": "vue-js-cli3-electron", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit", "build:electron": "vue-cli-service build:electron", "serve:electron": "vue-cli-service serve:electron" }, "dependencies": { "source-map-support": "^0.5.4", "vue": "^2.5.16", "vue-picture-input": "^2.1.6", "vuex": "^3.0.1" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.0.0-beta.15", "@vue/cli-plugin-eslint": "^3.0.0-beta.15", "@vue/cli-plugin-unit-jest": "^3.0.0-beta.15", "@vue/cli-service": "^3.0.0-beta.15", "@vue/test-utils": "^1.0.0-beta.16", "babel-core": "7.0.0-bridge.0", "babel-jest": "^22.4.3", "electron": "^2.0.2", "electron-builder": "^20.14.7", "electron-webpack": "^2.1.2", "vue-cli-plugin-electron-builder": "^0.3.2", "vue-template-compiler": "^2.5.16" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "jest": { "moduleFileExtensions": [ "js", "jsx", "json", "vue" ], "transform": { "^.+\\.vue$": "vue-jest", ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub", "^.+\\.jsx?$": "babel-jest" }, "moduleNameMapper": { "^@/(.*)$": "<rootDir>/src/$1" }, "snapshotSerializers": [ "jest-serializer-vue" ], "testMatch": [ "<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))" ] }, "electronWebpack": { "renderer": { "sourceDirectory": "src", "webpackConfig": "dist_electron/webpack.renderer.additions.js" }, "main": { "webpackConfig": "dist_electron/webpack.main.additions.js" } }, "build": { "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "node_modules/**/*", "package.json" ] } }
Is it possible to somehow fix this issue?
Thanks
If you plan to add QoL features for development, you can add Devtron for a specific Electron devtools tab and electron-timber for logging.
I don't really know if it is the appropriate place to provide them, or if it should be installed separately by the user.
Hi I just ran
npm install -g @vue/cli
vue create app # and I selected my own settings in the interactive CLI here
cd app
vue add electron-builder
yarn serve:electron
and I got this error:
yarn run v1.3.2
$ vue-cli-service serve:electron
{ Error: spawn /Users/lbombach/Projekte/emc-vue/packages/app/node_modules/.bin/webpack-dev-server ENOENT
at _errnoException (util.js:1003:13)
at Process.ChildProcess._handle.onexit (internal/child_process.js:201:19)
at onErrorNT (internal/child_process.js:389:16)
at process._tickCallback (internal/process/next_tick.js:152:19)
From previous event:
at /Users/lbombach/Projekte/emc-vue/node_modules/graceful-fs/polyfills.js:287:18
at FSReqWrap.oncomplete (fs.js:167:5)
From previous event:
at startRenderer (/Users/lbombach/Projekte/emc-vue/node_modules/electron-webpack/out/dev/WebpackDevServerManager.js:149:17)
at /Users/lbombach/Projekte/emc-vue/node_modules/electron-webpack/src/dev/dev-runner.ts:43:7
at Generator.next (<anonymous>)
at runCallback (timers.js:756:18)
at tryOnImmediate (timers.js:717:5)
at processImmediate [as _immediateCallback] (timers.js:697:5)
From previous event:
at DevRunner.start (/Users/lbombach/Projekte/emc-vue/node_modules/electron-webpack/src/dev/dev-runner.ts:32:14)
at /Users/lbombach/Projekte/emc-vue/node_modules/electron-webpack/src/dev/dev-runner.ts:142:19
at Generator.next (<anonymous>)
From previous event:
at main (/Users/lbombach/Projekte/emc-vue/node_modules/electron-webpack/out/dev/dev-runner.js:132:18)
at Object.<anonymous> (/Users/lbombach/Projekte/emc-vue/node_modules/electron-webpack/src/dev/dev-runner.ts:145:1)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at runInDevMode (/Users/lbombach/Projekte/emc-vue/node_modules/electron-webpack/out/cli.js:46:3)
at Object._yargs.default.command.command.command.command.command.argv [as handler] (/Users/lbombach/Projekte/emc-vue/node_modules/electron-webpack/out/cli.js:22:440)
at Object.runCommand (/Users/lbombach/Projekte/emc-vue/node_modules/electron-webpack/node_modules/yargs/lib/command.js:235:44)
at Object.parseArgs [as _parseArgs] (/Users/lbombach/Projekte/emc-vue/node_modules/electron-webpack/node_modules/yargs/yargs.js:1046:30)
at Object.get [as argv] (/Users/lbombach/Projekte/emc-vue/node_modules/electron-webpack/node_modules/yargs/yargs.js:989:21)
at Object.<anonymous> (/Users/lbombach/Projekte/emc-vue/node_modules/electron-webpack/out/cli.js:22:455)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
errno: 'ENOENT',
code: 'ENOENT',
syscall: 'spawn /Users/lbombach/Projekte/emc-vue/packages/app/node_modules/.bin/webpack-dev-server',
path: '/Users/lbombach/Projekte/emc-vue/packages/app/node_modules/.bin/webpack-dev-server',
spawnargs:
[ '--color',
'--env.autoClean=false',
'--config',
'/Users/lbombach/Projekte/emc-vue/node_modules/electron-webpack/webpack.renderer.config.js' ] }
Renderer WDS exited with code -2
I also tried adding electron
yarn add electron
but no luck. Any ideas?
Hi,
I am trying to build an electron app with vue and mongoose. But mongoose act as if it was loaded on a browser (which is not working).
const mongoose = require('mongoose')
console.log(mongoose.connect) // => "undefined"
I strongly suspect that this is because the renderer is built in webpack targeting web
isntead of electron-renderer
(https://webpack.js.org/configuration/target/). But I don't know how to test that.
Can you help me with that ?
Additionally, maybe that can be solved with a vue config file, but I don't know how.
Describe the bug
build:electron
building empty app window with no menus. Can't even find the error
To Reproduce
Steps to reproduce the behavior:
cd packages/@dotsync/app
npm install
npm run build:electron
Expected behavior
App should be produced when opened that should render my file and menus.
Environment (please complete the following information):
Hi,
Please update project "devDependencies" and "dependencies" to latest, especially :
Thank you very much.
Hi! Thanks for your plugin, is amazing how easily I could add the plugin and create an app without a single line of code.
The only issue I found is that I configured some loaderOptions in vue.config.js
and both electron:serve and electron:build crashed because they skipped the import:
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "~@/assets/autoload";`
}
}
}
}
is this expected, or vue.config.js
should be used when launching electron?
thanks!
Is your feature request related to a problem? Please describe.
I have a rather large background.js/ts file due to what I am accomplishing in it. I'd like to split up parts of the file into different files. Unfortunately, it only restarts electron when the background.js/ts file is updated.
Describe the solution you'd like
I believe this could be worked around with making an array exposed in the configuration for adding files/globs to watch.
Describe alternatives you've considered
I've not thought of any other solutions.
P.S. I greatly appreciate the work you've put into this project! Thanks!
Describe the bug
When a dependency of your project has a peer dependency in their package.json and npm thinks it is not installed vcp-electron-builder errors out on build.
npm install just prints a warning but still builds fine.
To Reproduce
vue create my-app
cd my-app
npm install --save-dev [email protected]
vue invoke vue-cli-plugin-electron-builder
npm install --save [email protected] @firebase/app
npm run build
# npm WARN [email protected] requires a peer of firebase@>= 4.0.0 but none is installed. You must install peer dependencies yourself.
# build succeeds
npm run build:electron
# Unhandled rejection Error: Unresolved node modules: firebase
# build fails
Expected behavior
I expect a warning peer dependencies like npm run build
and the build to succeed.
Environment (please complete the following information):
Additional context
I install firebase using @firebase/app to save on bundle size when built for web. This is why I get the warning with npm run build
but my app will still function properly.
I actually don't use firebase for electron builds and instead use an on disk db which really makes this warning unimportant to me for electron builds.
λ vue add electron-builder
..
success Saved 1 new dependency.
✔ Successfully installed plugin: vue-cli-plugin-electron-builder
? Do you use TypeScript? No
ERROR RangeError: Array buffer allocation failed
RangeError: Array buffer allocation failed
at new ArrayBuffer ()
at createUnsafeArrayBuffer (buffer.js:93:12)
at createUnsafeBuffer (buffer.js:87:25)
at allocate (buffer.js:293:12)
at Function.Buffer.allocUnsafe (buffer.js:254:10)
at tryCreateBuffer (fs.js:528:21)
at Object.fs.readFileSync (fs.js:568:14)
at readFiles (C:\Users\vrv\AppData\Roaming\nvm\v8.10.0\node_modules@vue\cli\lib\invoke.js:35:12)
at process._tickCallback (internal/process/next_tick.js:188:7)
node v8.10.0 32, vue-cli v3.0.0-rc.3
after wait 3 min typescript, ERROR . Both npm and yarn.
Describe the bug
Hello! Thanks a lot to your for providing this plugin.
I tried to migrate my project from electron-webpack to vue-cli-plugin-electron-builder cause HMR is broken in electron-webpack atm.
I created a new project with vue cli and then merged the automatically created files with my project and deleted the unneccesary ones.
When I run serve:electron, I get the error shown in the screenshot. Note that leveldown is a native dependency in my project and shouldnt be included in Webpack.
With electron-webpack, the "renderer.js" webpack file has 4,000 lines.
With vue-cli-plugin-electron-builder, I get to 19,000 lines in "app.js"!
I suspected that webpack didn't externalize the node-modules.
So I then changed the vue.js.config to externalize all packages in my package.json by webpack (see below). Then, I get a strange path error. It seems to try to fetch modules from:
"C:[appfolder]\node_modules\electron\dist\resources\default_app.asar\node_modules"
"C:[appfolder]\node_modules\electron\dist\resources\node_modules"
"C:[appfolder]\node_modules\electron\dist\resources\electron.asar\renderer\api\exports"
and throws an error (cause package is located in "C:[appfolder]\node_modules")
To summarize:
Thanks a lot for your help.
To Reproduce
Steps to reproduce the behavior:
Environment (please complete the following information):
var nodeExternals = require('webpack-node-externals');
module.exports = {
pluginOptions: {
electronBuilder: {
chainWebpackRendererProcess: config => {
config.externals(nodeExternals(
{
modulesFromFile: true,
whitelist: ['vue']
}
))
return config
},
}
}
}
Hi, thanks for the plugin. Gets me close.
I'm able to yarn serve:electron
with no problem. yarn build:electron
seems ok too until I try to run the linux binary. I get Error: Cannot find module 'source-map-support/source-map-support.js'
.
I tried yarn add source-map-support
and yarn add source-map-support --dev
but neither seemed to help.
I've listed my build steps and versions.
Thanks.
$ vue create my-app
> default (babel, eslint)
$ cd my-app
$ vue add electron-builder
$ git checkout -- src/assets/logo.png public/favicon.ico # for whatever reason these files get corrupted
$ yarn serve:electron
# serves just fine.
$ yarn build:electron
yarn run v1.6.0
$ vue-cli-service build:electron
[1] Hash: bd8f7028819f7fd2208712a0941a1e9eb13302b3
Version: webpack 3.11.0
Child
Hash: bd8f7028819f7fd22087
Time: 1312ms
Asset Size Chunks Chunk Names
main.js 1.43 kB 0 [emitted] main
main.js.map 2.08 kB 0 [emitted] main
[0] multi ./src/main/index.js 28 bytes {0} [built]
[1] ./src/main/index.js 1.49 kB {0} [built]
+ 3 hidden modules
Child
Hash: 12a0941a1e9eb13302b3
Time: 6717ms
Asset Size Chunks Chunk Names
renderer.js 100 kB 0 [emitted] renderer
styles.css 381 bytes 0 [emitted] renderer
renderer.js.map 142 kB 0 [emitted] renderer
styles.css.map 87 bytes 0 [emitted] renderer
index.html 335 bytes [emitted]
[1] multi ./node_modules/electron-webpack/vue-renderer-entry.js ./src/main.js 40 bytes {0} [built]
[3] ./src/main.js + 7 modules 9.26 kB {0} [built]
[4] ./node_modules/extract-text-webpack-plugin/dist/loader.js?{"omit":1,"remove":true}!./node_modules/vue-style-loader!./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 41 bytes {0} [built]
[6] ./src/assets/logo.png 9.17 kB {0} [built]
[7] ./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 327 bytes [built]
[9] ./node_modules/vue-style-loader/lib/addStylesClient.js + 1 modules 6.87 kB [built]
+ 5 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-loader?minimize=false!/__virtual__/renderer-index.html 278 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js?minimize!node_modules/vue-loader/lib/style-compiler/index.js?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!node_modules/vue-loader/lib/selector.js?type=styles&index=0!src/App.vue:
[0] ./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 327 bytes {0} [built]
+ 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js?minimize!node_modules/vue-loader/lib/style-compiler/index.js?{"optionsId":"0","vue":true,"id":"data-v-2ebf6f26","scoped":true,"sourceMap":false}!node_modules/vue-loader/lib/selector.js?type=styles&index=0!src/components/HelloWorld.vue:
2 modules
• electron-builder version=20.10.0
• loaded configuration file=package.json ("build" field)
• loaded parent configuration file=/home/bdiz/dev/my-app/node_modules/electron-webpack/electron-builder.yml
• description is missed in the package.json appPackageFile=/home/bdiz/dev/my-app/package.json
• author is missed in the package.json appPackageFile=/home/bdiz/dev/my-app/package.json
• writing effective config file=dist_electron/electron-builder-effective-config.yaml
• no native production dependencies
• packaging platform=linux arch=x64 electron=1.8.4 appOutDir=dist_electron/linux-unpacked
• file source doesn't exist from=/home/bdiz/dev/my-app/static
• building target=snap arch=x64 file=dist_electron/my-app_0.1.0_amd64.snap
• building target=AppImage arch=x64 file=dist_electron/my-app-0.1.0-x86_64.AppImage
• application Linux category is set to default "Utility" reason=linux.category is not set and cannot map from macOS docs=https://electron.build/configuration/configuration#LinuxBuildOptions-category
• application Linux category is set to default "Utility" reason=linux.category is not set and cannot map from macOS docs=https://electron.build/configuration/configuration#LinuxBuildOptions-category
Done in 45.63s.
$ cd dist_electron/linux-unpacked/
$ ./my-app
A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module 'source-map-support/source-map-support.js'
at Module._resolveFilename (module.js:485:15)
at Function.Module._resolveFilename (/home/bdiz/dev/my-app/dist_electron/linux-unpacked/resources/electron.asar/common/reset-search-paths.js:35:12)
at Function.Module._load (module.js:437:25)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/home/bdiz/dev/my-app/dist_electron/linux-unpacked/resources/app.asar/main.js:1:156)
at Object.<anonymous> (/home/bdiz/dev/my-app/dist_electron/linux-unpacked/resources/app.asar/main.js:4:3)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
$ vue --version
3.0.0-beta.6
$ node --version
v8.5.0
$ yarn --version
1.6.0
$ cat package.json
...
"dependencies": {
"vue": "^2.5.13"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-beta.6",
"@vue/cli-plugin-eslint": "^3.0.0-beta.6",
"@vue/cli-service": "^3.0.0-beta.6",
"electron": "^1.8.4",
"electron-builder": "^20.8.1",
"electron-webpack": "^1.13.0",
"vue-cli-plugin-electron-builder": "^0.1.7",
"vue-template-compiler": "^2.5.13"
},
...
Launching Electron...
webpack:///./node_modules/vue-cli-plugin-electron-builder/lib/installVueDevtools/utils.js?:19
const savePath = (electron__WEBPACK_IMPORTED_MODULE_0__["remote"] || electron__WEBPACK_IMPORTED_MODULE_0___default.a).app.getPath('userData')
^
TypeError: Cannot read property 'getPath' of undefined
at getPath (webpack:///./node_modules/vue-cli-plugin-electron-builder/lib/installVueDevtools/utils.js?:19:125)
at eval (webpack:///./node_modules/vue-cli-plugin-electron-builder/lib/installVueDevtools/index.js?:20:125)
I need to play sound on "mounted()" of one component, how to access the mp3 file inside vue component?
i have a sound.mp3 inside src/assets folder
my component its on src/views folder
i try make it on mounted ():
const audio = new Audio('../assets/sound.mp3')
but i receive error on console in electron app, talking for error on source.
How best way to access those files?
Thanks!
Describe the bug
I've installed this plugin via the UI. The plugin installed successfully but I was not able to see the npm scripts added in package.json.
To Reproduce
Install the plugin via vue ui
Environment (please complete the following information):
I'm trying to create a project built on this boilerplate that uses TypeScript and the class-based API for defining Vue components:
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
const HelloWorldProps = Vue.extend({
props: {
msg: String
}
})
@Component
export default class HelloWorldComponent extends HelloWorldProps {
name: String = 'HelloWorld'
}
</script>
I want to be able to reference these components in main.ts
, which is the renderer entry-point:
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
However, to do this I need to override the configuration used for ts-loader
fed to WebPack. According to the docs, I need to do something like:
{
test: /\.tsx?$/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
From your README, I've tried to create a vue.config.js
file in the project root directory with this content:
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
]
}
},
pluginOptions: {
electronBuilder: {
webpackConfig: {
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
]
}
}
}
}
};
However, when I run npm run serve:electron
I get this error during the renderer build:
┏ Renderer -------------------
Error: Excepted condition but got [object Object] in {
"test": {},
"include": "undefined",
"exclude": "undefined"
}
at Function.normalizeRule (/home/<me>/Documents/my-electron-app/node_modules/webpack/lib/RuleSet.js:122:11)
I'm wondering if you happen to know how I can configure my project so that electron-builder
merges these with the configurations it provides to electron-webpack
.
Hi, I'm new to using electron. I made my app like this...
# Vue CLI v3.0.0-beta.16
vue create elec
vue add electron-builder
vue add vuetify
yarn serve:electron
When running the app, you can see that the icons aren't working. They are included in public/index.html
, but I don't know if electron even uses this file. Does it? If not, how can I include the material icons?
Here's the app I made to help save time reproducing https://github.com/maurop123/vuetify-electron-test/blob/master/public/index.html
yarn serve:electron works just fine
yarn build:electron, the build just finishes fine without any errors but when i run the app, it shows a blank window. using buefy and windows os.
I can't get a path to the logo in the assets folder of the default project.
I see you regularly update your custom vue-cli-service.tgz
, why you are not using the package from vuejs/vue-cli/packages?
Describe the bug
I am using a single code base to target web and electron. I have a need to import different modules depending on the build target. I am attempting to use webpack.NormalModuleReplacementPlugin to meet this need as it will not include code in the bundle which is not needed for build targets which it is not currently building.
To Reproduce
Create a vue.config like this:
var webpack = require('webpack');
module.exports = {
configureWebpack: () => {
let plugins = [
new webpack.NormalModuleReplacementPlugin(/(.*)-VUE_APP_PLATFORM(\.*)/, function(resource) {
resource.request = resource.request.replace(/-VUE_APP_PLATFORM/, `-${process.env.VUE_APP_PLATFORM}`);
})
];
return {
plugins,
};
}
};
Create a new env file called .env.electron-production:
NODE_ENV=production
VUE_APP_PLATFORM=electron
Optionally, create .env.web-production if you want to reproduce the pass case.
NODE_ENV=production
VUE_APP_PLATFORM=web
Create two files such as, db-web.js and db-electron.js.
Import these modules in your project code using the line:
import db from "../db-VUE_APP_PLATFORM";
Run vue-cli-plugin-electron-builder: vue-cli-service build:electron --mode electron-production
. (I've also tried first exporting VUE_APP_PLATFORM=electron
, but it does not effect the result).
This error is encountered:
ERROR in ./src/odm.js
Module not found: Error: Can't resolve '../db-VUE_APP_PLATFORM' in 'src'
Expected behavior
Expectation was the module would be found without error.
When building for web with vue-cli-service build --mode web-production
, this plugin succeeds and the modules are found by webpack.
Environment:
Thanks for this plugin!
First few lines of the error:
ERROR in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=stylus (./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=stylus)
Module parse failed: Identifier directly after number (23:11)
You may need an appropriate loader to handle this file type.
|
| h3
| margin 40px 0 0
|
| ul
@ ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=stylus 1:0-159 1:175-178 1:180-336 1:180-336
@ ./src/components/HelloWorld.vue
@ ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/About.vue?vue&type=script&lang=js
@ ./src/views/About.vue?vue&type=script&lang=js
@ ./src/views/About.vue
@ ./src/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/main.js
ERROR in ./src/graphql/MessageAdd.gql
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #import "./MessageFragment.gql"
|
| mutation messageAdd ($input: MessageInput!) {
@ ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ApolloExample.vue?vue&type=script&lang=js 74:0-61 95:20-40
@ ./src/components/ApolloExample.vue?vue&type=script&lang=js
@ ./src/components/ApolloExample.vue
@ ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js
@ ./src/views/Home.vue?vue&type=script&lang=js
@ ./src/views/Home.vue
@ ./src/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/main.js
ERROR in ./src/graphql/Messages.gql
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #import "./MessageFragment.gql"
|
| query messages {
@ ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ApolloExample.vue?vue&type=template&id=0515bc1b&scoped=true 71:26-60
@ ./src/components/ApolloExample.vue?vue&type=template&id=0515bc1b&scoped=true
@ ./src/components/ApolloExample.vue
@ ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js
@ ./src/views/Home.vue?vue&type=script&lang=js
@ ./src/views/Home.vue
@ ./src/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/main.js
ERROR in ./src/graphql/MessageAdded.gql
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #import "./MessageFragment.gql"
|
| subscription messageAdded {
@ ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ApolloExample.vue?vue&type=template&id=0515bc1b&scoped=true 106:24-62
@ ./src/components/ApolloExample.vue?vue&type=template&id=0515bc1b&scoped=true
@ ./src/components/ApolloExample.vue
@ ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js
@ ./src/views/Home.vue?vue&type=script&lang=js
@ ./src/views/Home.vue
@ ./src/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/main.js
I am really excited about this plugin and would be glad to test some different scenarios.
My environment:
Nodist, set Nodejs to be 8.11.1
Vue cli3 beta 11
Deps list:
"dependencies": {
"source-map-support": "^0.5.4",
"vue": "^2.5.16",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-beta.11",
"@vue/cli-plugin-eslint": "^3.0.0-beta.11",
"@vue/cli-service": "^3.0.0-beta.11",
"@vue/eslint-config-standard": "^3.0.0-beta.11",
"electron": "^2.0.2",
"electron-builder": "^20.14.7",
"electron-webpack": "^2.1.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-electron-builder": "^0.3.1",
"vue-template-compiler": "^2.5.16"
}
Process:
vue create
vue add electron-builder
npm run serve:electron
I get the error below, hit ctrl-c, electron launches and shows a cannot /get, everything closes
Build Error Message:
┏ Renderer -------------------
i 「wds」: Project is running at http://localhost:9080/
┗ ----------------------------
┏ Renderer -------------------
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from D:\dev\vue-electron\static, D:\dev\vue-electron\dist\renderer-dll
┗ ----------------------------
┏ Renderer -------------------
× 「wdm」: Hash: 87c65831edb78efcbf7a
Version: webpack 4.8.3
Time: 8556ms
Built at: 2018-05-25 08:24:29
1 asset
Entrypoint renderer = renderer.js
[./node_modules/css-hot-loader/hotModuleReplacement.js] 2.86 KiB {renderer} [built]
[./node_modules/electron-webpack/vue-renderer-entry.js] 116 bytes {renderer} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:9080] (webpack)-dev-server/client?http://localhost:9080 7.75 KiB {renderer} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {renderer} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {renderer} [built]
[./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {renderer} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.66 KiB {renderer} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {renderer} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.31 KiB {renderer} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.03 KiB {renderer} [built]
[./src/main.js] 300 bytes {renderer} [built]
[./src/router.js] 318 bytes {renderer} [built]
[0] multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/main.js 76 bytes {renderer} [built]
[./src/store.js] 142 bytes {renderer} [built]
[url] external "url" 42 bytes {renderer} [built]
+ 101 hidden modules
ERROR in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=656039f0&scoped=true&lang=stylus (./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=style&index=0&id=656039f0&scoped=true&lang=stylus)
Module parse failed: Identifier directly after number (44:11)
You may need an appropriate loader to handle this file type.
|
| h3
| margin 40px 0 0
|
| ul
@ ./src/components/HelloWorld.vue?vue&type=style&index=0&id=656039f0&scoped=true&lang=stylus 1:0-159 1:175-178 1:180-336 1:180-336
@ ./src/components/HelloWorld.vue
@ ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js
@ ./src/views/Home.vue?vue&type=script&lang=js
@ ./src/views/Home.vue
@ ./src/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/main.js
ERROR in ./src/App.vue?vue&type=style&index=0&lang=stylus (./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=stylus)
Module parse failed: Unexpected character '#' (12:0)
You may need an appropriate loader to handle this file type.
|
|
| #app
| font-family 'Avenir', Helvetica, Arial, sans-serif
| -webkit-font-smoothing antialiased
@ ./src/App.vue?vue&type=style&index=0&lang=stylus 1:0-125 1:141-144 1:146-268 1:146-268
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/main.js
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-loader/dist/cjs.js?minimize=false!./dist/.renderer-index-template.html] 330 bytes {0} [built]
┗ ----------------------------
┏ Renderer -------------------
i 「wdm」: Failed to compile.
┗ ----------------------------
Describe the bug
Get an error message on a clean project
Unhandled rejection TypeError: Cannot read property 'provider' of null
at /home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/publish/updateInfoBuilder.ts:93:40
From previous event:
at createUpdateInfoTasks (/home/erik/projects/apps/sippy/node_modules/app-builder-lib/out/publish/updateInfoBuilder.js:284:18)
at /home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/publish/PublishManager.ts:180:6
From previous event:
at PublishManager.artifactCreatedWithoutExplicitPublishConfig (/home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/publish/PublishManager.ts:182:5)
at EventEmitter.PublishManager.packager.artifactCreated.event (/home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/publish/PublishManager.ts:107:36)
at EventEmitter.emit (events.js:187:15)
at EventEmitter.emit (domain.js:442:20)
at Packager.dispatchArtifactCreated (/home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/packager.ts:235:23)
at /home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/targets/AppImageTarget.ts:80:19
From previous event:
at AppImageTarget.build (/home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/targets/AppImageTarget.ts:28:44)
at Function.buildAsyncTargets (/home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/platformPackager.ts:139:36)
at LinuxPackager.packageInDistributableFormat (/home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/platformPackager.ts:118:24)
at /home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/platformPackager.ts:113:10
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 LinuxPackager.pack (/home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/platformPackager.ts:110:95)
at /home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/packager.ts:376:24
at Generator.next (<anonymous>)
at xfs.stat (/home/erik/projects/apps/sippy/node_modules/fs-extra/lib/mkdirs/mkdirs.js:56:16)
at /home/erik/projects/apps/sippy/node_modules/graceful-fs/polyfills.js:287:18
at FSReqWrap.oncomplete (fs.js:159:5)
From previous event:
at Packager.doBuild (/home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/packager.ts:344:39)
at /home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/packager.ts:314:57
at Generator.next (<anonymous>)
at /home/erik/projects/apps/sippy/node_modules/graceful-fs/graceful-fs.js:99:16
at /home/erik/projects/apps/sippy/node_modules/graceful-fs/graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:145:20)
From previous event:
at Packager._build (/home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/packager.ts:285:133)
at /home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/packager.ts:281: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 (/home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/packager.ts:238:14)
at build (/home/erik/projects/apps/sippy/node_modules/app-builder-lib/src/index.ts:58:28)
at Object.build (/home/erik/projects/apps/sippy/node_modules/electron-builder/src/builder.ts:227:10)
at bundle.run (/home/erik/projects/apps/sippy/node_modules/vue-cli-plugin-electron-builder/index.js:164:12)
at finalCallback (/home/erik/projects/apps/sippy/node_modules/webpack/lib/Compiler.js:210:39)
at hooks.done.callAsync.err (/home/erik/projects/apps/sippy/node_modules/webpack/lib/Compiler.js:259:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/erik/projects/apps/sippy/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/erik/projects/apps/sippy/node_modules/tapable/lib/Hook.js:35:21)
at emitRecords.err (/home/erik/projects/apps/sippy/node_modules/webpack/lib/Compiler.js:257:22)
at Compiler.emitRecords (/home/erik/projects/apps/sippy/node_modules/webpack/lib/Compiler.js:372:39)
at emitAssets.err (/home/erik/projects/apps/sippy/node_modules/webpack/lib/Compiler.js:251:10)
at hooks.afterEmit.callAsync.err (/home/erik/projects/apps/sippy/node_modules/webpack/lib/Compiler.js:358:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/erik/projects/apps/sippy/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/erik/projects/apps/sippy/node_modules/tapable/lib/Hook.js:35:21)
at asyncLib.forEach.err (/home/erik/projects/apps/sippy/node_modules/webpack/lib/Compiler.js:355:27)
at done (/home/erik/projects/apps/sippy/node_modules/neo-async/async.js:2854:11)
at /home/erik/projects/apps/sippy/node_modules/neo-async/async.js:2805:7
at /home/erik/projects/apps/sippy/node_modules/graceful-fs/graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:145:20)
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Build without error
Environment (please complete the following information):
Additional context
Add any other context about the problem here.
Hi there, I attempted to change the main process entrypoint using the WebPack configuration in vue.config.js mentioned in the readme and did not have any success - serve:electron was still only looking for index/main/app.js in a main folder. I also could not find information on how to change the entrypoint for the renderer process from index/main/app.js in the root directory. Any more detailed instructions on how to configure these two entrypoints would be fantastic! Thanks!
Hi there, I am having issues after upgrading to the 1.0.0 beta when requiring the SQLite3 module. The version of my app running the 0.3.2 version of this plugin does not have this issue, and my app does run under the new version when I remove sqlite3 from the project. While bundling my main process (where SQLite3 is being run), I get an extremely long, unformatted error stack trace with errors like this:
Error: Can't resolve 'aws-sdk' in '/home/dylrich/dev/project/node_modules/node-pre-gyp/lib'.
Clearly there is some sort of issue happening with the interaction between this plugin, webpack, node-pre-gyp and sqlite3. No matter what I try I cannot get the package to bundle if SQLite3 is loaded anywhere. If anyone has some hints on how to sort this out so that I can use the updated 1.0.0 plugin that would be fantastic.
I have a vue cli project. But some alias are defined in vue.config.js.
Now build filed and show the errors such as "Module not found: Error: Can't resolve '@components/_globals'"
Im setting the icon file in background.js file but its not getting loaded for some reason.
const window = new BrowserWindow({ width: 1450, height: 750, icon: path.join(__dirname, "assets/icons/64x64.png") });
Hi!
I'm migrating my code to use typescript and class-based components, but I get below error in the console:
NOTE: This works in web mode as expected (yarn serve
).
Here my repository with sample code https://github.com/algil/vue-ts (look at src/modules/core/components/app-bar.vue
)
Any idea?
Thanks!
when the project are not used by git, Running completion hooks... ERROR Error: ENOENT: no such file or directory, open 'E:\xxxx.gitignore'
I'm using svn for the project, but error are outputed.
🚀 Invoking generator for vue-cli-plugin-electron-builder...
Hi!
HotModuleReplacement doesn't work in version alpha.9. I need to reload window in order to view changes.
Regards!
Project is not working with project from scratch
Steps:
vue create
Pakage manager: Yarn
Run the project with yarn serve:electron
Project should fail to compile.
stack trace:
ERROR in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=stylus (./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=stylus) 48:11
Module parse failed: Identifier directly after number (48:11)
You may need an appropriate loader to handle this file type.
|
| h3
> margin 40px 0 0
|
| ul
@ ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=stylus 1:0-159 1:175-178 1:180-336 1:180-336
@ ./src/components/HelloWorld.vue
@ ./node_modules/ts-loader??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=ts
@ ./src/views/Home.vue?vue&type=script&lang=ts
@ ./src/views/Home.vue
@ ./src/router.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/main.ts
ERROR in ./src/App.vue?vue&type=style&index=0&lang=stylus (./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=stylus) 12:0
Module parse failed: Unexpected character '#' (12:0)
You may need an appropriate loader to handle this file type.
|
|
> #app
| font-family 'Avenir', Helvetica, Arial, sans-serif
| -webkit-font-smoothing antialiased
@ ./src/App.vue?vue&type=style&index=0&lang=stylus 1:0-125 1:141-144 1:146-268 1:146-268
@ ./src/App.vue
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/main.ts
After creating a new project vue project using this plugin, I'm unable to serve my application as an electron process via npm run serve:electron
. The command fails with this exception:
> [email protected] serve:electron /Users/<me>/Documents/VSCode/vue-experiment
> vue-cli-service serve:electron
ERROR TypeError: api.setMode is not a function
TypeError: api.setMode is not a function
at api.registerCommand (/Users/<me>/Documents/VSCode/vue-experiment/node_modules/vue-cli-plugin-electron-builder/index.js:70:11)
at Service.run (/Users/<me>/Documents/VSCode/vue-experiment/node_modules/@vue/cli-service/lib/Service.js:167:12)
at Object.<anonymous> (/Users/<me>/Documents/VSCode/vue-experiment/node_modules/@vue/cli-service/bin/vue-cli-service.js:22:9)
at Module._compile (internal/modules/cjs/loader.js:654:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
at Function.Module._load (internal/modules/cjs/loader.js:498:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:695:10)
at startup (internal/bootstrap/node.js:201:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve:electron: `vue-cli-service serve:electron`
npm ERR! Exit status 1
npm ERR!
This behaviour occurs on both Windows and macOS. Serving normally (via npm run serve
) works fine.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.