Git Product home page Git Product logo

vue-cli-plugin-electron-builder's Introduction

Vue CLI Plugin Electron Builder

Easily Build Your Vue.js App For Desktop With Electron

Build status: Build status

Sponsor

Top Supporters

Glenn Frank
Glenn Frank

Quick Start:

Open a terminal in the directory of your app created with Vue-CLI 3 or 4 (4 is recommended).

Then, install and invoke the generator of vue-cli-plugin-electron-builder by running:

vue add electron-builder

That's It! You're ready to go!

To start a development server:

If you use Yarn:

yarn electron:serve

or if you use NPM:

npm run electron:serve

To build your app:

With Yarn:

yarn electron:build

or with NPM:

npm run electron:build

To see more documentation, visit our website.

Supporters

Yves Hoppe durairajasivam Alec Armbruster Tilen Hosnar Andrew LeTourneau
Yves Hoppe durairajasivam Alec Armbruster Tilen Hosnar Andrew LeTourneau
Kalila Lakeworth Eric Schirtzinger Karim Hossenbux Decentralized Justice
Kalila Lakeworth Eric Schirtzinger Karim Hossenbux Decentralized Justice

Past Supporters

Mitch Dennet Chris Hayes
Mary-Tyler-Moore Mitch Dennet Chris Hayes

vue-cli-plugin-electron-builder's People

Contributors

akryum avatar alexanderl19 avatar cawa-93 avatar dciprian-petrisor avatar dependabot-preview[bot] avatar dependabot[bot] avatar desuuuu avatar greenkeeper[bot] avatar hfitzwater avatar jaredmcateer avatar jason-chang avatar jayvdb avatar juchan1220 avatar klren0312 avatar kpes avatar lingo avatar mathieutu avatar matthijsburgh avatar mefyl avatar nklayman avatar permafrost06 avatar rathboma avatar sarotnem avatar sd-gaming avatar tomas-pecserke avatar tommytrg avatar vcourdy avatar wenyinwei avatar yojoe avatar yoyoys avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-cli-plugin-electron-builder's Issues

ERROR! Cannot read property 'getPath' of undefined

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)

`npm run serve:electron` results in `TypeError: api.setMode is not a function`

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.

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

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

  1. Go into lib, install dependencies and build it with npm run build.
  2. Go into app, install dependencies.
  3. 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.
  4. 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.

Running linux executable throws "Error: Cannot find module 'source-map-support/source-map-support.js'"

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"
  },
...

serve:electron fails

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.

yarn-error.log

Empty mac app window

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:

  1. Clone git://github.com/osapps/dotsync
  2. cd packages/@dotsync/app
  3. npm install
  4. 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):

  • OS and version: Mac
  • Node version: 10
  • npm version:
  • yarn version (if used): 1.9.4
  • vue-cli-plugin-electron-builder version : 1.0.0-beta.6
  • other vue plugins used:
  • custom config for vcp-electron-builder:
  • (if possible) link to your repo:

Problem with using dugite

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:

  1. create a new project whith vue-cli-plugin-electron-builder
  2. install dugite module: npm i dugite --save
  3. clone any repository with git
  4. update your App.vue for this:
<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>
  1. Run!

Expected behavior
It should display a list of files or some git executable message

Screenshots
captura de tela 38

Environment (please complete the following information):

  • OS and version: Windows 10 x64 1803
  • Node version: 8.11.1
  • npm version: 5.6.0
  • vue-cli-plugin-electron-builder version : 1.0.0-beta.6
  • other vue plugins used: Vuex

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!

Uncaught SyntaxError: Unexpected token <

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:

`

{{ msg }}

<script> import PictureInput from 'vue-picture-input'; export default { name: 'HelloWorld', props: { msg: String }, components:{ PictureInput } } </script> <style scoped> </style>

`

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

Issues after Upgrading to 1.0.0 beta with SQLite 3

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.

Set Vue and Electron env variables

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!

Some modules can't be resolved and successfully imported using TypeScript (can't resolve .ts in modules index)

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

  • Generate a project using Vue-CLI (Vue + Typescript), invoke vue-cli-plugin-electron-builder.
  • yarn add request or yarn add axios.
  • Import the module into your background.ts:
import request from 'request';
// OR
import axios from 'axios';

// try to call the imported module, in this case axios:
console.log(axios);
  • Run yarn serve:electron.
  • Errors will pop at 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:

  • OS and version: macOS High Sierra 10.13.5
  • Node version: 8.11.2
  • npm version: 6.1.0
  • yarn version (if used): 1.7.0
  • vue-cli-plugin-electron-builder version: 1.0.0-beta.5
  • other vue plugins used: TypeScript, Vuex
  • custom config for vcp-electron-builder: none
  • link to your repo:

Unable to get webpack.NormalModuleReplacementPlugin working when building for electron

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:

  • OS and version: Ubuntu 16.10
  • Node version: v10.5.0
  • npm version: 6.1.0
  • yarn version (if used):
  • vue-cli-plugin-electron-builder version : 0.3.2
  • vue/cli-service: 3.0.0-rc.3
  • other vue plugins used: none
  • custom config for vcp-electron-builder: none
  • (if possible) link to your repo: not possible

Thanks for this plugin!

Include Google Fonts Material Icons

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

Running completion hooks... ERROR Error: ENOENT: no such file or directory, open 'E:\xxxx\.gitignore'

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...

  • Running completion hooks... ERROR Error: ENOENT: no such file or directory, open 'E:\xxx.gitignore'
    Error: ENOENT: no such file or directory, open 'E:\xxxx.gitignore'
    at Object.fs.openSync (fs.js:646:18)
    at Object.fs.readFileSync (fs.js:551:33)
    at api.onCreateComplete (E:\xxxx\node_modules\vue-cli-plugin-electron-builder\generator\index.js:8:24)
    at invoke (C:\Users\xxx\AppData\Roaming\npm\node_modules@vue\cli\lib\invoke.js:123:13)
    at

assets not working

I can't get a path to the logo in the assets folder of the default project.

Is there any way to set webpack config for main process through this plugin?

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.

Can't use Element UI

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.

Ability to set --inspect or --inspect-brk with a port

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.

Not reading vue.config.js

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!

Possibility to change renderer process file name and path

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!

Add extra utils for development?

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.

Error on build with electron and typescript

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):

  • Ubuntu 18
  • Node 10
  • vue-cli 3

Additional context
Add any other context about the problem here.

Not working with stylus preprocessor

Project is not working with project from scratch

Steps:

  1. Create a new project with vue create
  2. Choose stylus as a preprocessor
  3. Choose typescript + jest + cypress + eslint (prettier)

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

Webpack configuration extensions containing regular expressions are serialized incorrectly

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.

Dashboard Support

Task serve:electron don't have "Dashboard" page like task serve.

Dashboard page of serve:electron

Dashboard page of serve

Is it a bug or unimplemented feature?

Webpack aliases not working

Describe the bug
The webpack aliases created in vue.config.js are not being resolved.

To Reproduce

  • Create a project with Vue CLI UI
  • Install vue-cli-plugin-electron-builder via terminal
  • Create a vue.config.js and add aliases
  • Run the command 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
image


npm run serve
image

Environment (please complete the following information):

  • OS and version: macOS Mojave
  • Node version: 10.6.0
  • npm version: 6.2.0
  • vue-cli-plugin-electron-builder version : 1.0.0-beta.8

Plugin changes _gitignore too much :)

I've created a new vue-cli 3 project with e2e option as selenium. Plugin removes lines

/tests/e2e/reports/
selenium-debug.log

from gitignore after installation. I guess it is because it extends default _gitignore, which lacks those options for some reason.

screen shot 2018-05-18 at 13 13 38

HMR doesn't work

Hi!

HotModuleReplacement doesn't work in version alpha.9. I need to reload window in order to view changes.

Regards!

Turn dependency peer requirements from error to warning during build

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):

  • OS and version: Ubuntu 16.10
  • Node version: v10.5.0
  • npm version: 6.1.0
  • yarn version (if used):
  • vue-cli-plugin-electron-builder version : 1.0.0-beta-5
  • vue/cli-service: 3.0.0-rc.3
  • other vue plugins used: none
  • custom config for vcp-electron-builder: none
  • (if possible) link to your repo: not possible

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.

Play MP3 file

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!

Errors retrieving paths, node-module externalization?

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.

image

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:

  • Something's wrong with the module externalization
  • Something's wrong with the path.

Thanks a lot for your help.

To Reproduce
Steps to reproduce the behavior:

  • Add node-modules as webpack.externals
  • Check projects with native libraries

Environment (please complete the following information):

  • OS and version: Win 10 x64 Prof
  • Node version: 8.11.4
  • npm version: recent
  • yarn version (if used): recent
  • other vue plugins used:
    "vue": "^2.5.17",
    "vue-async-computed": "^3.4.0",
    "vue-electron": "^1.0.6",
    "vue-router": "^3.0.1",
    "vue-shortkey": "^3.0.2",
    "vuedraggable": "^2.16.0",
    "vuetify": "^1.1.11"
    "@vue/cli-plugin-babel": "^3.0.0",
    "@vue/cli-plugin-eslint": "^3.0.0",
    "@vue/cli-plugin-unit-jest": "^3.0.0",
    "@vue/cli-service": "^3.0.0",
    "@vue/eslint-config-standard": "^3.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "vue-cli-plugin-electron-builder": "^1.0.0-beta.6",
    "vue-template-compiler": "^2.5.17",
  • custom config for vcp-electron-builder:
var nodeExternals = require('webpack-node-externals');
module.exports = {
  pluginOptions: {
    electronBuilder: {
      chainWebpackRendererProcess: config => {
        config.externals(nodeExternals(
          {
            modulesFromFile: true,
            whitelist: ['vue']
          }
        ))
        return config
      },
  }
}
}

Installing a plugin via Vue CLI UI

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):

  • OS and version: macOS Mojave
  • Node version: 10.6.0
  • npm version: 6.2.0
  • vue-cli-plugin-electron-builder version : 1.0.0-beta.8

Doesn't work with yarn workspaces

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?

App Icon is not getting loaded

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") });

Use with mongoose

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.

  • OS and version: Windows 10
  • Node version: 10.9.0
  • vue-cli-plugin-electron-builder version : 1.0.0-rc.1

Best way to change the renderer and main process entry point?

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!

vue.config.js support

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'"

Expose settings for other files to watch for restarting Electron in serve:electron

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!

install ERROR after TypeScript

λ 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.

npm run serve:electron fails on macOS

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.

Unable to use with Stylus & GraphQL

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

Any idea why scss variables are undefined though they work with non-electron builds?

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.

Created Basic Project, Won't Run

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.

┗ ----------------------------

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.