{"action":"created","issue":{"url":"https://api.github.com/repos/elierotenberg/react-animate/issues/10","labels_url":"https://api.github.com/repos/elierotenberg/react-animate/issues/10/labels{/name}","comments_url":"https://api.github.com/repos/elierotenberg/react-animate/issues/10/comments","events_url":"https://api.github.com/repos/elierotenberg/react-animate/issues/10/events","html_url":"https://github.com/elierotenberg/react-animate/issues/10","id":106595562,"number":10,"title":"Problems loading module and defining animated components (Newbie).","user":{"login":"camerow","id":4154594,"avatar_url":"https://avatars.githubusercontent.com/u/4154594?v=3","gravatar_id":"","url":"https://api.github.com/users/camerow","html_url":"https://github.com/camerow","followers_url":"https://api.github.com/users/camerow/followers","following_url":"https://api.github.com/users/camerow/following{/other_user}","gists_url":"https://api.github.com/users/camerow/gists{/gist_id}","starred_url":"https://api.github.com/users/camerow/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/camerow/subscriptions","organizations_url":"https://api.github.com/users/camerow/orgs","repos_url":"https://api.github.com/users/camerow/repos","events_url":"https://api.github.com/users/camerow/events{/privacy}","received_events_url":"https://api.github.com/users/camerow/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-09-15T16:35:48Z","updated_at":"2015-10-14T09:25:15Z","closed_at":"2015-10-14T09:25:15Z","body":"Trying to get this going in a project and running into some problems. If I use your example of:\r\n\r\n```js\r\nAnimate.extend(class MyComponent extends React.Component {\r\n  fadeIn() {\r\n    // syntax using call delegation\r\n    Animate.animate.call(this,\r\n      'my-custom-animation', // animation name\r\n      { opacity: 0 }, // initial style\r\n      { opacity: 1 }, // final style\r\n      1000, // animation duration (in ms)\r\n      { easing: 'linear' } // other options\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return <div>\r\n      <button onClick={this.fadeIn}>Click to fade in</button>\r\n      <div style={Animate.getAnimatedStyle.call(this, 'my-custom-animation')}>\r\n        This text will appear soon after the click.\r\n      </div>\r\n    </div>;\r\n  }\r\n});\r\n```\r\nAnd use webpack babel loader to load your module: \r\n\r\n```js\r\n{\r\n    test: /\\.jsx?$/,\r\n    loader: \"babel?stage=0?includePaths[]=node_modules/react-animate/src\"\r\n}\r\n```\r\n\r\nI get through compiling, but when `MyComponent` goes to render it is an undefined component. From there I also re-ran nodemon, and I get an *Unexpected reservered word* Syntax error. \r\n\r\n```sh\r\n(function (exports, require, module, __filename, __dirname) { import raf from \r\n                                                              ^^^^^^\r\nSyntaxError: Unexpected reserved word\r\n    at exports.runInThisContext (vm.js:73:16)\r\n    at Module._compile (module.js:443:25)\r\n    at Module._extensions..js (module.js:478:10)\r\n    at Object.require.extensions.(anonymous function) [as .jsx] (/home/will/projects/zipwhip/verification-service/node_modules/babel-core/lib/api/register/node.js:214:7)\r\n```\r\nSo I figure I'm probably using the webpack loader wrong. Any advice on this? Still learning Webpack build tool and es6/7 stuff. Thanks in advance!"},"comment":{"url":"https://api.github.com/repos/elierotenberg/react-animate/issues/comments/147987974","html_url":"https://github.com/elierotenberg/react-animate/issues/10#issuecomment-147987974","issue_url":"https://api.github.com/repos/elierotenberg/react-animate/issues/10","id":147987974,"user":{"login":"eTorAken","id":5748125,"avatar_url":"https://avatars.githubusercontent.com/u/5748125?v=3","gravatar_id":"","url":"https://api.github.com/users/eTorAken","html_url":"https://github.com/eTorAken","followers_url":"https://api.github.com/users/eTorAken/followers","following_url":"https://api.github.com/users/eTorAken/following{/other_user}","gists_url":"https://api.github.com/users/eTorAken/gists{/gist_id}","starred_url":"https://api.github.com/users/eTorAken/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/eTorAken/subscriptions","organizations_url":"https://api.github.com/users/eTorAken/orgs","repos_url":"https://api.github.com/users/eTorAken/repos","events_url":"https://api.github.com/users/eTorAken/events{/privacy}","received_events_url":"https://api.github.com/users/eTorAken/received_events","type":"User","site_admin":false},"created_at":"2015-10-14T09:25:15Z","updated_at":"2015-10-14T09:25:15Z","body":"Thanks to open a new issue if needed."}}