Having trouble getting React to work

Nephfeye · October 14, 2017, 1:09am

I’m using webpack and babel. But when I run the app I keep getting the error:

“Uncaught TypeError: _react2.default.createClass is not a function
at Object. (myCode.js:974)
at webpack_require (myCode.js:20)
at module.exports (myCode.js:63)
at myCode.js:66”

This is the code that gets compiled by babel:

import React from “react”;
import ReactDOM from “react-dom”;

var HelloWorld = React.createClass({
   render: function(){
      return (
          <p>Hello, {this.props.greetTarget}!</p>
          ); 
   }
});

ReactDOM.render(
    <div>
        <HelloWorld greetTarget="Batman"/>
        <HelloWorld greetTarget="Robin"/>
        <HelloWorld greetTarget="Clayface"/>
    </div>,
    document.querySelector("#container")
    );

This is my webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");

var config = {
  entry: DEV + "/index.jsx",
  output: {
      path: OUTPUT,
      filename: "myCode.js"
  },
  module: {
      loaders: [{
          include: DEV,
          test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }]
  }
};
module.exports = config;

And these are my dependencies:

This is the section of code in the fully compiled file that is throwing the error:

var _react = __webpack_require__(6);

var _react2 = _interopRequireDefault(_react);

var _reactDom = __webpack_require__(18);

var _reactDom2 = _interopRequireDefault(_reactDom);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var HelloWorld = _react2.default.createClass({ **ERROR HERE**

And yeah, I have no idea. Literally no clue. I’ve been searching and searching and no one seems to be getting this exact error from what I can tell. Any help would be greatly appreciated or if you could maybe point me to an example that works I would be ecstatic.

Zerk · October 14, 2017, 4:07am

Quick question: why are u using React syntax that was last used 2 years ago?

Also this http://dl3.joxi.net/drive/2017/10/14/0024/0324/1589572/72/64c5adc298.png

And here’s a pen with example https://codepen.io/Zerk/pen/RLYeyJ