React DND, connectDragSource not a function error

Question

I'm trying to to follow along in the React DND Chess tutorial (simple enough), but I've seem to hit a snag with a piece of my code. I am getting a error stating that connectDragSource is not a function, when I've declared it as such as seen in my code below. I've tried troubleshooting it for the past day, and have ran out of leads. If it helps, I'm using the React-Redux-Universal boiler, but I doubt that is causing any issues via my routes and children being rendered.

Component Code:

 import React, { Component, PropTypes } from 'react';
import { DragSource } from 'react-dnd';
import { ItemTypes } from './Constants.js';

require('./box1.css');


const pieceSource = {
    beginDrag(props){
        return {};
    }
};

function collect(connect, monitor) {
  return {
    connectDragSource: connect.DragSource(),
    isDragging: monitor.isDragging()
  }
};


export default class Student extends Component{

  render() {
    const { connectDragSource, isDragging } = this.props;
      return connectDragSource(
        <div style={{
          opacity: isDragging ? 0.5 : 1,
          fontSize: 25,
          fontWeight: 'bold',
          cursor: 'move'
        }}>
          ♘ !
        </div>
    );
  }
}

Student.PropTypes = {
  connectDragSource: PropTypes.func.isRequired,
  isDragging: PropTypes.bool.isRequired
};



DragSource(ItemTypes.STUDENT, pieceSource, collect)(Student);

Home Component Code:

import React, { Component, PropTypes } from 'react';
import Header from '../../components/Header/header';
import Footer from '../../components/Footer/footer';
import Student from '../../components/box1/box1';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
require('./home.css');


 class Home extends Component{
  render() {

    return (



        <div id="main">

              Hello World  
               <Student />



          </div>

    );
  }
}

export default DragDropContext(HTML5Backend)(Home);

App Code:

import React, { Component, PropTypes } from 'react';
require('./app.css');

export default React.createClass({
  render() {
    return (
      <div id="app">
        {this.props.children}
      </div>
    );
  }
});

Answer 1

I've fixed my issue, by switching everything over from ES6 to ES5 Syntax. Really weird, but it worked, see code below:

var React = require('react');
var PropTypes = React.PropTypes;
var ItemTypes = require('./Constants').ItemTypes;
var DragSource = require('react-dnd').DragSource;

var knightSource = {
  beginDrag: function (props) {
    return {};
  }
};

function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  }
}

var Knight = React.createClass({
  propTypes: {
    connectDragSource: PropTypes.func.isRequired,
    isDragging: PropTypes.bool.isRequired
  },

  render: function () {
    var connectDragSource = this.props.connectDragSource;
    var isDragging = this.props.isDragging;

    return connectDragSource(
      <div style={{
        opacity: isDragging ? 0.5 : 1,
        fontSize: 25,
        fontWeight: 'bold',
        cursor: 'move'
      }}>
        ♘
      </div>
    );
  }
});

module.exports = DragSource(ItemTypes.KNIGHT, knightSource, collect)(Knight);