React Development Setup and Ravenous: Part 1 Failed to Compile

./src/components/App/App.js
Module not found: Can't resolve './src/logo.svg' in '/Users/Josh/ravenous/src/components/App'

everytime i hit npm start into the terminal i get this failed to compile message and I am unsure how to fix this.

forgot to mention this is from the React Development Setup and Ravenous: Part 1 module and inside the project Create Projects & Components

Hello @ketchell21! Can you show me your app.js file? The error might be occurring there…

Sure! I was able to actually work through the project and I happened to watch the get help video. At the end of the video the guy actually deleted this line of code that was causing this problem claiming that we weren’t actually using this logo so we didn’t need it. But I am still curious what the problem was just for learning purposes. I did add the line of code back that was causing the problem just so you could see

import React from 'react';
import './App.css';
import logo from './src/logo.svg'
import SearchBar from '/Users/Josh/ravenous/src/components/SearchBar/SearchBar';
import BusinessList from '/Users/Josh/ravenous/src/components/BusinessList/BusinessList';

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

export default App;

As you can tell by the import searchbar and the import business list I was having problems using relative paths and had to use the whole path. Not sure why but this also might have something to do with why the logo was not working

Here I also modified (corrected) your code to use class App extends React.Component instead of function App() {}. You will need to also add the render method before the return statement

P.S. You can paste the corrected code from above, but make sure to add your render method!!!

1 Like

Hi there, welcome back to the forum.

The error is quite clear about what is the issue. Your App.js is looking for a logo file at the relative path ./src/logo.svg.

This path is relative to App.js, so would evaluate to /Users/Josh/ravenous/src/components/App/src/logo.svg which I imagine doesn’t exist.

The first few steps for Ravenous Part 1 has you move the “App” component from the src folder to a newly created subdirectory inside another new directory called components, and then asks you to update the paths.

You’ve not updated the path for the logo, that’s all. As you say, it isn’t actually used anywhere so you could just remove the line. Alternatively, you could seize the opportunity to practice working with relative paths as you seem to struggle with them (based on the non-relative paths to SearchBar and BusinessList). :slight_smile:

1 Like

Thank you appreciate it!

Thanks for taking the time to reply. I’ll definitely do that!

1 Like