electron-userland/electron-webpack-quick-start

A bare minimum project structure to get started developing with electron-webpack.

electron-webpack-quick-start

A bare minimum project structure to get started developing with electron-webpack.

Thanks to the power of electron-webpack this template comes packed with...

• Use of webpack-dev-server for development
• HMR for both renderer and main processes
• Use of babel-preset-env that is automatically configured based on your electron version
• Use of electron-builder to package and build a distributable electron application

Make sure to check out electron-webpack's documentation for more details.

Getting Started

Simply clone down this repository, install dependencies, and get started on your application.

The use of the yarn package manager is strongly recommended, as opposed to using npm.

# create a directory of your choice, and copy template using curl
mkdir new-electron-webpack-project && cd new-electron-webpack-project
curl -fsSL https://github.com/electron-userland/electron-webpack-quick-start/archive/master.tar.gz | tar -xz --strip-components 1

# or copy template using git clone
git clone https://github.com/electron-userland/electron-webpack-quick-start.git
cd electron-webpack-quick-start
rm -rf .git

# install dependencies
yarn

Development Scripts

# run application in development mode
yarn dev

# compile source code and create webpack output
yarn compile

# `yarn compile` & create build with electron-builder
yarn dist

# `yarn compile` & create unpacked build with electron-builder
yarn dist:dir

electron-webpack-quick-start's Issues

yarn.lock file in repo

Not sure that it's needed in repo. I decided to clone repo as quickstart, and stumbled upon some problems while running yarn install until removed lock file.

Error on Mac

On Linux it seems to work fine but on Mac i get the following error on node v9.7.1

yarn dev v0.21.3
$ electron-webpack dev
{ Error: spawn /Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/.bin/webpack-dev-server 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:114:19)
From previous event:
    at /Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/electron-webpack/src/dev/WebpackDevServerManager.ts:47:10
    at Generator.next (<anonymous>)
    at /Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/graceful-fs/polyfills.js:287:18
    at FSReqWrap.oncomplete (fs.js:171:5)
From previous event:
    at startRenderer (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/electron-webpack/out/dev/WebpackDevServerManager.js:72:21)
    at /Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/electron-webpack/src/dev/dev-runner.ts:43:7
    at Generator.next (<anonymous>)
    at runCallback (timers.js:763:18)
    at tryOnImmediate (timers.js:734:5)
    at processImmediate (timers.js:716:5)
From previous event:
    at DevRunner.start (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/electron-webpack/out/dev/dev-runner.js:133:11)
    at /Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/electron-webpack/src/dev/dev-runner.ts:140:19
    at Generator.next (<anonymous>)
From previous event:
    at main (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/electron-webpack/out/dev/dev-runner.js:42:22)
    at Object.<anonymous> (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/electron-webpack/src/dev/dev-runner.ts:143:1)
    at Module._compile (module.js:662:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)
    at Module.require (module.js:606:17)
    at require (internal/module.js:11:18)
    at runInDevMode (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/electron-webpack/src/cli.ts:36:2)
    at Object.default.command.command.command.command.command.argv [as handler] (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/electron-webpack/src/cli.ts:16:16)
    at Object.runCommand (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/yargs/lib/command.js:235:44)
    at Object.parseArgs [as _parseArgs] (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/yargs/yargs.js:1014:30)
    at Object.get [as argv] (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/yargs/yargs.js:957:21)
    at Object.<anonymous> (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/electron-webpack/src/cli.ts:16:16)
    at Module._compile (module.js:662:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
  errno: 'ENOENT',
  code: 'ENOENT',
  syscall: 'spawn /Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/.bin/webpack-dev-server',
  path: '/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/.bin/webpack-dev-server',
  spawnargs:
   [ '--color',
     '--env.autoClean=false',
     '--config',
     '/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/electron-webpack/webpack.renderer.config.js' ] }
Renderer WDS exited with code -2
┏ Main -----------------------

  Hash: eb639e0b9979ebc4a273
  Version: webpack 3.11.0
  Time: 513ms
    Asset   Size  Chunks             Chunk Names
  main.js  40 kB       0  [emitted]  main
  [./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js] ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js 559 bytes {0} [built]
  [./src/main/index.js] ./src/main/index.js 1.46 kB {0} [built]
  [electron] external "electron" 42 bytes {0} [not cacheable]
  [electron-webpack/out/electron-main-hmr/HmrClient] external "electron-webpack/out/electron-main-hmr/HmrClient" 42 bytes {0} [not cacheable]
  [path] external "path" 42 bytes {0} [not cacheable]
  [source-map-support/source-map-support.js] external "source-map-support/source-map-support.js" 42 bytes {0} [not cacheable]
  [url] external "url" 42 bytes {0} [not cacheable]
     [0] multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/main/index.js 40 bytes {0} [built]

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

Manually adding webpack-cli and webpack-dev-server results in a different error

  TypeError: Cannot read property 'compile' of undefined
      at addCompilerHooks (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/webpack-dev-server/lib/Server.js:71:16)
      at new Server (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/webpack-dev-server/lib/Server.js:81:5)
      at startDevServer (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/webpack-dev-server/bin/webpack-dev-server.js:398:14)
      at processOptions (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/webpack-dev-server/bin/webpack-dev-server.js:361:5)
      at runCallback (timers.js:763:18)
      at tryOnImmediate (timers.js:734:5)
      at processImmediate (timers.js:716:5)
  From previous event:
      at processOptions (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/webpack-dev-server/bin/webpack-dev-server.js:241:20)
      at Object.<anonymous> (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/webpack-dev-server/bin/webpack-dev-server.js:504:1)
      at Module._compile (module.js:662:30)
      at Object.Module._extensions..js (module.js:673:10)
      at Module.load (module.js:575:32)
      at tryModuleLoad (module.js:515:12)
      at Function.Module._load (module.js:507:3)
      at Function.Module.runMain (module.js:703:10)
      at startup (bootstrap_node.js:193:16)
      at bootstrap_node.js:660:3

┗ ----------------------------
Error: Renderer WDS exited with code 0
    at ChildProcessManager.child.on.code (/Users/chrisdekok/Projects/electron-webpack-quick-start/node_modules/electron-webpack/src/dev/ChildProcessManager.ts:60:32)

Running dev command won't open application

Hello,
When I run ./node_modules/.bin/electron-webpack dev my application does not open. It compiles successfully (albeit with warnings), yet doesn't open the application.

After looking through the debug log there appears to be no trace of launching the application; furthermore, when using the quick start template, the app also failed to launch in dev mode (but launched when a production build was built).

I have tried creating a production build for my project, only to be greeted by:

App threw an error during load
Error: [HMR] Env ELECTRON_HMR_SOCKET_PATH is not set
    at eval (webpack-internal:///./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js:6:11)
    at Object../node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:3286:1)
    at __webpack_require__ (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:655:30)
    at fn (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:65:20)
    at Object.0 (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:3482:1)
    at __webpack_require__ (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:655:30)
    at D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:701:37
    at Object.<anonymous> (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:704:10)
    at Object.<anonymous> (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:3552:3)
    at Module._compile (module.js:571:32)

Please note that this is my second attempt at webpack in electron after electron-compile stopped working (see electron-userland/electron-compile#287).

Any help will be appreciated & thanks in advanced!

Webview tag

Hey, is there a recommended way to use the webview tag?

__static doesn't work for images in development

How are we supposed to use simple images?

I'm trying to add a simple <img src="..." to my app. I have placed myimg.png in the static folder. When I set the image source to simply myimg.png, everything works in dev mode, but the image does not show up in production (presumably since it's in a resources subfolder).

On the other hand, if I prefix the filename with __static, it works in production mode, but in debug mode I get the following error in Chrome DevTools:

Not allowed to load local resource: file:///<repo folder>/static/myimg.png

Docker does not working

Hi.
I use this in Docker. But Docker doesn't work correctly.

my environment

win 10 pro
Docker for windows

Unable to yarn dev a fresh clone

Fresh clone of electron-webpack. Should i be able to yarn dev this? I also get the same error on my existing app.

D:\projects\electron-webpack-quick-start>yarn
yarn install v0.24.5
[1/5] Resolving packages...
success Already up-to-date.
Done in 1.00s.

D:\projects\electron-webpack-quick-start>yarn dev
yarn dev v0.24.5
$ electron-webpack dev
┏ Renderer -------------------

CreateProcess failed with error 2: The system cannot find the file specified.

┗ ----------------------------
Error: Renderer WDS exited with code 0
at ChildProcessManager.child.on.code (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\ChildProce
ssManager.ts:60:32)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:194:7)
at maybeClose (internal/child_process.js:899:16)
at Socket. (internal/child_process.js:342:11)
at emitOne (events.js:96:13)
at Socket.emit (events.js:191:7)
at Pipe._handle.close [as _onclose] (net.js:511:12)
From previous event:
at D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\WebpackDevServerManager.ts:47:10
at Generator.next ()
at D:\projects\electron-webpack-quick-start\node_modules\graceful-fs\polyfills.js:287:18
at FSReqWrap.oncomplete (fs.js:114:15)
From previous event:
at startRenderer (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\out\dev\WebpackDevServerManager.js:72:
21)
at D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\dev-runner.ts:37:7
at Generator.next ()
From previous event:
at DevRunner.start (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\out\dev\dev-runner.js:122:11)
at D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\dev-runner.ts:131:19
at Generator.next ()
From previous event:
at main (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\out\dev\dev-runner.js:42:22)
at Object. (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\dev-runner.ts:134:1)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at runInDevMode (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\cli.ts:36:2)
at Object.__dirname.default.command.command.command.command.command.argv [as handler] (D:\projects\electron-webpack-quick-start
\node_modules\electron-webpack\src\cli.ts:16:16)
at Object.runCommand (D:\projects\electron-webpack-quick-start\node_modules\yargs\lib\command.js:226:22)
at Object.parseArgs [as _parseArgs] (D:\projects\electron-webpack-quick-start\node_modules\yargs\yargs.js:970:30)
at Object.get [as argv] (D:\projects\electron-webpack-quick-start\node_modules\yargs\yargs.js:912:21)
at Object. (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\cli.ts:16:16)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
┏ Main -----------------------

Hash: 5905c4b8b84576d437f9
Version: webpack 3.6.0
Time: 773ms
Asset Size Chunks Chunk Names
main.js 37.3 kB 0 [emitted] main
[./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js] ./node_modules/electron-webpack/out/electron-main-hmr/main-hm
r.js 559 bytes {0} [built]
[./src/main/index.js] ./src/main/index.js 1.22 kB {0} [built]
[electron] external "electron" 42 bytes {0} [not cacheable]
[electron-webpack/out/electron-main-hmr/HmrClient] external "electron-webpack/out/electron-main-hmr/HmrClient" 42 bytes {0} [not
cacheable]
[source-map-support/source-map-support.js] external "source-map-support/source-map-support.js" 42 bytes {0} [not cacheable]
[0] multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/main/index.js 40 bytes {0} [built]

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

"serialport" package causes crash in dev mode

Platform: Windows 10
Node: v10.16.0
Npm: 6.9.0
Yarn: 1.16.0

Hey! I've just freshly git cloned this repo and installed serialport": "^7.1.5.
Then I added these lines to src/main/index.js and after I run npm run dev node crashes without any error.

import SerialPort from 'serialport'

SerialPort.list()
  .then(ports => {
    console.log(ports)
  })
  .catch(error => {
    console.log(error)
  })

Here's output

Could you give any advice?

Modifying Webpack Configurations error

I have followed below tutorial to modify webpack configuration but this occurs an error.
https://webpack.electron.build/modifying-webpack-configurations

  Module build failed (from ./node_modules/babel-loader/lib/index.js):
  Error: [BABEL] D:\workspace\5-Seaters-Desktop\src\renderer\index.js: .default is not a valid Plugin property

I have not changed any other codes and also tried solution from follwing link.
https://stackoverflow.com/questions/52109671/babel-default-is-not-a-valid-plugin-property-at-object-keys-foreach-key/52110352#52110352

Can't modify webpack configuration: .default is not a valid Plugin property

Hi,

My conf is: Win7, node v8.12.0, yarn 1.9.2. Here's what I did :

git clone https://github.com/electron-userland/electron-webpack-quick-start.git my-app

I changed package.json, adding:

{

  "electronWebpack": {
    "renderer": {
      "webpackConfig": "webpack.renderer.additions.js"
    }
  }
}

My webpack.renderer.additions.js contains just nothing for the moment (to be sure the problem doesn't come from any third party lib, as you see I plan to use handlebars):

module.exports = {
    module: {
        rules: [
            // {
            //     test: /\.hbs$/,
            //     use: ['handlebars-loader']
            // }
        ]
    }
}

I cleaned the src/renderer/index.js => blank

and when I do yarn dev, I get :

ERROR in ./src/renderer/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] D:\...\my-app\src\renderer\index.js: .default is not a valid Plugin property

How can I fix the problem?
When I remove "electronWebpack..." from package.json, it works fine. It seems I can't modify the webpack conf...

yarn dist gets stuck in macos high sierra

➜  electron-webpack-quick-start yarn dist
yarn run v1.1.0
$ yarn compile && electron-builder
[1] Hash: e9cc1cac9797f7917ed457bce8a7ecb870a59ad5
Version: webpack 3.6.0
Child
    Hash: e9cc1cac9797f7917ed4
    Time: 779ms
          Asset       Size  Chunks             Chunk Names
        main.js    1.14 kB       0  [emitted]  main
    main.js.map  748 bytes       0  [emitted]  main
       [0] multi ./src/main/index.js 28 bytes {0} [built]
       [1] ./src/main/index.js 1.41 kB {0} [built]
        + 1 hidden module
Child
    Hash: 57bce8a7ecb870a59ad5
    Time: 763ms
              Asset       Size  Chunks             Chunk Names
        renderer.js    3.31 kB       0  [emitted]  renderer
    renderer.js.map  853 bytes       0  [emitted]  renderer
         index.html  294 bytes          [emitted]
       [0] multi ./src/renderer/index.js 28 bytes {0} [built]
       [1] ./src/renderer/index.js 1.7 kB {0} [built]
        + 2 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]
electron-builder 19.31.1
Using node_modules/electron-webpack/electron-builder.yml configuration file
⚠️  description is missed in the package.json (/Users/cooper/dev/me/electron-webpack-quick-start/package.json)
⚠️  author is missed in the package.json (/Users/cooper/dev/me/electron-webpack-quick-start/package.json)
No native production dependencies
Packaging for darwin x64 using electron 1.7.8 to dist/mac
⚠️  Application icon is not set, default Electron icon will be used
⚠️  App is not signed: cannot find valid "Developer ID Application" identity or custom non-Apple code signing certificate, see https://electron.build/code-signing

All identities:
     0 identities found

  Valid identities only
     0 valid identities found
(node:94084) Warning: a promise was created in a handler at Users/cooper/dev/me/electron-webpack-quick-start/node_modules/electron-builder/src/macPackager.ts:89:26 but was not returned from it, see http://goo.gl/rRqMUw
    at Function.Promise.map (/Users/cooper/dev/me/electron-webpack-quick-start/node_modules/bluebird/js/release/map.js:164:12)
Building macOS zip
Building DMG
⚠️  Application icon is not set, default Electron icon will be used

Running the latest version of this repo.. without changing anything on the code, I just tried yarn dist.

adding image faild in dist

I am trying to add external asset after cloning the project.
It works well in dev, but as soon as I distribute the project it fails.
Here is what I do:

• copy image to src/main/icon.png
• add 1 line of code in createMainWindow
  app.dock.setIcon(__dirname + '/icon.png');
• yarn dist

I suppose I need to explicitly tell that my image needs to be included in the build but it's unclear where I should specify it?

yarn dev result has error Cannot find module 'source-map-support/source-map-support.js'

Clone repo.
Run yarn.
Run yarn dev.

Built app launches with an error already displayed in the open devtools console.

Uncaught Error: Cannot find module 'source-map-support/source-map-support.js'
    at Module._resolveFilename (module.js:485)
    at Function.Module._resolveFilename (C:\Dev\Web\electron-webpack-quick-start\node_modules\electron\dist\resources\electron.asar\common\r…:35)
    at Function.Module._load (module.js:437)
    at Module.require (module.js:513)
    at require (internal/module.js:11)
    at (index):8

Win10 64bit
npm 5.8.0
node 8.11.1
yarn 1.5.1

static files are not loading in development environment

In my renderer I'm trying to load an audio file placed in static/audio/sound.mp3, but it gives me file 404 not found.

const mp3  = path.join(__static, "/audio/sound.mp3");
const audio = new Audio(mp3);
audio.play();

following the docs i used the __static variable but it's still not working.
I also tried with images and it still not working.

"original.line and original.column are not numbers" when using NPM

To reproduce:

1. git clone https://github.com/electron-userland/electron-webpack-quick-start
2. cd electron-webpack-quick-start
3. npm i
4. npm run compile

Expected Behaviour:
This repository acts as an template (or a "quick start") of a working electron-webpack configuration. Therefore, this repository should work as-is without requiring any workarounds to cause it to build.

Full error:

/home/mitch/dev/electron-webpack-quick-start/node_modules/source-map/lib/source-map-generator.js:276
        throw new Error(
              ^
Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.
    at SourceMapGenerator_validateMapping [as _validateMapping] (/home/mitch/dev/electron-webpack-quick-start/node_modules/source-map/lib/source-map-generator.js:276:15)
    at SourceMapGenerator_addMapping [as addMapping] (/home/mitch/dev/electron-webpack-quick-start/node_modules/source-map/lib/source-map-generator.js:110:12)
    at /home/mitch/dev/electron-webpack-quick-start/node_modules/source-map/lib/source-map-generator.js:72:17
    at Array.forEach (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (/home/mitch/dev/electron-webpack-quick-start/node_modules/source-map/lib/source-map-consumer.js:157:14)
    at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (/home/mitch/dev/electron-webpack-quick-start/node_modules/source-map/lib/source-map-generator.js:48:24)
    at SourceMapSource.node (/home/mitch/dev/electron-webpack-quick-start/node_modules/webpack-sources/lib/SourceMapSource.js:32:35)
    at /home/mitch/dev/electron-webpack-quick-start/node_modules/webpack-sources/lib/ConcatSource.js:59:50
    at Array.map (<anonymous>)
    at ConcatSource.node (/home/mitch/dev/electron-webpack-quick-start/node_modules/webpack-sources/lib/ConcatSource.js:58:63)
    at ConcatSource.proto.sourceAndMap (/home/mitch/dev/electron-webpack-quick-start/node_modules/webpack-sources/lib/SourceAndMapMixin.js:30:18)
    at getTaskForFile (/home/mitch/dev/electron-webpack-quick-start/node_modules/webpack/lib/SourceMapDevToolPlugin.js:33:30)
    at chunk.files.forEach.file (/home/mitch/dev/electron-webpack-quick-start/node_modules/webpack/lib/SourceMapDevToolPlugin.js:91:21)
    at Array.forEach (<anonymous>)
    at /home/mitch/dev/electron-webpack-quick-start/node_modules/webpack/lib/SourceMapDevToolPlugin.js:89:18
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (/home/mitch/dev/electron-webpack-quick-start/node_modules/webpack/lib/SourceMapDevToolPlugin.js:88:12)
    at Compilation.applyPlugins1 (/home/mitch/dev/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:75:14)
    at self.applyPluginsAsync.err (/home/mitch/dev/electron-webpack-quick-start/node_modules/webpack/lib/Compilation.js:670:11)
    at next (/home/mitch/dev/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.compilation.plugin (/home/mitch/dev/electron-webpack-quick-start/node_modules/webpack/lib/ProgressPlugin.js:119:6)
    at next (/home/mitch/dev/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:204:14)
    at Compilation.compilation.plugin (/home/mitch/dev/electron-webpack-quick-start/node_modules/webpack/lib/BannerPlugin.js:67:5)
    at next (/home/mitch/dev/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:204:14)
    at Compilation.<anonymous> (/home/mitch/dev/electron-webpack-quick-start/node_modules/babel-minify-webpack-plugin/dist/index.js:119:11)
    at Compilation.applyPluginsAsyncSeries (/home/mitch/dev/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:206:13)
    at self.applyPluginsAsync.err (/home/mitch/dev/electron-webpack-quick-start/node_modules/webpack/lib/Compilation.js:666:10)
    at next (/home/mitch/dev/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.compilation.plugin.callback (/home/mitch/dev/electron-webpack-quick-start/node_modules/webpack/lib/ProgressPlugin.js:115:6)
    at Compilation.applyPluginsAsyncSeries (/home/mitch/dev/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:206:13)

OS: Arch Linux
Node version: v8.6.0
NPM version: 3.10.10

---

Sounds like it might be related to mismatching of versions, and this repo is set up to use yarn lockfiles, but for my project I can't just switch to use yarn.

Try to "yarn dist", but get an error (windows)

I git clone this repo and yarn, and then yarn dist immediately.
But I got this error...

Error: Exit code: ENOENT. spawn C:\Users\van20\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.4.0\rcedit-ia32.exe ENOENT
at C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\builder-util\src\util.ts:126:16
at exithandler (child_process.js:301:5)
at ChildProcess.errorhandler (child_process.js:313:5)
at ChildProcess.emit (events.js:182:13)
at Process.ChildProcess._handle.onexit (internal/child_process.js:238:12)
at onErrorNT (internal/child_process.js:407:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
From previous event:
at runCallback (timers.js:705:18)
at tryOnImmediate (timers.js:676:5)
at processImmediate (timers.js:658:5)
From previous event:
at WinPackager.signAndEditResources (C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\winPackager.ts:260:158)
at _bluebirdLst.default.map.file (C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\winPackager.ts:362:21)
at go$readdir$cb (C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\graceful-fs\graceful-fs.js:162:14)
at FSReqWrap.oncomplete (fs.js:141:20)
From previous event:
at C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\winPackager.ts:360:27
at Generator.next ()
From previous event:
at WinPackager.signApp (C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\winPackager.ts:354:73)
at C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\platformPackager.ts:250:16
at Generator.next ()
at runCallback (timers.js:705:18)
at tryOnImmediate (timers.js:676:5)
at processImmediate (timers.js:658:5)
From previous event:
at WinPackager.doPack (C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\platformPackager.ts:167:165)
at C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\platformPackager.ts:113:16
at Generator.next ()
From previous event:
at WinPackager.pack (C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\platformPackager.ts:111:95)
at C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\packager.ts:430:24
at Generator.next ()
at xfs.stat (C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\fs-extra-p\node_modules\fs-extra\lib\mkdirs\mkdirs.js:56:16)
at C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\graceful-fs\polyfills.js:285:20
at FSReqWrap.oncomplete (fs.js:155:5)
From previous event:
at Packager.doBuild (C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\packager.ts:396:24)
at C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\packager.ts:366:57
at Generator.next ()
at C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\graceful-fs\graceful-fs.js:111:16
at C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\graceful-fs\graceful-fs.js:45:10
at FSReqWrap.oncomplete (fs.js:141:20)
From previous event:
at Packager._build (C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\packager.ts:335:133)
at C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\packager.ts:331:23
at Generator.next ()
at runCallback (timers.js:705:18)
at tryOnImmediate (timers.js:676:5)
at processImmediate (timers.js:658:5)
From previous event:
at Packager.build (C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\packager.ts:288:14)
at build (C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\app-builder-lib\src\index.ts:59:28)
at build (C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\electron-builder\src\builder.ts:228:10)
at then (C:\wamp64\www\karaoke\electron-webpack-quick-start\node_modules\electron-builder\src\cli\cli.ts:49:19)
error

I use npm / yarn and rebuild many times... Still the same...

CreateProcess failed with error 2: The system cannot find the file specified.

I've forked and cloned the project, installed everything via yarn and then tried yarn dev and got the error:
CreateProcess failed with error 2: The system cannot find the file specified.
With the following call stack.

Error: Renderer WDS exited with code 0
    at ChildProcessManager.child.on.code (\node_modules\electron-webpack\src\dev\ChildProcessManager.ts:60:32)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Socket.<anonymous> (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:501:12)
From previous event:
    at \node_modules\electron-webpack\src\dev\WebpackDevServerManager.ts:47:10
    at Generator.next (<anonymous>)
    at \node_modules\graceful-fs\polyfills.js:287:18
    at FSReqWrap.oncomplete (fs.js:111:15)
From previous event:
    at startRenderer (\node_modules\electron-webpack\out\dev\WebpackDevServerManager.js:72:21)
    at \node_modules\electron-webpack\src\dev\dev-runner.ts:43:7
    at Generator.next (<anonymous>)
    at runCallback (timers.js:637:20)
    at tryOnImmediate (timers.js:610:5)
    at processImmediate [as _immediateCallback] (timers.js:582:5)
From previous event:
    at DevRunner.start (\node_modules\electron-webpack\out\dev\dev-runner.js:133:11)
    at \node_modules\electron-webpack\src\dev\dev-runner.ts:140:19
    at Generator.next (<anonymous>)
From previous event:
    at main (\node_modules\electron-webpack\out\dev\dev-runner.js:42:22)
    at Object.<anonymous> (\node_modules\electron-webpack\src\dev\dev-runner.ts:143:1)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at runInDevMode (\node_modules\electron-webpack\src\cli.ts:36:2)
    at Object.__dirname.default.command.command.command.command.command.argv [as handler] (\node_modules\electron-webpack\src\cli.ts:16:16)
    at Object.runCommand (\node_modules\yargs\lib\command.js:228:22)
    at Object.parseArgs [as _parseArgs] (\node_modules\yargs\yargs.js:1013:30)
    at Object.get [as argv] (\node_modules\yargs\yargs.js:957:21)
    at Object.<anonymous> (\node_modules\electron-webpack\src\cli.ts:16:16)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)

Compile and build work just fine. Can you tell why the dev isn't working?

How can I embed my existing project?

How can I embed my existing electron project in this template? I have 1 index.html and I have no idea how can I use it in the webpack template.

Add documentation regarding how to keep dependencies continuously updated

I tried rebasing my own project on top of the latest master (this is an emergency as versions of electron older than 1.7.11 are insecure), and realized that I would have to take care of merge conflicts and what not, which might intimidate beginners. Perhaps the documentation should elaborate on how to keep these dependencies up to date?

HMR not working with default clone and yarn dev

I installed the project as per the README instructions, ran yarn, then yarn dev, project window pops up, brings in Vue or whatever the renderer index.js is doing(the code appears minified? is that suitable for getting a feel of the project?)... then I edit some text in the js file and save it. Nothing happens. DevTools window console states HMR has been enabled:

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.

Console output:

yarn dev
yarn run v1.13.0
$ electron-webpack dev
┏ Main -----------------------

  Hash: 1cd20ade4f0bb5d28692
  Version: webpack 4.28.4
  Time: 184ms
  Built at: 01/27/2019 3:39:44 PM
    Asset      Size  Chunks             Chunk Names
  main.js  41.3 KiB    main  [emitted]  main
  Entrypoint main = main.js
  [0] multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/main/index.js 40 bytes {main} [built]
  [./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js] 582 bytes {main} [built]
  [./src/main/index.js] 1.42 KiB {main} [built]
  [electron] external "electron" 42 bytes {main} [built]
  [electron-webpack/out/electron-main-hmr/HmrClient] external "electron-webpack/out/electron-main-hmr/HmrClient" 42 bytes {main} [built]
  [path] external "path" 42 bytes {main} [built]
  [source-map-support/source-map-support.js] external "source-map-support/source-map-support.js" 42 bytes {main} [built]
  [url] external "url" 42 bytes {main} [built]

┗ ----------------------------
┏ Renderer -------------------

  ℹ ｢wds｣: Project is running at http://localhost:9080/

┗ ----------------------------
┏ Renderer -------------------

  ℹ ｢wds｣: webpack output is served from /
  ℹ ｢wds｣: Content not from webpack is served from /storage/projects/electron/hmr-test/static, /storage/projects/electron/hmr-test/dist/renderer-dll

┗ ----------------------------
┏ Renderer -------------------

  ℹ ｢wdm｣: Hash: 2d017872700bf5eeb4e6
  Version: webpack 4.28.4
  Time: 454ms
  Built at: 01/27/2019 3:39:45 PM
        Asset       Size    Chunks             Chunk Names
   index.html  379 bytes            [emitted]  
  renderer.js    841 KiB  renderer  [emitted]  renderer
  Entrypoint renderer = renderer.js
  [0] multi (webpack)-dev-server/client?http://localhost:9080 (webpack)/hot/dev-server.js css-hot-loader/hotModuleReplacement ./src/renderer/index.js 64 bytes {renderer} [built]
  [./node_modules/css-hot-loader/hotModuleReplacement.js] 2.96 KiB {renderer} [built]
  [./node_modules/electron-webpack/package.json] 1.5 KiB {renderer} [built]
  [./node_modules/lodash/debounce.js] 5.93 KiB {renderer} [built]
  [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {renderer} [built]
  [./node_modules/normalize-url/index.js] 3.85 KiB {renderer} [built]
  [./node_modules/strip-ansi/index.js] 161 bytes {renderer} [built]
  [./node_modules/webpack-dev-server/client/index.js?http://localhost:9080] (webpack)-dev-server/client?http://localhost:9080 7.78 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.61 KiB {renderer} [built]
  [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {renderer} [built]
  [./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {renderer} [built]
  [./src/renderer/index.js] 1.72 KiB {renderer} [built]
      + 29 hidden modules
  Child html-webpack-plugin for "index.html":
       1 asset
      Entrypoint undefined = index.html
      [./node_modules/html-loader/dist/cjs.js?minimize=false&url=false!./dist/.renderer-index-template.html] 346 bytes {0} [built]

┗ ----------------------------
┏ Renderer -------------------

  ℹ ｢wdm｣: Compiled successfully.

┗ ----------------------------
┏ Electron -------------------

  Debugger listening on ws://127.0.0.1:5858/80e6ead2-1fbf-40ad-8781-f5998784c301
  For help, see: https://nodejs.org/en/docs/inspector

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

node -v: v11.3.0
electron -v: v3.1.1 (system install, I don't think this project is using it though?)
OS is Manjaro KDE (Linux)

Use electron-webpack-ts for bundling

Fuse isn’t working in production

https://webpack.electron.build/add-ons#typescript

Development server does not work on windows

Platform: Windows 10
Node: v8.12.0
Npm: 6.4.1

Hey! Freshly cloned repo gives an error when I run npm run dev through powershell. The same error when I run the command through shell provided by git-scm for windows.

  TypeError: Cannot read property 'bonjour' of undefined
      at createConfig (C:\Users\Predator\Desktop\dev\JS\electron-webpack-quick-start\node_modules\webpack-dev-server\lib\utils\createConfig.js:13:12)
      at processOptions (C:\Users\Predator\Desktop\dev\JS\electron-webpack-quick-start\node_modules\webpack-dev-server\lib\utils\processOptions.js:22:19)
      at runCallback (timers.js:810:20)
      at tryOnImmediate (timers.js:768:5)
      at processImmediate [as _immediateCallback] (timers.js:745:5)
  From previous event:
      at processOptions (C:\Users\Predator\Desktop\dev\JS\electron-webpack-quick-start\node_modules\webpack-dev-server\lib\utils\processOptions.js:9:12)
      at Object.<anonymous> (C:\Users\Predator\Desktop\dev\JS\electron-webpack-quick-start\node_modules\webpack-dev-server\bin\webpack-dev-server.js:172:1)
      at Module._compile (module.js:653:30)
      at Object.Module._extensions..js (module.js:664:10)
      at Module.load (module.js:566:32)
      at tryModuleLoad (module.js:506:12)
      at Function.Module._load (module.js:498:3)
      at Function.Module.runMain (module.js:694:10)
      at startup (bootstrap_node.js:204:16)
      at bootstrap_node.js:625:3

Hot keys not work

• Windows 10 x64

Some hotkeys not work.
For example - Force reload Ctrl + Shift + R
But if I use electron-quick-start all of hot keys work correctly.

More documentation on expectations

I have tried given recipe of installation and when I come to yarn dev I get this:

>yarn dev
yarn run v1.5.1
$ electron-webpack dev
? Main -----------------------

  Hash: abdc80f5fc91b1ca9f55
  Version: webpack 4.4.1
  Time: 476ms
  Built at: 2018-4-12 08:26:50
	Asset      Size  Chunks             Chunk Names
  main.js  39.9 KiB    main  [emitted]  main
  Entrypoint main = main.js
  [./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js] 562 bytes {main} [built]
  [./src/main/index.js] 1.42 KiB {main} [built]
  [electron] external "electron" 42 bytes {main} [built]
  [electron-webpack/out/electron-main-hmr/HmrClient] external "electron-webpack/out/electron-main-hmr/HmrClient" 42 bytes {main} [built]
  [path] external "path" 42 bytes {main} [built]
  [source-map-support/source-map-support.js] external "source-map-support/source-map-support.js" 42 bytes {main} [built]
  [url] external "url" 42 bytes {main} [built]
	 [0] multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/main/index.js 40 bytes {main} [built]

? ----------------------------
? Renderer -------------------

  TypeError: Cannot read property 'dependencies' of null
	  at new WebpackConfigurator (C:\ITHD\dev\electron\new-electron-webpack-project\electron-webpack-quick-start\node_modules\electron-webpack\src\main.ts:93:18)
	  at createConfigurator (C:\ITHD\dev\electron\new-electron-webpack-project\electron-webpack-quick-start\node_modules\electron-webpack\src\main.ts:331:10)
	  at <anonymous>

? ----------------------------
Error: Renderer WDS exited with code 0
	at ChildProcessManager.child.on.code (C:\ITHD\dev\electron\new-electron-webpack-project\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\ChildProcessManager.ts:62:32)
	at ChildProcess.emit (events.js:180:13)
	at maybeClose (internal/child_process.js:936:16)
	at Socket.stream.socket.on (internal/child_process.js:353:11)
	at Socket.emit (events.js:180:13)
	at Pipe._handle.close [as _onclose] (net.js:541:12)

The process fails into some sort of endless loop. Shall I do something else?

A bit more documentation would be helpful to understand what is going on.

dmg generated from this doesn't work

I cloned this repo and ran "yarn build", then I installed the dmg created in the dist directory. Then I just get this error message:

That ok button is not even clickable.

App for mac does not work

I have git cloned the project, installed all the dependencies.

yarn dev works as expected.

yarn build creates .app file, when tried to run it, this happened:

babelcore giving Option passed to a preset which does not accept options.

I can provide more details if need be, I've been trying to mess with importing my own webpack config and .babelrc to try to fix this but to no avail, been at it for a few hours for a constant 3 days.

ERROR in ./src/renderer/main.js
  Module build failed: Error: Options {"modules":false,"targets":{"electron":"1.8.4"}} passed to a preset which does not accept options.

ERROR in ./src/main/main.js
  Module build failed: Error: Options {"modules":false,"targets":{"node":"8.2.1"}} passed to a preset which does not accept options.

./main/main.js

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

const isDevelopment = process.env.NODE_ENV !== 'production';

// global reference to mainWindow (necessary to prevent window from being garbage collected)
let mainWindow;

function createMainWindow() {
  const window = new BrowserWindow();

  if (isDevelopment) {
    window.webContents.openDevTools();
  }

  if (isDevelopment) {
    window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
  } else {
    window.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file',
      slashes: true
    }));
  }

  window.on('closed', () => {
    mainWindow = null;
  });

  window.webContents.on('devtools-opened', () => {
    window.focus();
    setImmediate(() => {
      window.focus()
    });
  });

  return window;
}

// quit application when all windows are closed
app.on('window-all-closed', () => {
  // on macOS it is common for applications to stay open until the user explicitly quits
  if (process.platform !== 'darwin') {
    app.quit()
  }
});

app.on('activate', () => {
  // on macOS it is common to re-create a window even after all windows have been closed
  if (mainWindow === null) {
    mainWindow = createMainWindow();
  }
});

// create main BrowserWindow when electron is ready
app.on('ready', () => {
  mainWindow = createMainWindow();
});

./renderer/main.js

const ReactDOM = require('react-dom');
const App = require('../app/App');

ReactDOM.render((
  <App />
), document.getElementById('app'), (err) => console.log(err));

README instructions: 'yarn' fails

Per the project README, running 'yarn' inside electron-webpack-quick-start results in:

rook@workstation:electron-webpack-quick-start
$ yarn
00h00m00s 0/0: : ERROR: There are no scenarios; must have at least one.

rook@workstation:electron-webpack-quick-start
$ ls -la
total 252
drwxr-xr-x 3 rook rook 4096 Oct 19 13:07 .
drwxrwxr-x 3 rook rook 4096 Oct 19 13:06 ..
-rw-r--r-- 1 rook rook 40 Oct 19 13:06 .gitignore
-rw-r--r-- 1 rook rook 555 Oct 19 13:06 package.json
-rw-r--r-- 1 rook rook 1776 Oct 19 13:06 README.md
drwxr-xr-x 4 rook rook 4096 Oct 19 13:06 src
-rw-r--r-- 1 rook rook 408 Oct 19 13:06 .yarnclean
-rw-r--r-- 1 rook rook 228119 Oct 19 13:06 yarn.lock

"Extension server error: Object not found: <top>"

The main/index.js file is attempting to open the devtools too soon: https://github.com/electron-userland/electron-webpack-quick-start/blob/master/src/main/index.js#L15-L17

This results in an error message printed to the console: "Extension server error: Object not found: <top>"

A couple of solutions are proposed in SimulatedGREG/electron-vue#389

css importing (bootstrap.css for example)

This quick-start configuration doesn't load css files from file-system, only from web.
Is there a workaround or I have to configure webpack loader by myself?

Hashtag(#) in file path breaks loading of index.html

The file:// protocol does not handle # well in paths (example: file:///Application/#Tools/Electron.app) in production.

See also electron/electron#6869

I will create PR based on how it is correctly done in https://github.com/electron/electron-quick-start/blob/master/main.js

HMR

Webpack 3.10.0 breaks build

Steps:

• clone the electron-webpack-quick-start
• Use yarn upgrade-inteactive to update webpack to v3.10.0
• Run yarn compile

Output:

/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276
        throw new Error(
              ^
Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.
    at SourceMapGenerator_validateMapping [as _validateMapping] (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276:15)
    at SourceMapGenerator_addMapping [as addMapping] (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:110:12)
    at /Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:72:17
    at Array.forEach (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack-sources/node_modules/source-map/lib/source-map-consumer.js:157:14)
    at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:48:24)
    at SourceMapSource.node (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack-sources/lib/SourceMapSource.js:32:35)
    at /Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack-sources/lib/ConcatSource.js:59:50
    at Array.map (<anonymous>)
    at ConcatSource.node (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack-sources/lib/ConcatSource.js:58:63)
    at ConcatSource.proto.sourceAndMap (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack-sources/lib/SourceAndMapMixin.js:30:18)
    at getTaskForFile (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack/lib/SourceMapDevToolPlugin.js:33:30)
    at chunk.files.forEach.file (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack/lib/SourceMapDevToolPlugin.js:91:21)
    at Array.forEach (<anonymous>)
    at /Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack/lib/SourceMapDevToolPlugin.js:89:18
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack/lib/SourceMapDevToolPlugin.js:88:12)
    at Compilation.applyPlugins1 (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:75:14)
    at self.applyPluginsAsync.err (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack/lib/Compilation.js:670:11)
    at next (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.compilation.plugin (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack/lib/ProgressPlugin.js:119:6)
    at next (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:204:14)
    at Compilation.compilation.plugin (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack/lib/BannerPlugin.js:67:5)
    at next (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:204:14)
    at Compilation.<anonymous> (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/babel-minify-webpack-plugin/dist/index.js:119:11)
    at Compilation.applyPluginsAsyncSeries (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:206:13)
    at self.applyPluginsAsync.err (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack/lib/Compilation.js:666:10)
    at next (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.compilation.plugin.callback (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/webpack/lib/ProgressPlugin.js:115:6)
    at Compilation.applyPluginsAsyncSeries (/Users/lafouaa/Personal/electron-webpack-quick-start/node_modules/tapable/lib/Tapable.js:206:13)

Seems to work fine when downgrading webpack back to 3.8.1.

The changelog for the v3.10.0 release seems to mention changes to the sources map dev tool, but nothing that looks like it directly impacts source map generation. I'd assume this is an uncaught regression on their side (or the babel-minify-webpack-plugin breaks because of a breaking change from webpack).

How to add a custom made native dependency

I am looking for some documentation on how to add a native dependency. I created an example here https://github.com/BiancoA/electron-webpack-quick-start-nm and asked a https://stackoverflow.com/questions/46930628/attempting-to-link-a-native-module-using-electron-webpack stackoverflow question.

I compiled my .node module using node-gyp and now I would like to use it from electron, but I get:

  Error: Cannot find module 'mymoduleND'
      at Module._resolveFilename (module.js:470:15)
      at Function.Module._resolveFilename (/Users/bianco/Src/electron-webpack-quick-start-nm/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/common/reset-search-paths.js:35:12)
      at Function.Module._load (module.js:418:25)
      at Module.require (module.js:498:17)
      at require (internal/module.js:20:19)
      at eval (webpack-internal:///mymoduleND:1:18)
      at Object.mymoduleND (/Users/bianco/Src/electron-webpack-quick-start-nm/dist/main/main.js:748:1)
      at __webpack_require__ (/Users/bianco/Src/electron-webpack-quick-start-nm/dist/main/main.js:655:30)
      at fn (/Users/bianco/Src/electron-webpack-quick-start-nm/dist/main/main.js:65:20)
      at Object.eval (webpack-internal:///./src/main/index.js:4:69)

some help or some documentation?
Thanks!

error when compiling dll when there is '@' in package name

Config:

"electronWebpack": {
  "renderer": {
    "dll": [
      "@material-ui/core",
      "@material-ui/icons",
      ...
    ]
  }
},

ERROR in vendor.js from Terser
Unexpected character '@' [external "@material-ui/core":1,0][vendor.js:98,17]

if I remove @material-ui/core and @material-ui/icons all is good

Error [email protected]: The engine "node" is incompatible with this module. Expected version ">=4 <=9"

This happens using node >=v10

The same issue is also present here: electron-userland/electron-webpack#174

A workaround is using yarn --ignore-engines, but also upgrade the requirements in the package.json file works.

need help: how to debug src/main/xxxxx.js in VS CODE?

Any help, hint or sample will be really appreciated!

Can't pack with Tray bar icons

I tried using __static, using the icon in the root, but when I pack the application running yarn dist, the .asar file ignores the icon path and using __static brakes when starting the app:

The dist went ok with no errors.

Code:

const mb = menubar({
  index: url,
  showDockIcon: true,
  icon: path.join(__static, '/IconTemplate.png'),
  alwaysOnTop: true
})

What can I do to explain more?

How to add React support

This from https://webpack.electron.build/add-ons#react-jsx seems insufficient to a newbie like me. What should we do after this?

in China

$ yarn
yarn install v1.13.0
[1/5] Resolving packages...
[2/5] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/5] Linking dependencies...
[4/5] Building fresh packages...
[1/2] ⠂ electron
error /home/23494_sandbox/src/electron-webpack-quick-start/node_modules/electron: Command failed.
Exit code: 1
Command: node install.js
Arguments: 
Directory: /home/23494_sandbox/src/electron-webpack-quick-start/node_modules/electron
Output:
Downloading tmp-12121-0-electron-v4.0.1-linux-x64.zip
Error: read ECONNRESET
/home/23494_sandbox/src/electron-webpack-quick-start/node_modules/electron/install.js:49
  throw err
  ^

Error: read ECONNRESET
    at TLSWrap.onStreamRead (internal/stream_base_commons.js:162:27)

$ yarn
yarn install v1.13.0
[1/5] Resolving packages...
[2/5] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/5] Linking dependencies...
[4/5] Building fresh packages...
[1/2] ⠈ electron
error /home/23494_sandbox/src/electron-webpack-quick-start/node_modules/electron: Command failed.
Exit code: 1
Command: node install.js
Arguments: 
Directory: /home/23494_sandbox/src/electron-webpack-quick-start/node_modules/electron
Output:
Downloading tmp-12240-0-electron-v4.0.1-linux-x64.zip
Error: read ECONNRESET
/home/23494_sandbox/src/electron-webpack-quick-start/node_modules/electron/install.js:49
  throw err
  ^

Error: read ECONNRESET
    at TLSWrap.onStreamRead (internal/stream_base_commons.js:162:27)

Warning at building step

  • building        target=macOS zip arch=x64 file=dist/app-delta-1.7.1-mac.zip
  • building        target=DMG arch=x64 file=dist/app-delta-1.7.1-mac.dmg
(node:92070) Warning: a promise was created in a handler at /Users/user/Documents/Projects/project/node_modules/app-builder-lib/src/macPackager.ts:90:26 but was not returned from it, see http://goo.gl/rRqMUw
    at /Users/user/Documents/Projects/project/node_modules/app-builder-lib/node_modules/bluebird/js/release/generators.js:197:21

electron-builder: 20.38.3
electron-updater: 4.0.6

Not working on windows

Just cloning the repo, yarn, and yarn dev and it seems not working on windows.

Screen here

Difficulty making a fetch request in the renderer process to third party API

I was previously using electron-react-boilerplate and have raised an issue there about this topic.

I migrated my project and everything is working fine apart from when I make a fetch request to Google, the URL request is handled by a third-party npm package intended for node only due to CORS in the browser. My code worked fine regardless though with their project despite calling from the renderer process.

I had tried disabling the web security when creating the BrowserWindow() in main process, but while it avoided the CORS issue, my request was still unsucessful. I only noticed the request headers having two additional fields, referer which pointed to the localhost dev server, and cookies.

Is there advice on how to get my Electron app to behave more like the linked boiler plate project is doing? I wasn't able to see what they're doing differently(they have special configuration for the webpack dev server, but nothing for production webpack config). In both cases their index.html is loaded via file://filepath rather than http://localhost:port, is it likely to be due to this?

testing

Support for some form of unit testing would be good. Best i've seen so far is https://stackoverflow.com/questions/46932362/unit-testing-with-electron-webpack but perhaps there is a cleaner solution.

multiple renderer

Hi,

My app have multiple renderer windows with different html/js files. All inside the renderer folder.
How can i add multiple entries for them?

has problem with sqlite3

see detail in here TryGhost/node-sqlite3#970

vue + typescript ?

Very interesting project, though struggling to get Vue and Typescript working together.

for example renaming index.js to index.ts and adding this line:

import App from './view/App.vue'

Results in:

Module not found: Error: Can't resolve 'vue-loader' in '/Users/davem/Documents/electron/e2'
   @ ./src/renderer/index.ts 1:0-32
   @ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server ./node_modules/electron-webpack/vue-renderer-entry.js ./src/renderer/index.ts

Am guessing that I need to webpack-merge in the vue-loader though not exactly sure what electron-webpack is providing vs what it expects to have provided in terms off webpack configuration?

An example with Vue and Typescript working would be much appreciated!!

Cannot disable/silent logs

I have a webpack.config.js file on root with the following

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        enforce: 'pre',
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      }
    ]
  },
  devServer: {
    clientLogLevel: 'error',
    quiet: true,
    info: false,
    overlay: true
  },
  stats: 'errors-only'
};

I observe that the rule is being indeed applied as well as the overlay: true config. However, there's still a lot of noise within the terminal and none of the other settings seems to make any difference.

What is the right way to report only errors from electron-webpack?

Version used 2.3.1

CreateProcess failed with error 193 (no message available)

Hello,

My config is:

• Win 7 (64 bits)
• Yarn 1.12.1
• Node 10.13.0

I've cloned the repo, deleted .git folder and installed dependencies running yarn (I did a yarn cache clean before).

Launching yarn compile works fine (no error). But, when I launch yarn dev, I get:

yarn run v1.12.1
$ electron-webpack dev
? Renderer -------------------

  CreateProcess failed with error 193 (no message available)

? ----------------------------
Error: Renderer WDS exited with code 0
    at ChildProcessManager.child.on.code (D:\my-app\node_modules\electron-webpack\src\dev\
ChildProcessManager.ts:62:32)
    at ChildProcess.emit (events.js:182:13)
    at maybeClose (internal/child_process.js:962:16)
    at Socket.stream.socket.on (internal/child_process.js:381:11)
    at Socket.emit (events.js:182:13)
    at Pipe._handle.close (net.js:606:12)
From previous event:
    at D:\my-app\node_modules\graceful-fs\polyfills.js:285:20
    at FSReqWrap.oncomplete (fs.js:155:5)
From previous event:
    at startRenderer (D:\my-app\node_modules\electron-webpack\out\dev\WebpackDevServerMana
ger.js:149:17)
    at D:\my-app\node_modules\electron-webpack\src\dev\dev-runner.ts:43:7
    at Generator.next (<anonymous>)
    at runCallback (timers.js:705:18)
    at tryOnImmediate (timers.js:676:5)
    at processImmediate (timers.js:658:5)
From previous event:
    at DevRunner.start (D:\my-app\node_modules\electron-webpack\src\dev\dev-runner.ts:32:1
4)
    at D:\my-app\node_modules\electron-webpack\src\dev\dev-runner.ts:142:19
    at Generator.next (<anonymous>)
From previous event:
    at main (D:\my-app\node_modules\electron-webpack\out\dev\dev-runner.js:132:18)
    at Object.<anonymous> (D:\my-app\node_modules\electron-webpack\src\dev\dev-runner.ts:1
45:1)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at runInDevMode (D:\my-app\node_modules\electron-webpack\src\cli.ts:35:3)
    at Object._yargs.default.command.command.command.command.command.argv [as handler] (D:\informatique\programmation\js\electron\english\english-app-
school2\node_modules\electron-webpack\src\cli.ts:13:71)
    at Object.runCommand (D:\my-app\node_modules\yargs\lib\command.js:238:44)
    at Object.parseArgs [as _parseArgs] (D:\my-app\node_modules\yargs\yargs.js:1059:30)
    at Object.get [as argv] (D:\my-app\node_modules\yargs\yargs.js:1000:21)
    at Object.<anonymous> (D:\my-app\node_modules\electron-webpack\src\cli.ts:8:1)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)

I've searched but couldn't find any clue/hint/solution. I can't figure out where the problem comes from. Can anyone help?

__static is not defined in production

Steps for reproduction of issue

1. Cloned the boilerplate down and yarn
2. Only made the below code changes to src/main/index.js
3. Put an icon.png in static/
4. Works when yarn dev
5. yarn run dist && open dist/electron-webpack-quick-start-0.0.0.dmg
6. Open the app and throws __static is undefined

'use strict'

import { app, BrowserWindow, Tray } from 'electron'
import path from 'path'

const isDevelopment = process.env.NODE_ENV !== 'production'

// Global reference to mainWindow
// Necessary to prevent win from being garbage collected
let mainWindow
let tray
function createMainWindow () {
  tray = new Tray(path.join(__static, 'icon.png'))