Electron-forge: es6/7

[CyrusZei]

• [X] I have read the contribution documentation for this project.
• [X] I agree to follow the code of conduct that this project follows, as appropriate.
• [X] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Please describe your issue:
I have installed the electron-forge and want to use the react template, but when I create the project and then add arrow functions it gives me error in the console log

What does your config.forge data in package.json look like?

"config": {
    "forge": {
      "make_targets": {
        "win32": [
          "squirrel"
        ],
        "darwin": [
          "zip"
        ],
        "linux": [
          "deb",
          "rpm"
        ]
      },
      "electronPackagerConfig": {
        "packageManager": "yarn"
      },
      "electronWinstallerConfig": {
        "name": "electronreact"
      },
      "electronInstallerDebian": {},
      "electronInstallerRedhat": {},
      "github_repository": {
        "owner": "",
        "name": ""
      },
      "windowsStoreConfig": {
        "packageName": "",
        "name": "electronreact"
      }
    }
  },

"dependencies": {
    "electron-compile": "^6.4.3",
    "electron-devtools-installer": "^2.1.0",
    "electron-squirrel-startup": "^1.0.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-hot-loader": "^3.0.0-beta.6"
  },
  "devDependencies": {
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "electron-forge": "^5.2.2",
    "electron-prebuilt-compile": "2.0.7",
    "eslint": "^3",
    "eslint-config-airbnb": "^15",
    "eslint-plugin-import": "^2",
    "eslint-plugin-jsx-a11y": "^5",
    "eslint-plugin-react": "^7"
  }

Please provide either a failing minimal testcase (with a link to the code) or detailed steps to
reproduce your problem. Using electron-forge init is a good starting point, if that is not the
source of your problem.

1. I run this command
   electron-forge init my-new-project --template=react

2.I open the src/app.jsx file

import React from 'react';

export default class App extends React.Component {
  render() {
    return (<div>
      <h2>Welcome to React!</h2>
    </div>);
  }
}

1. I refactor and add a arrow function

import React, {Component} from 'react';

export default class App extends Component {
  constructor(){
    super();

    this.state = {

    }
  }

  handleClick= () => {
    console.log('button clicked');

  }
  render() {
    return (<div>
      <h2>Welcome to React!</h2>
      <button onClick={this.handleClick}>Click me</button>
    </div>);
  }
}

then I get this error in the console
/src/app.jsx: Unexpected token (10:14)
and if you count that is the arrow function.

This is my first electron project and I really want to try it out, but I want to use the es6/es7 features.

Thank you for all the help and keep up the good work.

[CyrusZei]

for anybody that is coming here for the class props this is how I solved it.

1. npm install babel-core
2. open .compilerc
3. inside of the plugins array add "transform-class-properties" in both development and production

enjoy

[S-Mitterlehner]

Hi,
this doesn't work for me.

I created a new Project and add an arrow function like u. I also added the babel-core and the plugin, but it doesnt work

Does anyone have another solution ?
Version is "^5.2.2" with react template

Can u please post your working package.json?

[shanbhardwaj]

@CyrusZei

Can you post your package.json. Running into the same issues.

[S-Mitterlehner]

Ah Sorry
forgot to write it in this thread.

The problem was the order of the plugins.
if the plugin transform-class-properties is the first in the plugins array it works

sorry

[neilyoung]

The hint from @CyrusZei was great and also the order seems to play a role. But I also had to issue

npm install babel-plugin-transform-class-properties --save

Then not even babel-core was required...

[malept]

you should --save-dev, not --save.

[neilyoung]

Right, confirmed. My bad. Disregard my post

EDIT: Hmm, wait. Did install babel-core with save-dev now. Initially it seemed to work, but then I got an undefined error for the transform plugin.

Removed babel-core again and installed

npm install babel-plugin-transform-class-properties --save-dev

...Fine.

[CyrusZei]

@shanbhardwaj

this is my .compilerc file

{

  "env": {

"development": {

  "application/javascript": {

    "presets": [

      ["env", { "targets": { "electron": "1.6.0" } }],

      "react"

    ],

    "plugins": ["transform-async-to-generator", "transform-class-properties", "transform-es2015-classes", "transform-es2015-arrow-functions", "transform-es2015-destructuring","transform-object-rest-spread" , "react-hot-loader/babel"],

    "sourceMaps": "inline"

  }

},

"production": {

  "application/javascript": {

    "presets": [

      ["env", { "targets": { "electron": "1.6.0" } }],

      "react"

    ],

    "plugins": ["transform-async-to-generator", "transform-class-properties", "transform-es2015-classes",  "transform-es2015-arrow-functions", "transform-es2015-destructuring", "transform-object-rest-spread"],

    "sourceMaps": "none"

      }

    }

  }

}