Ravenous Part 1 Compiling error

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/ravenous-part-one/projects/create-prj-components

I completed the Ravenous Part 1 and saw the video following along and correcting my mistakes.

I am running ‘npm start’ and the console says:

Compiled successfully!

You can now view ravenous in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://10.16.76.14:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

But when i go to the browser there is a long list of errors:

TypeError: Super expression must either be null or a function

_inherits

node_modules/@babel/runtime/helpers/esm/inherits.js:4

  1 | import setPrototypeOf from "./setPrototypeOf";  
2 | export default function _inherits(subClass, superClass) { 
 3 |   if (typeof superClass !== "function" && superClass !== null) {> 
4 |     throw new TypeError("Super expression must either be null or a function");  
5 |   }  
6 |   
7 |   subClass.prototype = Object.create(superClass && superClass.prototype, {

View compiled

(anonymous function)

http://localhost:3000/static/js/main.chunk.js:526:139

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

src/components/BusinessList/BusinessList.js:5

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

View compiled

webpack_require

/Users/kiralorenzen/Development/ravenous/webpack/bootstrap:782

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

View compiled

fn

/Users/kiralorenzen/Development/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:3000/static/js/main.chunk.js:172:95

webpack_require

/Users/kiralorenzen/Development/ravenous/webpack/bootstrap:782

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

View compiled

fn

/Users/kiralorenzen/Development/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:3000/static/js/main.chunk.js:865:62

webpack_require

/Users/kiralorenzen/Development/ravenous/webpack/bootstrap:782

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

View compiled

fn

/Users/kiralorenzen/Development/ravenous/webpack/bootstrap:150

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

View compiled

0

http://localhost:3000/static/js/main.chunk.js:1008:18

webpack_require

/Users/kiralorenzen/Development/ravenous/webpack/bootstrap:782

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

View compiled

checkDeferredModules

/Users/kiralorenzen/Development/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 | return result;

View compiled

Array.webpackJsonpCallback [as push]

/Users/kiralorenzen/Development/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:3000/static/js/main.chunk.js:1:57

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

I have tried to search for answers and some are about esm now being called es6, but I am not advanced enough to understand it properly.

Can you help?

Did you find a solution to this problem? Same thing is happening to me.

I had the same. My problem was in definition of class SearchBar where I used React.component, lower case c. After correcting, it started working.

class SearchBar extends React.Component

I can see you defined BusinessList as extends React.Component() but () should not be there.

class BusinessList extends React.Component {} is correct

Good luck!