Webpack build React.createClass is not a function

Question

I have a ReactJS application with webpack module builder, following is the configuration in my webpack.config.js

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

module.exports = {
    entry: {
        app : './src/scripts/app.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'public')
    },
    context: __dirname,
    resolve: {
        extensions: ['.js', '.jsx', '.json', '*']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                options: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
};

---

I have following code in my app.js

import React from 'react';
import ReactDOM from 'react-dom';

var MainApp =  React.createClass({
    render: function(){
        return (
            <div>
                <div>Header component</div>
                <div>Boady component</div>
            </div>
        );
    }
});

ReactDOM.render(
    <MainApp />,
    document.getElementById('container')
);

Now after running the server, when I load my page in browser getting following error:

Uncaught TypeError: _react2.default.createClass is not a function

Attaching screenshot of the error message:

I would like to know more details on this issue, many thanks for the help.

Answer 1

You need to install this npm extension:

npm install create-react-class --save

And then use this code:

var createReactClass = require('create-react-class');
var MainApp = createReactClass({
    render: function(){
        return (
            <div>
                <div>Header component</div>
                <div>Boady component</div>
            </div>
        );
    }
});
            }