Ravenous Part 1 - Compile failure

Get Help React.js
#1

Hi all,

So after completing the first ravenous project and running npm start, the app fails to compile, stating -

ravenous/src/components/BusinessList/BusinessList.js
SyntaxError: C:ravenous\src\components\BusinessList\BusinessList.js: Unexpected token (8:12)

   6 |     render() {
   7 |         return (
>  8 |             <div className="BusinessList">
     |             ^
   9 |                 <Business />
  10 |                 <Business />
  11 |                 <Business />

(Note: The error message doesnt state the full code, but it is closed)
Looking at the console on the loaded webpage there is a similar error -

ravenous/src/components/SearchBar/SearchBar.js
SyntaxError: C:\ravenous\src\components\SearchBar\SearchBar.js: Unexpected token (16:16)

  14 |             let sortByOptionValue = sortByOptions[sortByOption];
  15 |             return (
> 16 |                 <li key={sortByOptionValue}>{sortByOption}</li>
     |                 ^
  17 |             );
  18 |         });
  19 |     }

I have checked my code for actual syntax and reference errors (repeatedly) and all seems fine. Doing a bit of google research I have seen that some users found it to be related to the babelrc part of the React app and versioning. However this goes beyond my current scope of understanding… any other users had similar issues or any admins who can help?

Thanks in advance!

#2

Hi! Can you post your full code sheets for these two files? It’s hard to debug without seeing the full code that’s being executed. So much is intertwined.

#3

Hi thanks so much for trying to help however I’ve actually just figured out where it falls apart. Step 47 states that

create-react-app command creates a default App component for you. It includes a render() method

for whatever reason this was not the case with my install, which just used what I assume to be updated/or outdated(?) syntax -

function App() {
            return (
                            ......
                        );
}

export default App;

Changing this to the class type syntax made the difference…

1 Like