{"action":"created","issue":{"url":"https://api.github.com/repos/rails/webpacker/issues/202","repository_url":"https://api.github.com/repos/rails/webpacker","labels_url":"https://api.github.com/repos/rails/webpacker/issues/202/labels{/name}","comments_url":"https://api.github.com/repos/rails/webpacker/issues/202/comments","events_url":"https://api.github.com/repos/rails/webpacker/issues/202/events","html_url":"https://github.com/rails/webpacker/issues/202","id":217739163,"number":202,"title":"Inline presets take precedence over .babelrc and it's not clear from the get-go.","user":{"login":"sergiotapia","id":686715,"avatar_url":"https://avatars3.githubusercontent.com/u/686715?v=3","gravatar_id":"","url":"https://api.github.com/users/sergiotapia","html_url":"https://github.com/sergiotapia","followers_url":"https://api.github.com/users/sergiotapia/followers","following_url":"https://api.github.com/users/sergiotapia/following{/other_user}","gists_url":"https://api.github.com/users/sergiotapia/gists{/gist_id}","starred_url":"https://api.github.com/users/sergiotapia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sergiotapia/subscriptions","organizations_url":"https://api.github.com/users/sergiotapia/orgs","repos_url":"https://api.github.com/users/sergiotapia/repos","events_url":"https://api.github.com/users/sergiotapia/events{/privacy}","received_events_url":"https://api.github.com/users/sergiotapia/received_events","type":"User","site_admin":false},"labels":[{"id":495914236,"url":"https://api.github.com/repos/rails/webpacker/labels/enhancement","name":"enhancement","color":"84b6eb","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2017-03-29T01:29:44Z","updated_at":"2017-04-11T22:25:12Z","closed_at":null,"body":"Using Webpacker 1.1 and a brand new Rails 5.0.2.\r\n\r\nHere's my simple React component for testing purposes.\r\n\r\n```\r\nimport React, { Component, PropTypes } from 'react'\r\nimport DayPicker, { DateUtils } from 'react-day-picker'\r\nimport 'react-day-picker/lib/style.css'\r\n\r\nexport default class Example extends Component {\r\n  constructor(props) {\r\n    super(props)\r\n  }\r\n\r\n  sayHello = () => {\r\n    console.log(\"Hello\")\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <p onClick={this.sayHello}>Working</p>\r\n    )\r\n  }\r\n}\r\n`\r\n```\r\n\r\nThe error I get is:\r\n\r\n```\r\n21:21:01 hot.1  | ERROR in ./app/javascript/packs/components/example/example.js\r\n21:21:01 hot.1  | Module build failed: SyntaxError: Missing class properties transform.\r\n21:21:01 hot.1  |\r\n21:21:01 hot.1  |   11 |   }\r\n21:21:01 hot.1  |   12 |\r\n21:21:01 hot.1  | > 13 |   sayHello = () => {\r\n21:21:01 hot.1  |      |   ^\r\n```\r\n\r\nMy .babelrc file looks like:\r\n\r\n```\r\n{\r\n  \"presets\": [\"es2015\", \"stage-2\", \"env\", \"react\"]\r\n}\r\n```\r\n\r\nMy package.json\r\n\r\n```\r\n{\r\n  \"dependencies\": {\r\n    *snip*\r\n  },\r\n  \"devDependencies\": {\r\n    \"babel-preset-es2015\": \"^6.24.0\",\r\n    \"babel-preset-stage-2\": \"^6.22.0\",\r\n    \"webpack-dev-server\": \"^2.4.2\"\r\n  }\r\n}\r\n\r\n```\r\n\r\nAny ideas on how to make the class arrow functions working with Webpacker? It's like the stage-2 preset isn't being applied proper and I'm out of ideas.\r\n\r\nThanks for the help!"},"comment":{"url":"https://api.github.com/repos/rails/webpacker/issues/comments/293418289","html_url":"https://github.com/rails/webpacker/issues/202#issuecomment-293418289","issue_url":"https://api.github.com/repos/rails/webpacker/issues/202","id":293418289,"user":{"login":"JDutil","id":25104,"avatar_url":"https://avatars3.githubusercontent.com/u/25104?v=3","gravatar_id":"","url":"https://api.github.com/users/JDutil","html_url":"https://github.com/JDutil","followers_url":"https://api.github.com/users/JDutil/followers","following_url":"https://api.github.com/users/JDutil/following{/other_user}","gists_url":"https://api.github.com/users/JDutil/gists{/gist_id}","starred_url":"https://api.github.com/users/JDutil/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JDutil/subscriptions","organizations_url":"https://api.github.com/users/JDutil/orgs","repos_url":"https://api.github.com/users/JDutil/repos","events_url":"https://api.github.com/users/JDutil/events{/privacy}","received_events_url":"https://api.github.com/users/JDutil/received_events","type":"User","site_admin":false},"created_at":"2017-04-11T22:25:12Z","updated_at":"2017-04-11T22:25:12Z","body":"Thumbs up since this bit me as well. \r\n\r\nFor people with slightly more complicated loader configurations, such as, in my case where we are mixing coffeescript and jsx in order to get things working I had to modify my `loaders/coffee.js` to be:\r\n```\r\nmodule.exports = {\r\n  test: /\\.coffee(\\.erb)?$/,\r\n  use: [\r\n    {\r\n      loader: 'jsx-loader?insertPragma=React.DOM'\r\n    },\r\n    {\r\n      loader: 'babel-loader',\r\n      options: {\r\n        plugins: [\r\n          'transform-class-properties',\r\n          'transform-object-assign',\r\n          'transform-object-rest-spread',\r\n          'inline-react-svg'\r\n        ],\r\n        presets: [\r\n          'es2015',\r\n          'react',\r\n          'stage-2'\r\n        ]\r\n      }\r\n    },\r\n    {\r\n      loader: 'coffee-loader'\r\n    },\r\n    {\r\n      loader: 'cjsx-loader'\r\n    }\r\n  ]\r\n}\r\n```"}}
{"actor":{"display_login":"JDutil"}}