Ravenous Project - Difficulties with path errors

Link to the associated project page is here

So I’ve spent the last day or so working on this project, and I think I’ve gotten about as far through debugging my path issues as I’m going to get without reaching out for help.

According to the error I’m receiving when I attempt to run the app, I cannot import either of BusinessList or SearchBar into App.js successfully. :upside_down_face:

Obviously, react apps have far too many files to try and get help with debugging here in any reasonable format, so I’ve uploaded the project into a public repo on my github here

1 Like

Are you getting an error message from CC or in the browser console? Looking at your code quickly, I don’t see any obvious errors. What is happening that tells you it is unsuccessful?

Oops, missed the question without an edit: I’m building offsite in VSCode so all my testing has been in browsers, through npm start.

when I try to deploy the app, i’m currently getting:

Compiled with problems:X

ERROR in ./src/components/App/App.js 6:0-67

Module not found: Error: Can’t resolve ‘…/components/BusinessList/BusinessList’ in ‘C:\Users\grogswiller\ravenous\src\components\App’

ERROR in ./src/components/App/App.js 7:0-58

Module not found: Error: Can’t resolve ‘…/components/SearchBar/SearchBar’ in ‘C:\Users\grogswiller\ravenous\src\components\App’

1 Like

Ahhh, now I see it. You don’t need to put components after the ../. What’s happening is that the ../ takes you back one level to the components folder, then it is looking for a folder called components . But you’re already in it. So it won’t find it.

You have:

import BusinessList from '../components/BusinessList/BusinessList';
import SearchBar from '../components/SearchBar/SearchBar';

Try changing it to:

import BusinessList from '../BusinessList/BusinessList';
import SearchBar from '../SearchBar/SearchBar';
1 Like

Awesome, traced that back through and it’s not giving me the same errors anymore! woohoo!

Compiled with problems:X

ERROR in ./src/components/SearchBar/SearchBar.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\ryanc\ravenous\src\components\SearchBar\SearchBar.js: Missing semicolon. (20:8)

18 | }
19 |

20 | render() {
| ^
21 | return {(
22 |

23 |

at Object._raise (C:\Users\ryanc\ravenous\node_modules@babel\parser\lib\index.js:506:17)
at Object.raiseWithData (C:\Users\ryanc\ravenous\node_modules@babel\parser\lib\index.js:499:17)
at Object.raise (C:\Users\ryanc\ravenous\node_modules@babel\parser\lib\index.js:460:17)
at Object.semicolon (C:\Users\ryanc\ravenous\node_modules@babel\parser\lib\index.js:3677:10)
at Object.parseExpressionStatement (C:\Users\ryanc\ravenous\node_modules@babel\parser\lib\index.js:14525:10)
at Object.parseExpressionStatement (C:\Users\ryanc\ravenous\node_modules@babel\parser\lib\index.js:5519:18)
at Object.parseStatementContent (C:\Users\ryanc\ravenous\node_modules@babel\parser\lib\index.js:14090:19)
at Object.parseStatement (C:\Users\ryanc\ravenous\node_modules@babel\parser\lib\index.js:13942:17)
at Object.parseStatement (C:\Users\ryanc\ravenous\node_modules@babel\parser\lib\index.js:5493:24)
at Object.parseBlockOrModuleBlockBody (C:\Users\ryanc\ravenous\node_modules@babel\parser\lib\index.js:14567:25)


Line 20:8: Parsing error: Missing semicolon. (20:8)

now… I know I shouldn’t put a semicolon where it’s suggesting I do, but I’m not sure what that might be pointing me to as the problem creating the syntax error.

Trying to trace it with the problems console in VSCode chases me to

function App() {
    return (
        <div className="App">
          <SearchBar />
          <BusinessList /> 

it’s pointing at the h1 - ravenous - close h1 line, teling me that i haven’t closed the statement, but i don’t know what it’s expecting from me

The render method of SearchBar is outside the class. Just move it inside. This is exactly why JS can be such a pain sometimes. The error messages don’t help very much.

Alright we’ve found solution number 2!

Now I have one I’m struggling to even find error codes for.

In addition to the above mentioned fix, I had to move the background images into the correct folder, but that’s now been done also, and when I render the app, I just get a white page.

no errors at all, not in the npm launch, and not on the page, just a white screen.

Any tips on where to start looking on this one?

Ok found what seems to be the error causing the problem… I’m pretty sure it believes that renderSortByOptions is not defined, but I can’t seem to figure out what i did incorrectly to lead to this.

@grogswiller just a heads up that you should be careful not to so obviously publish your API key (which is meant to be kept secret). Here’s an article about how you can hide it from your github repo. reactjs - How do I hide API key in create-react-app? - Stack Overflow

thanks @lucitemple I do believe I have corrected that now :slight_smile:

This isn’t a solution but I’ve realized that if I don’t put a valid search term like “Pizza” or “Hamburger” along with a valid location then I get the same result of a bad request (error 400).

If I type “Pizza” in the business input field along with a valid zip code in the location field then the search results show up. Need to add a required property to the input fields along with a way to validate that they are correct OR add a function that catches errors and notifies them to input the fields