Jamming local host won't load

My local host is not loading after I get to step 41. I have tried commenting out the last few things I wrote to no avail. Can anyone advice on how to solve/troubleshoot this problem?

the project link: https://www.codecademy.com/paths/build-web-apps-with-react/tracks/react-capstone/modules/jammming-capstone/projects/jammming-prj

my code: GitHub - ETurner-Bisset/jammming

  1. What is the error message in the console?
  2. What was the component you were working on when the app broke? Please post it here (properly formatted)

there is no error message in the console. Also I cannot access the dev tools.

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      searchResults: [{name: 'name1', artist: 'artist1', album: 'album1', id: 1}, 
      {name: 'name2', artist: 'artist2', album: 'album2', id: 2},
      {name: 'name3', artist: 'artist3', album: 'album3', id: 3}],
      playlistName: 'My Playlist',
      playlistTracks :[{name: 'playlistName4', artist: 'playlistArtist4', album: 'playlistAlbum4', id: 4},
      {name: 'playlistName5', artist: 'playlistArtist5', album: 'playlistAlbum5', id: 5},
      {name: 'playlistName6', artist: 'playlistArtist6', album: 'playlistAlbum6', id: 6}]

    }
    // this.addTrack = this.addTrack.bind(this);
  }

  // addTrack(track) {
    // let tracks = this.state.playlistTracks;
    // if (tracks.find(savedTrack => savedTrack.id === track.id)) {
      // return;
    // }
    // tracks.push(track);
    // this.setState({playlistTracks: tracks});
  // }

the code I was writing has been commenting it out to see if I could go back and make the page work. It was on step 41 and part way through 42.

In App.js create a method called addTrack with the following functionality:

Accepts a track argument
Use the track’s id property to check if the current song is in the playlistTracks state.
If the id is new, add the song to the end of the playlist.
Set the new state of the playlist

Stuck? Get a hint
42.
Bind the current value of this to .addTrack().

Pass .addTrack() to the SearchResults component as an onAdd attribute.

Why not? That would be essential in order to find the cause of the error, otherwise you’d need to manually read through all your code.

But it still doesn’t work, right?
The code I see posted here looks right. Also the one you commented out.

Take a look at what you render:

playlistTracks={this.state.playlisrTracks}

And this also gives you an error as long as you dont’t have such a method because it is commented out:

onAdd={this.addTrack}

Sorry I should have made myself clear. When I go into dev tools there is no data only on the Jammming site, it works fine otherwise. I corrected my speling mistake and commented out the onAdd bit. I did try another project and that displayed fine, so my thinking is its got to be in the Jammming project code somewhere.
And now I wondering is this might have anything to do with it?
Screenshot 2023-03-10 11.53.32

Never saw this message. Does this help?:

Try tracing the error down:
Take components out of the render method of the app. Does the app render when one component is taken out?

I tried the sugeestions on stack overflow, none helped. So I have posted the problem there as well. Hopefully someone there will have a solution. I also tried taking out all of the components in the render method but it didn’t help. Thanks for your ongoing help.

1 Like

I’m running out of ideas then. Good luck!

Ok I have solved one problem, the page will now load but I have done some more troubleshooting and the problem seem to arise when I uncomment out the playlist component. It won’t render on the page and then the page becomes unresponsive.

Hmm, I thought that didn’t work, but if it does you’re back on track. So let’s have a look at that component then. Can you post its full code here?

Thiis is what App.js currently looks like


import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar'
import SearchResults from '../SearchResults/SearchResults'
import Playlist from './Playlist/Playlist'
// import TrackList from '../TrackList/TrackList';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      searchResults: [{name: 'name1', artist: 'artist1', album: 'album1', id: 1}, 
      {name: 'name2', artist: 'artist2', album: 'album2', id: 2},
      {name: 'name3', artist: 'artist3', album: 'album3', id: 3}],
      playlistName: 'My Playlist',
      playlistTracks :[{name: 'playlistName4', artist: 'playlistArtist4', album: 'playlistAlbum4', id: 4},
      {name: 'playlistName5', artist: 'playlistArtist5', album: 'playlistAlbum5', id: 5},
      {name: 'playlistName6', artist: 'playlistArtist6', album: 'playlistAlbum6', id: 6}]

    }
    // this.addTrack = this.addTrack.bind(this);
  }

  // addTrack(track) {
  //   let tracks = this.state.playlistTracks;
  //   if (tracks.find(savedTrack => savedTrack.id === track.id)) {
  //     return;
  //   }
  //   tracks.push(track);
  //   this.setState({playlistTracks: tracks});
  // }

  render() {
    return (
      <div>
       <h1>Ja<span className="highlight">mmm</span>ing</h1>
      <div className="App">
      <SearchBar />
    <div className="App-playlist">
      <SearchResults searchResults={this.state.searchResults}
        // {/* onAdd={this.addTrack}  */}
       />   
       <Playlist playlistName={this.state.playlistName} playlistTracks={this.state.playlistTracks}/> 
    </div>
  </div>
</div>
    )
  }
}

export default App;
import React from 'react';

import './Playlist.css';



class Playlist extends React.Component {
    render() {
        return (
            <div className="Playlist">
            <input defaultValue={'New Playlist'}/>
            <Playlist tracks={this.props.playlistTracks}/>
            <button className="Playlist-save">SAVE TO SPOTIFY</button>
            </div>
        )
    }
}

export default Playlist;

You are rendering the Playlist component in itself…
Is that supposed to be the Tacklist component in there instead?

1 Like

Ok I changed the component to TrackList and imported TrackList now I get the following error and the page will not load.Failed to compile.

Module not found: Error: Can’t resolve ’ …/TrackList/TrackList’ in ‘/home/elli_t29/jammming/src/Components/App1/Playlist’
ERROR in ./src/Components/App1/Playlist/Playlist.js 6:0-48
Module not found: Error: Can’t resolve ’ …/TrackList/TrackList’ in ‘/home/elli_t29/jammming/src/Components/App1/Playlist’

webpack compiled with 1 error

Then you imported the Tracklist component into the Playlist component either with the wrong file path or the wrong spelling.

That means th imported file cannot be found.

Yes I understand that. I have checked the spelling and path, both appear to be correct but I must be going wrong somewhere.
This is what Playlist.js looks like now.

import React from 'react';

import './Playlist.css';

import TrackList from '../TrackList/TrackList';



class Playlist extends React.Component {
    render() {
        return (
            <div className="Playlist">
            <input defaultValue={'New Playlist'}/>
            <TrackList tracks={this.props.playlistTracks}/>
            <button className="Playlist-save">SAVE TO SPOTIFY</button>
            </div>
        )
    }
}

export default Playlist;

Sorry if I am being slow.

The error message is explicit: Either the path or the spelling is not correct.
In your case it is the file path.

the playlist component is in Components --> App1 --> Playlist
the tracklist component is in Components --> Tracklist

So

ist not the correct filepath.

../ means moving one level up into the App1 directory. But that’s not where your folder TrackList is located.

1 Like

Thank you . I see the error I made when setting up the file system and have figured out a fix. (I moved the playlist folder) I have also uncommented out all of my code and the page is loading! As I am sure you can tell I am new to coding but this will be one mistake I don’t make agin (hopefully).

Typical mistakes we all make over and over again. The most important thing is to know how to trace them. Knowing to code is knowing how to debug.
Happy coding!

1 Like