CODEWITHSUNDEEP
reactjswebpack
north.inhale
north.inhale

Reputation: 511

Uncaught TypeError: (0 , _react.createClass) is not a function

i got the problem with new React, Webpack project. Can't resolve error at browser console appearing: "Uncaught TypeError: (0 , _react.createClass) is not a function"

Can you help me?

Opera console screenshot

Opera console screenshot: 'Uncaught TypeError: (0 , _react.createClass) is not a function'

webpack.config.babel.js

import path from 'path';

export default {
    mode: 'development', // development, production or none
    entry: './assets/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: 'bundle.js',
        sourceMapFilename: 'bundle.map'
    },
    // devtool: '#source-map',
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: ['babel-loader']
        }]
    }
};

.babelrc

{
    "presets": [
        "env",
        "stage-0",
        "react"
    ]
}

index.js

import { createClass } from 'react';
import { render } from 'react-dom';

const Note = createClass({
    displayName: 'Note',
    render() {
        return (
            <div className='TEST'>
                Hello world
            </div>
        );
    }
});

render(
    <Note />,
    document.body
);

Project screenshot in visual studio code

Project screenshot in visual studio code

package.json

{
  "dependencies": {
    "normalize.css": "^8.0.0",
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.8.2",
    "path": "^0.12.7",
    "webpack": "^4.10.2",
    "webpack-cli": "^2.1.4"
  },
  "name": "notes",
  "version": "0.0.1",
  "description": "",
  "main": "webpack.config.babel.js",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Andrew Dyachenko",
  "license": "ISC"
}

Upvotes: 0

Views: 1065

Answers (1)

Ritwick Dey
Ritwick Dey

Reputation: 19002

createClass function is removed from react v16.0.

I don't know why you want it. (maybe if you need to migrate an old project)

Anyway, You need to install a diffrent package create-react-class.

npm i -s create-react-class

And then

import { render } from 'react-dom';
import createReactClass from 'create-react-class';


const Note = createReactClass({
    displayName: 'Note',
    render() {
        return (
            <div className='TEST'>
                Hello world
            </div>
        );
    }
});

render(
    <Note />,
    document.getElementById('root') // rendering on document.body is bad. You should avoid it. Create a tag with id `root`
);

If you're following any old tutorial (if in case), the new syntax is

import { render } from 'react-dom';
import { component }from 'react';

class Note extends component{
    displayName: 'Note',
    render() {
        return (
            <div className='TEST'>
                Hello world
            </div>
        );
    }
}

// or, just simply  (in this case)

const Note2 = () => <div className='TEST'>Hello world</div>;

render(
    <Note />,
    document.getElementById('root') 
);

Upvotes: 3

Related Questions