Error in Ravenous part 1

import React from 'react';
import "./App.css";
import './App.css';
import SearchBar from './components/SearchBar/SearchBar';
import BusinessList from "./components/BusinessList/BusinessList";

class App extends React.Component {
 render() { 
  return (
    <div className="App">
      <h1>ravenous</h1>
      <SearchBar />
      <BusinessList />
    </div>
  );
 }
}

export default App;

And I am getting error like this:

Blockquote

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

Module…/src/components/BusinessList/BusinessList.js

G:/Projects/React/ravenous/src/components/BusinessList/BusinessList.js:6

  3 | import "../Business/Business";  4 | import Business from "../Business/Business";  5 | > 6 | class BusinessList extends React.Component(){  7 |     render() {  8 |         return (<div className="BusinessList">  9 |             <Business />

View compiled

webpack_require

G:/Projects/React/ravenous/webpack/bootstrap:784

  781 | };  782 |   783 | // Execute the module function> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  785 |   786 | // Flag the module as loaded  787 | module.l = true;

View compiled

fn

G:/Projects/React/ravenous/webpack/bootstrap:150

  147 | 		);  148 | 		hotCurrentParents = [];  149 | 	}> 150 | 	return __webpack_require__(request);      | ^  151 | };  152 | var ObjectFactory = function ObjectFactory(name) {  153 | 	return {

View compiled

Module…/src/App.js

http://localhost:3002/static/js/main.chunk.js:162:95

webpack_require

G:/Projects/React/ravenous/webpack/bootstrap:784

  781 | };  782 |   783 | // Execute the module function> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  785 |   786 | // Flag the module as loaded  787 | module.l = true;

View compiled

fn

G:/Projects/React/ravenous/webpack/bootstrap:150

  147 | 		);  148 | 		hotCurrentParents = [];  149 | 	}> 150 | 	return __webpack_require__(request);      | ^  151 | };  152 | var ObjectFactory = function ObjectFactory(name) {  153 | 	return {

View compiled

Module…/src/index.js

http://localhost:3002/static/js/main.chunk.js:775:62

webpack_require

G:/Projects/React/ravenous/webpack/bootstrap:784

  781 | };  782 |   783 | // Execute the module function> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  785 |   786 | // Flag the module as loaded  787 | module.l = true;

View compiled

fn

G:/Projects/React/ravenous/webpack/bootstrap:150

  147 | 		);  148 | 		hotCurrentParents = [];  149 | 	}> 150 | 	return __webpack_require__(request);      | ^  151 | };  152 | var ObjectFactory = function ObjectFactory(name) {  153 | 	return {

View compiled

1

http://localhost:3002/static/js/main.chunk.js:917:18

webpack_require

G:/Projects/React/ravenous/webpack/bootstrap:784

  781 | };  782 |   783 | // Execute the module function> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  785 |   786 | // Flag the module as loaded  787 | module.l = true;

View compiled

checkDeferredModules

G:/Projects/React/ravenous/webpack/bootstrap:45

  42 | 	}  43 | 	if(fulfilled) {  44 | 		deferredModules.splice(i--, 1);> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);     | ^  46 | 	}  47 | }  48 | 

View compiled

Array.webpackJsonpCallback [as push]

G:/Projects/React/ravenous/webpack/bootstrap:32

  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);  30 |   31 | 	// run deferred modules when all chunks ready> 32 | 	return checkDeferredModules();     | ^  33 | };  34 | function checkDeferredModules() {  35 | 	var result;

View compiled

(anonymous function)

http://localhost:3002/static/js/main.chunk.js:1:69

Blockquote

Hi,

Could you please upload your project to github or similar so that we can look at the code properly. It’s a big project and difficult to navigate in a forum post.

1 Like

I’ve already responded to your other post on this topic:

You’re posting your App.js code, however your error is being thrown from BusinessList.js - the error message tells you as much.

You’ve made the same error as the OP in the other topic you’ve posted to about this. When you’re creating your component, you do this:

class myComponent extends React.Component {
    ....
}

not this

class myComponent extends React.Component() {
    ....
}

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.