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.

./src/index.js
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:

/Desktop/ravenous/src/components/App/App.js

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';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

// 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

reportWebVitals();

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';

or

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.

./src/components/App/App.js
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">
        <h1>ravenous</h1>
        <SearchBar />
        <BusinessList />
      </div>
    );
  }
}

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…