I'm a beginner at react.js.

I got this error:

Super expression must either be null or a function, not undefined

full error output in my browser chrome console:

Uncaught TypeError: Super expression must either be null or a function, not undefined at _inherits (bundle.js:21166) at bundle.js:21172 at Object.184.react (bundle.js:21196) at s (bundle.js:1) at e (bundle.js:1) at bundle.js:1

my codes:

const React=require('react');
const ReactDom=require('react-dom');

class App extends React ponent{

    render(){
        return(
            <div>
                < Header />,
                < Main />,
                < Footer />
            </div>
        );
    }
}

class Header extends React ponent{
    render(){
        return(
            <Header>
                <nav>
                    <h1>Header</h1>
                </nav>
            </Header>
        );
    }
}


class Main extends React ponent{
    render(){
        return(
            <div>
                <p> text 1</p>
            </div>
        );
    }
}

class Footer extends React ponent{
    render(){
        return(
            <h2>Footer</h2>
        );
    }
}

ReactDom .renderToStaticMarkup (<App /> ,document.getElementById('app'));

I'm a beginner at react.js.

I got this error:

Super expression must either be null or a function, not undefined

full error output in my browser chrome console:

Uncaught TypeError: Super expression must either be null or a function, not undefined at _inherits (bundle.js:21166) at bundle.js:21172 at Object.184.react (bundle.js:21196) at s (bundle.js:1) at e (bundle.js:1) at bundle.js:1

my codes:

const React=require('react');
const ReactDom=require('react-dom');

class App extends React .component{

    render(){
        return(
            <div>
                < Header />,
                < Main />,
                < Footer />
            </div>
        );
    }
}

class Header extends React .component{
    render(){
        return(
            <Header>
                <nav>
                    <h1>Header</h1>
                </nav>
            </Header>
        );
    }
}


class Main extends React .component{
    render(){
        return(
            <div>
                <p> text 1</p>
            </div>
        );
    }
}

class Footer extends React .component{
    render(){
        return(
            <h2>Footer</h2>
        );
    }
}

ReactDom .renderToStaticMarkup (<App /> ,document.getElementById('app'));

• javascript
• node.js
• reactjs

3 Answers 3

You should change React.component to React.Component capital C.
e.g-class main extends React.Component. In addition to that, remove the space between React. and Component

It seems that you're extending the classes wrong. It should be React.Component, not React.component

for me it occurred because of circular dependencies on static member (typescript). for example

B : import A from './B'

let x=A.staticValue

A : import B from './A' class A { static staticValue }