TypeError: Class extends value undefined is not a constructor or null in react js

Question

I am a beginner in react and I am playing with an example in https://jscomplete.com/repl.

So far my code looks like :

let data = [
    {
    name:"Paul O’Shannessy",
    avatar_url:"https://avatars1.githubusercontent.com/u/8445?v=4",
        company_name:"Facebook"
  },
  {
    name:"Tom Preston-Werner",
    avatar_url:"https://avatars0.githubusercontent.com/u/1?v=4",
        company_name:"Facebook"  
  }
];

const Card = (props) => {
    return (
    <div style={{margin:'1em'}}>
        <img width="75" src={props.avatar_url} />
      <div className="info" style={{display: 'inline-block',marginLeft: 10}}>
        <div style={{fontSize: '1.25em',fontWeight: 'bold'}}>{props.name}</div>
        <div>{props.company_name}</div>
      </div>
    </div>
  );
}

const CardList = (props) => {
    return (
    <div>
        {props.cards.map((card) => <Card {...card}/>)}
    </div>
  );
}

class Form extends React.component {
    render() {
    return (
        <form>
        <input type="text" placeholder="Github Username" />
        <button type="submit">Add Card</button>
      </form>
    );
  };
}

class App extends React.component {
    render() {
    return (
        <div>
        <Form />
        <CardList cards={data} />
      </div>
    );
  };
}

ReactDOM.render(<App />,mountNode);

But each time I run, I keep getting this runtime error. What am I doing wrong?

Answer 1

when you import React then try React.Component and never use React.Component(). Remove these parentheses, then this error will go.

import React from 'react';
......
class App extends React.Component {
}

or you can try this.

import React, {Component} from 'react';
......
class App extends Component {

Answer 2

In my case, the following was failing:

import { AbstractFilter } from './';

export class DismissedFilter extends AbstractFilter {
...

where my index was was like:

export { AbstractFilter}  from './filter';

I was able to resolve by specifying the full path to the import:

import { AbstractFilter } from './filter';

export class DismissedFilter extends AbstractFilter {
...

Seems the error was somehow related to webpack

Answer 3

In my case it was socket version issue so i do this to solve my issue

- npm un socket.io-client
- npm i [email protected]
- npm start