Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

I'm just beginning my React learning journey but in previous projects been quite dependent on TypeScript which is what lead me to your project. I've been quite impressed with everything included here, so thank you for the project.

I'm having an issue where if I bind a listener in the constructor I'm getting a warning:

react.development.js:225 Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the Foo component.

However, if I bind the listener in the onClick of the button, it works just fine. I saw your reply in #34 and noticed in /tsconfig.json that it is already set to es5. So I'm not quite sure where you set the output to es5 or if that change was already added to the source somewhere.

I solved this problem by emitting ES5 code now. Hot loading still works as before and the code you provided should run without problems. Let me know whether this works for you!

Any help you might provide would be very much appreciated. Here is my example:

import * as React from 'react';

export default class Foo extends React.Component {
    public state: any = {};
    constructor(props: any) {
        super(props);
		this.openBar = this.openBar.bind(this);
		this.state = {mail: false, sidebar: false};
	}
	/**
	 * Works just fine with binding set in onClick
	 */
    openFoo() {
		let newState = !this.state.foo;
        this.setState({foo: newState});
	}
	/**
	 * Produces an error/warning:
	 * react.development.js:225 Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the Foo component.
	 */
    openBar() {
		let newState = !this.state.bar;
        this.setState({bar: newState});
    }
    render() {
        return (
            <div>
                <button onClick={this.openBar}>Bar</button>
                <button onClick={this.openFoo.bind(this)}>Foo</button>
            </div>
        );
    }
}

I've noticed that the template uses:

const style = require('./Component.scss');

<div className="style.element"></div>

:local {
  component { font-size: 30px }
}

But how come the normal way of importing stylesheet doesn't work?

import './component.scss';

Global components like p, h1, html works normally, but the scss file doesn't recognize class and id if the stylesheet is imported this way. I wonder if this is an Electron thing or is it a bug?

Version 2.3.7 of sinon just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As sinon is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 19.11.1 of electron-builder just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As electron-builder is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 15.0.32 of @types/react just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @types/react is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

This is not relatively an issue but have been wondering about the structure of the project. But would it be possible to redo the file structure to something along the lines of example-project. I would like to have my main process as a Typescript file and also have it bundled correctly.

Currently when this project bundles within itself instead of a distributed lone directory. I am working on making changes to do this but have yet to accomplish it while also keeping the hot loading working for development.

Version 2.3.8 of sinon just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As sinon is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 2.3.6 of sinon just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As sinon is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 4.0.7 of @types/react-router-dom just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @types/react-router-dom is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 2.4.1 of typescript just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As typescript is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hey, Why did you pass --max-old-space-size option to NodeJs? I know about it but I'm looking for the occurred problem with hot-server.

The update to file-loader 1.0.0-rc0 in #26 broke css-loader.

Currently, imported fonts will not load because the url() paths in the font-face are replaced by [object Object]. It's a known issue for file-loader webpack-contrib/file-loader#181 and css-loader webpack-contrib/css-loader#585 having something to do with file-loader moving to es6 imports.

Reproduce by cloning the repo, starting the dev server and looking at the demo counter app. The Font Awesome icons show up as squares.

Component level .scss file changes don't hot reload.

The server must be killed and restarted to reflect changes. We haven't touched any project configuration. Is this a bug or by design?

Version 19.14.0 of electron-builder-http just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As electron-builder-http is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

The actionCreatorVoid helper method has a 'test' method that acts as a type guard, allowing typescript to deduce the type is 'IAction'.

Modern versions of typescript use this type information to narrow the remaining type, so you can easily end up with compilation errors in your reducers

// problematicActions.ts
export const stringPayloadAction = actionCreator<string>('STRING_PAYLOAD');
export const noPayloadAction1 = actionCreatorVoid('NO_PAYLOAD_1');
export const noPayloadAction2 = actionCreatorVoid('NO_PAYLOAD_2');


// problematicReducer.ts
export type TState = {
}

export function problematicReducer(state: Tstate = {}, action: IAction): TState {
  if (stringPayloadAction.test(action)) {
    // OK: action deduced as IAction<string>
  } else if (noPayloadAction1.test(action)) {
    // OK: action deduced as IAction
  } else if (noPayloadAction2.test(action)) {
    // Error: Typescript deduces action as 'never' within this check
    // as the previous noPayloadAction1 check covered all IAction cases.
  }

  return state;
}

The solution is to change the test methods in helper.ts to return boolean rather than act as type guards.

I cloned the repo repo and installed docker-registry-client, then added this line to App.tsx:

import * as client from "docker-registry-client"
console.log("client", client)

And I get this error when compiling (npm run dev in that project):

ERROR in ./~/asn1.js-rfc3280/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../.. in /Users/abeall/tools/docker-manager/electron/node_modules/asn1.js-rfc3280
 @ ./~/asn1.js-rfc3280/index.js 4:13-34

The error only appears when I try to import docker-registry-client. Any idea?

Output error on first run (out of the box).

--- From npm-debug.log ---
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\Node\node.exe',
1 verbose cli 'C:\Program Files\Node\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]predev: [email protected]
6 silly lifecycle [email protected]predev: no script for predev, continuing
7 info lifecycle [email protected]dev: [email protected]
8 verbose lifecycle [email protected]dev: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]dev: PATH: C:\Program Files\Node\node_modules\npm\bin\node-gyp-bin;D:\Dev\Node\CPI\etv-cpi\node_modules.bin;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client;C:\Program Files\Intel\iCLS Client;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Node;C:\Program Files\Git\cmd;C:\Users\Artemis\AppData\Local\Microsoft\WindowsApps;C:\Users\Artemis\AppData\Roaming\npm;C:\Program Files\Microsoft VS Code\bin
10 verbose lifecycle [email protected]dev: CWD: D:\Dev\Node\CPI\etv-cpi
11 silly lifecycle [email protected]dev: Args: [ '/d /s /c', 'npm run hot-server -- --start-hot' ]
12 silly lifecycle [email protected]dev: Returned: code: 1 signal: null
13 info lifecycle [email protected]~dev: Failed to exec dev script
14 verbose stack Error: [email protected] dev: npm run hot-server -- --start-hot
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Program Files\Node\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess. (C:\Program Files\Node\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:920:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:230:5)
15 verbose pkgid [email protected]
16 verbose cwd D:\Dev\Node\CPI\etv-cpi
17 error Windows_NT 10.0.15063
18 error argv "C:\Program Files\Node\node.exe" "C:\Program Files\Node\node_modules\npm\bin\npm-cli.js" "run" "dev"
19 error node v6.11.5
20 error npm v3.10.10
21 error code ELIFECYCLE
22 error [email protected] dev: npm run hot-server -- --start-hot
22 error Exit status 1
23 error Failed at the [email protected] dev script 'npm run hot-server -- --start-hot'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the electron-react-typescript-boilerplate package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error npm run hot-server -- --start-hot
23 error You can get information on how to open an issue for this project with:
23 error npm bugs electron-react-typescript-boilerplate
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls electron-react-typescript-boilerplate
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

-- From the console (Webstorm) ---
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\Node\node.exe" "C:\Program Files\Node\node_modules\npm\bin\npm-cli.js" "run" "dev"
npm ERR! node v6.11.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: npm run hot-server -- --start-hot
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'npm run hot-server -- --start-hot'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the electron-react-typescript-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run hot-server -- --start-hot
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs electron-react-typescript-boilerplate
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls electron-react-typescript-boilerplate
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\Dev\Node\CPI\etv-cpi\npm-debug.log

Environment: Websotrm 2017.2.1 on Windows 10

I noticed that the ./package.json file seems to reference files that are not there:

Line 6: "main.js" (I changed this to "main.development.js" that is present, but same failure)
Lines 65-72: The "files" array references files that are not present: "dist/", "main.js", "main.js.map". I'm not too familiar with NPM, but it seems to be this could be contributing to the problem?

Sorry, new to electron, so I'm probably doing something dumb... but I'm trying to spawn a child process from one of the redux actions just as a test. However, when I add the code:

import { actionCreatorVoid } from './helpers';
import * as process from 'child_process';
export const increment = actionCreatorVoid('INCREMENT_COUNTER');
export const decrement = actionCreatorVoid('DECREMENT_COUNTER');

export function incrementIfOdd() {
  return (dispatch: Function, getState: Function) => {
    const { counter } = getState();


    if (counter % 2 === 0) {
      return;
    }

    var ls = process.spawn('ls');
    console.log(ls);

    dispatch(increment());
  };
}

export function incrementAsync(delay: number = 1000) {
  return (dispatch: Function) => {
    setTimeout(() => {
      dispatch(increment());
    }, delay);
  };
}

i get the following error:

Uncaught TypeError: Cannot read property 'NODE_ENV' of undefined

I see that NODE_ENV is being set using the define plugin, so IDK if this is a bug or maybe what I'm trying to do isn't possible?

Any Insight would be appreciated! (EG if there is a better way/place to do this).

Hi,

thx for doing this great boilerplate project. It help´s a lot when starting development with react and electron! Great!
The only thing I am missing is a good debugging support out of my IDE. Is it possible to debug the main/render thread with VS-Code even when using the devserver (npm run dev)? What I have to do to configure the debugger properly?

When making changes to the Home app\components\Home.tsx component (change text from Home to Home1234), the UI doesn't get updated.
Note, the same thing (hot loading) works in the standard React repo (using plain javascript).

There have been updates to the react monorepoundefined

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hey,
I want to access electron API.
How I do this ?

npm run test-watch is not waiting and watching for the file.

Hello and thank you for the useful boilerplate,

I'm just getting started with the project, but I noticed something when I open it in Visual Studio Code: the editor shows e2e.spec.ts as red (meaning it has errors), and when I open the file, the first line is underlined, complaining something about an async callback in jest (I have attached a screenshot)

Of course, I can run the test and it works fine, but I was wondering if there's a way to fix this issue in Visual Studio Code.

Thank you

Hey there

I've been using your boilerplate and I gotta say, it rocks! As a react and electron rookie, it's cool because it just works. Now just one thing:
How can I ship (or use) resource files?

I've got a folder within the app folder, that is called assets. In there, there are 2 xml files which I like to ship with electron. It all works in develop, but when I build the whole thing, those files are kinda missing and I get a blank screen in the application :-(

So I tried to use an xml-loader for webpack and everytime I get "failed to load resource".

Is there any method to ship resource assets with electron, or isn't that possible?

Cheers
Chris

I ran across this problem earlier today and it seems to be related to this issue in react-hot-loader 313. The following snippet should highlight the issue:

import * as React from 'react';

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bar: {
        s1: '',
        s2: ''
      }
    };
    
    // Good practice bind in the constructor
    this.function1 = this.function1.bind(this);
  }

  function1(event) {
    let bar = this.state.bar;
    bar.s1 = event.target.value;
    this.setState({bar: bar});
    // Input will not update and a warning will show in the log
  }

  function2(event) {
    let bar = this.state.bar;
    bar.s2 = event.target.value;
    this.setState({bar: bar});
    // Expected behavior
  }

  render() {
    <div>
      <input type='text' onChange={this.function1} value={this.state.bar.s1} />
      <input type='text' onChange={this.function2.bind(this)} value={this.state.bar.s2} /> // Bad bind here
    </div>
  }
}

The expected behavior of the above code should be that the two inputs should update as expected on change. However what is happening is that the second input (with this bound in the render function) behaves as you would expect with the input updating when you type. The first input (with this bound in the constructor) causes the following warning to be thrown whenever a character is typed into it. The characters do not update as the state cannot be updated.

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the WHATEVER component.

A quick fix I have found for this case is to just update the webpack.config.base.js by removing the react-hot-loader/webpack loader.

Version 8.0.4 of @types/node just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @types/node is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hi,
first thx for your work,
i want to figure out how does it work to enable the resources. Any help would be nice