Issues with Electron

I am working on a react app that uses the babel-plugin-transform-decorators-legacy plugin in order to leverage the @ with connect as such:

/* rendering */
const mapStateToProps = state => ({
    currentTime: state.dataReducer.currentTime,
});

const mapDispatchToProps = dispatch => bindActionCreators({
    socketConnect: ACTIONS.socketConnect,
}, dispatch);

@connect(mapStateToProps, mapDispatchToProps)
export default class AppPage extends React.Component {
...

But unfortunately, when trying to merge it into the following electron react boilerplate this plugin is not working as expected.

The boilerplate I am using is https://github.com/chentsulin/electron-react-boilerplate and the babelrc file for it is:

{
  "presets": [
    ["env", {
      "targets": { "node": 7 },
      "useBuiltIns": true
    }],
    "stage-0",
    "react"
  ],
  "plugins": [
    "add-module-exports",
    "transform-decorators-legacy",
  ],
  "env": {
    "production": {
      "presets": ["react-optimize"],
      "plugins": ["dev-expression"]
    },
    "development": {
      "plugins": [
        "transform-class-properties",
        "transform-es2015-classes",
        ["flow-runtime", {
          "assert": true,
          "annotate": true
        }]
      ]
    }
  }
}

Here is the package.json for it also:

...
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-jest": "^22.1.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-dev-expression": "^0.2.1",
    "babel-plugin-flow-runtime": "^0.15.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-react-optimize": "^1.0.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "chalk": "^2.3.0",
    "concurrently": "^3.5.1",
    "cross-env": "^5.1.3",
    "cross-spawn": "^6.0.4",
    "css-loader": "^0.28.9",
    "detect-port": "^1.2.2",
    "electron": "^1.7.11",
    "electron-builder": "^19.55.3",
    "electron-devtools-installer": "^2.2.3",
    "electron-rebuild": "^1.7.3",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.1",
    "eslint": "^4.16.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-formatter-pretty": "^1.3.0",
    "eslint-import-resolver-webpack": "^0.8.4",
    "eslint-plugin-compat": "^2.2.0",
    "eslint-plugin-flowtype": "^2.42.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jest": "^21.7.0",
    "eslint-plugin-jsx-a11y": "6.0.3",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-react": "^7.6.1",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "fbjs-scripts": "^0.8.1",
    "file-loader": "^1.1.6",
    "flow-bin": "^0.64.0",
    "flow-runtime": "^0.16.0",
    "flow-typed": "^2.3.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^22.1.4",
    "minimist": "^1.2.0",
    "node-sass": "^4.7.2",
    "npm-logical-tree": "^1.2.1",
    "react-test-renderer": "^16.2.0",
    "redux-logger": "^3.0.6",
    "rimraf": "^2.6.2",
    "sass-loader": "^6.0.6",
    "sinon": "^4.2.2",
    "spectron": "^3.8.0",
    "style-loader": "^0.20.1",
    "stylefmt": "^6.0.0",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "^18.0.0",
    "uglifyjs-webpack-plugin": "1.1.8",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-bundle-analyzer": "^2.9.2",
    "webpack-dev-server": "^2.11.1",
    "webpack-merge": "^4.1.1"
  },
  "dependencies": {
    "devtron": "^1.4.0",
    "electron-debug": "^1.5.0",
    "font-awesome": "^4.7.0",
    "history": "^4.7.2",
    "moment": "^2.22.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-hot-loader": "^4.0.0-beta.13",
    "react-moment": "^0.7.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.6",
    "reconnecting-websocket": "^4.0.0-rc2",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "source-map-support": "^0.5.3"
  },
  "devEngines": {
    "node": ">=7.x",
    "npm": ">=4.x",
    "yarn": ">=0.21.3"
  }
}

Thank you for your help 😃

[loganfsmyth]

Alright, I see what the issue is now.

Like I mentioned in https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy/issues/78#issuecomment-389645896, and in the docs here https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy#note-order-of-plugins-matters, the ordering is important.

The issue is that the .babelrc isn’t the only place that is configuring transform-class-properties. Even though it is inside of the .babelrc, it is also specified in https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.renderer.dev.js#L65 and https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.renderer.dev.dll.js#L41

I don’t know if it is safe to remove from there, so you’d have to add "transform-decorators-legacy", above both of those cases too.

[loganfsmyth]

Sounds like you have a custom registry and it is having problems.