Ravenous Part 1

So I am at the end of the first part of this project and I keep getting this error.

Failed to compile.

./src/index.js
Module not found: Can't resolve './components/app' in '/Users/Alex/ravenous/src'

I am not sure what I am doing wrong because the file is clearly there.

Is your folder named app or App? Also, you want to import the App component from the App folder, so the line should be import App from './components/App/App';

1 Like

Okay so that fixed one problem. Now I have another.

Now I am getting this.

Failed to compile
./src/components/App/App.js
Module not found: Can't resolve '../components/BusinessList/BusinessList' in '/Users/Alex/Documents/Portfolio/projects/ravenous/src/components/App'
This error occurred during the build time and cannot be dismissed.

And when I open up the developer tools in Chrome, I get the same error for the SearchBar stuff.

Here is my code for the files.

App.js

import React, { Component } from 'react';
import './App.css';
import SearchBar from './components/SearchBar/SearchBar';
import BusinessList from './components/BusinessList/BusinessList';

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

export default App;

BusinessList.js

import React from 'react';
import './BusinessList.css';
import Business from '../Business/Business';

class BusinessList extends React.Component {
    render() {
    <div className="BusinessList">
    <Business />
    <Business />
    <Business />
    <Business />
    <Business />
    <Business />
  </div>}
}

export default BusinessList;

SearchBar.js

import React from 'react';
import './SearchBar.css';

const sortByOptions = {
        'Best Match': 'best_match',
        'Highest Rated': 'rating',
        'Most Reviewed': 'review_count'
};

class SearchBar extends React.Component {
    renderSortByOptions() {
        return Object.keys(sortByOptions).map(sortByOption => {
            let sortByOptionValue = sortByOptions[sortByOption];
            return <li key={sortByOptionValue}>{sortByOption}</li>
        });
    }

    render() {
        return(
            <div className="SearchBar">
                <div className="SearchBar-sort-options">
                    <ul>
                    {this.renderSortByOptions()}
                    </ul>
                </div>
                <div className="SearchBar-fields">
                    <input placeholder="Search Businesses" />
                    <input placeholder="Where?" />
                </div>
                <div className="SearchBar-submit">
                    <a href="www.#.com">Let's Go</a>
                </div>
            </div>
        )
    }
}

export default SearchBar;

Okay I think I figured it out after reviewing the solution code. I’m not really sure as to what all was different, but I know that it works now lol

1 Like

Okay so I think I have finally pinpointed where the error was and I am not sure what to do about it.

In the help video it shows the App object in App.js is coded as such:

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

However, in the solution code it is coded like this:

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

The solution version works fine, but I am worried that I will need the version I am seeing in the video for it to work in the final product. Plus I am do not understand why the version that they used in the video will not work on my end.

I’m not sure where your solution code came from. I’m looking at the downloaded solution code for part 1, and it more closely resembles your code from a few days ago. It looks to me like your issue was with your import statements. The App component will need to extend React.Component, and have a render() method. The code you posted from the video is correct. Take another look at the import statements in your App.js file, and compare them to the code from the video, or from the part 1 solution. I’ll include them here for you:

import React from 'react';
import './App.css';

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