{"action":"created","issue":{"url":"https://api.github.com/repos/react-dnd/react-dnd/issues/716","repository_url":"https://api.github.com/repos/react-dnd/react-dnd","labels_url":"https://api.github.com/repos/react-dnd/react-dnd/issues/716/labels{/name}","comments_url":"https://api.github.com/repos/react-dnd/react-dnd/issues/716/comments","events_url":"https://api.github.com/repos/react-dnd/react-dnd/issues/716/events","html_url":"https://github.com/react-dnd/react-dnd/issues/716","id":217831185,"number":716,"title":"Uncaught TypeError: Cannot call a class as a function","user":{"login":"zabojad","id":1238030,"avatar_url":"https://avatars3.githubusercontent.com/u/1238030?v=3","gravatar_id":"","url":"https://api.github.com/users/zabojad","html_url":"https://github.com/zabojad","followers_url":"https://api.github.com/users/zabojad/followers","following_url":"https://api.github.com/users/zabojad/following{/other_user}","gists_url":"https://api.github.com/users/zabojad/gists{/gist_id}","starred_url":"https://api.github.com/users/zabojad/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zabojad/subscriptions","organizations_url":"https://api.github.com/users/zabojad/orgs","repos_url":"https://api.github.com/users/zabojad/repos","events_url":"https://api.github.com/users/zabojad/events{/privacy}","received_events_url":"https://api.github.com/users/zabojad/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-03-29T10:25:17Z","updated_at":"2017-03-29T10:29:22Z","closed_at":null,"body":"I'm trying to run the Card example with ES6 and I get:\r\n\r\n```\r\nUncaught TypeError: Cannot call a class as a function\r\n    at _classCallCheck (card.js:3)\r\n    at Card (index.js:62036)\r\n    at ReactCompositeComponent.js:306\r\n    at measureLifeCyclePerf (ReactCompositeComponent.js:75)\r\n    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:305)\r\n    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280)\r\n    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188)\r\n    at Object.mountComponent (ReactReconciler.js:46)\r\n    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)\r\n    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)\r\n```\r\n\r\nWhy is that happening ?"},"comment":{"url":"https://api.github.com/repos/react-dnd/react-dnd/issues/comments/290049586","html_url":"https://github.com/react-dnd/react-dnd/issues/716#issuecomment-290049586","issue_url":"https://api.github.com/repos/react-dnd/react-dnd/issues/716","id":290049586,"user":{"login":"zabojad","id":1238030,"avatar_url":"https://avatars3.githubusercontent.com/u/1238030?v=3","gravatar_id":"","url":"https://api.github.com/users/zabojad","html_url":"https://github.com/zabojad","followers_url":"https://api.github.com/users/zabojad/followers","following_url":"https://api.github.com/users/zabojad/following{/other_user}","gists_url":"https://api.github.com/users/zabojad/gists{/gist_id}","starred_url":"https://api.github.com/users/zabojad/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zabojad/subscriptions","organizations_url":"https://api.github.com/users/zabojad/orgs","repos_url":"https://api.github.com/users/zabojad/repos","events_url":"https://api.github.com/users/zabojad/events{/privacy}","received_events_url":"https://api.github.com/users/zabojad/received_events","type":"User","site_admin":false},"created_at":"2017-03-29T10:29:22Z","updated_at":"2017-03-29T10:29:22Z","body":"I can reproduce it with the example from the doc:\r\n```\r\nimport React from 'react';\r\nimport { DragSource } from 'react-dnd';\r\n\r\n// Drag sources and drop targets only interact\r\n// if they have the same string type.\r\n// You want to keep types in a separate file with\r\n// the rest of your app's constants.\r\nconst Types = {\r\n  CARD: 'card'\r\n};\r\n\r\n/**\r\n * Specifies the drag source contract.\r\n * Only `beginDrag` function is required.\r\n */\r\nconst cardSource = {\r\n  canDrag(props) {\r\n    // You can disallow drag based on props\r\n    return props.isReady;\r\n  },\r\n\r\n  isDragging(props, monitor) {\r\n    // If your component gets unmounted while dragged\r\n    // (like a card in Kanban board dragged between lists)\r\n    // you can implement something like this to keep its\r\n    // appearance dragged:\r\n    return monitor.getItem().id === props.id;\r\n  },\r\n\r\n  beginDrag(props, monitor, component) {\r\n    // Return the data describing the dragged item\r\n    const item = { id: props.id };\r\n    return item;\r\n  },\r\n\r\n  endDrag(props, monitor, component) {\r\n    if (!monitor.didDrop()) {\r\n      // You can check whether the drop was successful\r\n      // or if the drag ended but nobody handled the drop\r\n      return;\r\n    }\r\n\r\n    // When dropped on a compatible target, do something.\r\n    // Read the original dragged item from getItem():\r\n    const item = monitor.getItem();\r\n\r\n    // You may also read the drop result from the drop target\r\n    // that handled the drop, if it returned an object from\r\n    // its drop() method.\r\n    const dropResult = monitor.getDropResult();\r\n\r\n    // This is a good place to call some Flux action\r\n    CardActions.moveCardToList(item.id, dropResult.listId);\r\n  }\r\n};\r\n\r\n/**\r\n * Specifies which props to inject into your component.\r\n */\r\nfunction collect(connect, monitor) {\r\n  return {\r\n    // Call this function inside render()\r\n    // to let React DnD handle the drag events:\r\n    connectDragSource: connect.dragSource(),\r\n    // You can ask the monitor about the current drag state:\r\n    isDragging: monitor.isDragging()\r\n  };\r\n}\r\n\r\nclass Card {\r\n  render() {\r\n    // Your component receives its own props as usual\r\n    const { id } = this.props;\r\n\r\n    // These props are injected by React DnD,\r\n    // as defined by your `collect` function above:\r\n    const { isDragging, connectDragSource } = this.props;\r\n\r\n    return connectDragSource(\r\n      <div>\r\n        I am a draggable card number {id}\r\n        {isDragging && ' (and I am being dragged now)'}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nexport default DragSource(Types.CARD, cardSource, collect)(Card);\r\n```"}}
{"actor":{"display_login":"zabojad"}}