Ravenous Part 1 Failed to compile

Hi fellow Codecademics,

In the Ravenous project I tried to compile my App. I receive the following message:

Failed to compile.

Module not found: Can't resolve 'src/components/App' in '/Users/anson/Desktop/ravenous/src'

We have moved the App.js and App.css into a componentsdirectory which has another folder called App. The path of the file is now:


The index.js file contains the following:

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from 'src/components/App';

import reportWebVitals from './reportWebVitals';



<App />




// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals


Any ideas how to solve this? Thank you for your help!

You might just be importing the file with the wrong path.

1 Like

There is an App.js file inside of the App directory. So in order to import that file you can do:

import App from './components/App/App';


import App from './components/App/App.js';

You are trying to import the App directory which React gives a message that it can’t resolve.

1 Like

Thanks Mike, with your help it now works. Other question regarding using correct paths. This is the following message I got in the Terminal:

Failed to compile.

Module not found: Can't resolve '../components/BusinessList/BusinessList' in '/Users/anson/Desktop/ravenous/src/components/App'

import React from 'react';
import logo from '../../logo.svg';
import './App.css';
import SearchBar from '../components/SearchBar/SearchBar';
import BusinessList from '../components/BusinessList/BusinessList';

class App extends React.Component {
  render() {
    return (
      <div class="App">
        <SearchBar />
        <BusinessList />

export default App;

This is the folder structure. I can’t see why this path doesn’t work if we take App.js as a starting point

It looks like you have an App subdirectory under components directory (along with the other components). When you import BusinessList from there you are doing this:

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

But since you are just going back one directory level you should not have the components-directory in the path. So I would try this:

import BusinessList from '../BusinessList/BusinessList';

The good news is when you import in VS Code or another code-editor they usually show you available directories as you type the path which will make life a bit easier…

1 Like

Hi Mike, your solution did work. And I’m going to check it out if VS Code will hint and help me, which path I should take to the file I need. Thanks again!

1 Like