ReactJs CreateClass is not a function

Question

var React = require('react');

module.exports=React.createClass({
   render:function(){
   return(
        <div>
           <h1> the list  </h1>
        </div>   
   )}
})

When I run the above code I get the following error :

app.js:4 Uncaught TypeError: React.createClass is not a function

Is this because of a version difference or a typo ?

package.json-I have included create-react-class as seen here but not in the bower.json file 


 {
    "dependencies": {
        "browser-sync": "^2.18.13",
        "browserify": "^14.4.0",
        "create-react-class": "^15.6.2",
        "ejs": "^2.5.7",
        "express": "^4.16.0",
        "gulp": "^3.9.1",
        "gulp-live-server": "0.0.31",
        "react": "^16.0.0",
        "reactify": "^1.1.1",
        "vinyl-source-stream": "^1.1.0"
      }
    }

gulpfile.js -Am I missing some dependency in this file

var gulp= require('gulp');
var LiveServer= require('gulp-live-server');
var browserSync=require('browser-sync');
var browserify = require('browserify');
var reactify= require('reactify');
var source = require('vinyl-source-stream');

gulp.task('live-server', function(){

    var server= new LiveServer('server/main.js');
    server.start();
})

gulp.task('bundle',function(){
  return browserify({
    entries:'app/main.jsx',
    debug:true,
  })
  .transform(reactify)
  .bundle()
  .pipe(source('app.js'))
  .pipe(gulp.dest('./.tmp'))

})


gulp.task('serve',['bundle','live-server'],function(){
    browserSync.init(null,{
        proxy: "http://localhost:7777",
        port:9001
    })
})

And my main.jsx has the following

 var React = require('react');
var createReactClass = require('create-react-class');

var GroceryItemList=require('./components/GroceryItemsList.jsx');

React.render(<GroceryItemList/>,app);

the groceryitems.jsx has the following

var React = require('react');
var createReactClass = require('create-react-class');
module.exports=React.createReactClass({

        render:function(){
            return(
                <div>
                    <h1> Grocery Listify </h1>
                </div>

            )

        }
})

When I add the createReactClass I get an error: createReactClass is not a function and when I add import and ES6 syntax I get 'illegal import deceleration ' Thank you,

Naveen

Wouldn't there be a problem by trying to export an unnamed React component? btw, you should probably go with the updated and very well supported ES6 class syntax in the future. — Andrew
– Andrew, Commented Sep 29, 2017 at 6:10
I did that and I ended up with my browser totally frozen ... strange ... — user3741325
– user3741325, Commented Mar 8, 2018 at 21:54

Shubham Khatri · Accepted Answer · 2017-09-29 06:20:28Z

74

This is surely a version problem, If you are starting fresh, I would suggest you to create a React component by extending React.Component rather than using React.createClass since its deprecated from version 16.0 onwards and has been moved to a separate package 'create-react-class' as @Dream_Cap also mention

Also go with the ES6 syntax for imports. You would modify your code to

import React from 'react';

export default class App extends React.Component {
    render(){
       return(
           <div>
               <h1> the list  </h1>
           </div>   
        )
     }
}

answered Sep 29, 2017 at 6:20

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Naveen DINUSHKA Over a year ago

I get this when I try Import Parse Error: Line 1: Illegal import declaration while parsing file:

Dream_Cap Over a year ago

try "const React = require('react')"

arshovon Over a year ago

Excellent answer! But when I kept the default it was throwing error: ...does not contain an export named .... Then I used export class ... without the default. Can you help me understand the need of default here?

Shubham Khatri Over a year ago

@arsho, check this stackoverflow.com/questions/42051886/…

jmargolisvt · Accepted Answer · 2018-10-03 19:23:44Z

66

Per the documents, you need to get the npm create react class package. From the command line of your project's file path, you need to do npm install create-react-class --save, and then modify the code like this:

var React = require('react');
//You need this npm package to do createReactClass
var createReactClass = require('create-react-class');

    module.exports=createReactClass({
            render:function(){
                return(
                    <div>
                        <h1> the list  </h1>
                    </div>   
                )
            }

You also need React DOM to render the components like this:

npm install react react-dom
var ReactDOM = require('react-dom');
ReactDOM.render(<GroceryItemList/>,app);

edited Oct 3, 2018 at 19:23

jmargolisvt

6,1165 gold badges32 silver badges50 bronze badges

answered Sep 29, 2017 at 5:46

Dream_Cap

2,3122 gold badges21 silver badges31 bronze badges

6 Comments

Naveen DINUSHKA Over a year ago

I get this error on the console 'createReactClass' is not a function

Dream_Cap Over a year ago

Did you do "npm install create-react-class --save" from the command line to install the package?

Naveen DINUSHKA Over a year ago

if we use module.exports=createReactClass it wont give the error createReactClass' is not a function

user3741325 Over a year ago

I still get an error ... basically in the console I get something like the function, let's say: Greeter, hasn't being declared ... strange ...

John Over a year ago

I got the same error, but after npm install create-react-class, I now get an error on the server side

node_modules/client-sessions/lib/client-sessions.js:259   var components = content.split(".");                            ^ TypeError: Cannot read property 'split' of undefined     at Object.decode (.../project/node_modules/client-sessions/lib/client-sessions.js:259:28)     at Namespace.io.sockets.on.socket (.../project/server.js:62:27) ...[nodemon] app crashed - waiting for file changes before starting...

I dont understand what is going on. This happens no matter how I do it.

|

Sergey Vyacheslavovich Brunov · Accepted Answer · 2020-10-20 09:18:05Z

23

If you're getting an Error stating that React.creatClass is an undefined function it's because the newer versions of React don't support that.

You can try the below steps.

Install the create-react-class npm package:

npm install --save-dev create-react-class

Then create a new variable under the ReactDom variable:

var createReactClass = require('create-react-class');

Now instead of using React.createClass() for the components use the createReactClass() var.

Example: Replace this:

var TodoComponent = React.createClass({
    render: function() {
        return(`<h1>`Helloooo`</h1>`);
    }
});

With this:

var TodoComponent = createReactClass({
    render: function() {
        return(`<h1>`Helloooo`</h1>`);
    }
});

edited Oct 20, 2020 at 9:18

Sergey Vyacheslavovich Brunov

18.2k7 gold badges53 silver badges85 bronze badges

answered Nov 18, 2017 at 5:43

Chandra Agarwala

5816 silver badges9 bronze badges

1 Comment

Sarz Over a year ago

Hi having same problem but now I'm facing ReferenceError: require is not defined

Naveen DINUSHKA · Accepted Answer · 2017-10-01 02:08:46Z

3

Thanks for all the help .This is how the final answer looks like: 1) use react-dom to render

 var ReactDOM = require('react-dom');
  var List=require('./components/List.jsx');
  ReactDOM.render(<List/>,app);

2) use create-react-class (not react) and export it 'module.exports= createReactClass({.... instead of module.exports=React.createReactClass (this gives an error 'createReactClass' is not a function

Thank you all again! '

answered Oct 1, 2017 at 2:08

Naveen DINUSHKA

1,6493 gold badges23 silver badges46 bronze badges

Comments

user9610264 · Accepted Answer · 2018-04-13 10:11:05Z

1

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const App = function(){};
App.prototype = Object.create(Component.prototype);
App.prototype.render = function(){
     return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
     )
   }
export default App;

In this way you could avoid Class keyword

answered Apr 13, 2018 at 10:11

user9610264

111 bronze badge

Comments

Ramkumar Khubchandani · Accepted Answer · 2018-06-19 09:15:04Z

0

React.createClass is not listed in updated documentation, You have to go for createComponent with ECMA6 Class

answered Jun 19, 2018 at 9:15

Ramkumar Khubchandani

1471 silver badge4 bronze badges

Comments

zero8 · Accepted Answer · 2019-02-01 10:30:52Z

0

Try npm install first it could be that your devependencies in package.json is not fully installed.

answered Feb 1, 2019 at 10:30

zero8

2,0033 gold badges16 silver badges25 bronze badges

Collectives™ on Stack Overflow

ReactJs CreateClass is not a function

7 Answers 7

4 Comments

6 Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

6 Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Related