CODEWITHSUNDEEP
mobx-reactelectron-forge
mightymouse3062
mightymouse3062

Reputation: 109

Electron Forge template with mobx-react observers

I have recently started playing around with Electron Forge and I think it is an awesome tool. I have also been doing some work with the mobx-react package and have been using the observer feature.

Creating an electron-forge project based on the react template, I modify the app.jsx file to look like 

import React from 'react';
import {observer} from 'mobx-react';

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

When I run the application it errors out with

Uncaught SyntaxError: /home/me/project/src/app.jsx: Unexpected token (4:0)

Where line 4 is 

@observer export default class App extends React.Component {

From what I have played with in the past I used something like webpack to compile everything so it runs properly. Based on the description of the project I shouldn't need to worry about webpack.

How do I use Electron Forge with react, mobx, and the observers feature?

Upvotes: 1

Views: 309

Answers (1)

Leksat
Leksat

Reputation: 3071

  1. Install babel-plugin-transform-decorators-legacy package.
  2. Add transform-decorators-legacy and transform-class-properties to babel plugins.

Example contents of .compilerc file:

{
  "env": {
    "development": {
      "application/javascript": {
        "presets": [
          ["env", { "targets": { "electron": "1.6.0" } }],
          "react"
        ],
        "plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-async-to-generator", "transform-es2015-classes", "react-hot-loader/babel"],
        "sourceMaps": "inline"
      }
    },
    "production": {
      "application/javascript": {
        "presets": [
          ["env", { "targets": { "electron": "1.6.0" } }],
          "react"
        ],
        "plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-async-to-generator", "transform-es2015-classes"],
        "sourceMaps": "none"
      }
    }
  }
}

Upvotes: 1

Related Questions