Jammming part step 57: Module not found: Can't resolve '../TrackList/TrackList'

Hi everyone,

I’m following the steps of the Jammming project- on step 57 thus far, only to discover there’s a nasty error on my page.

this is in the console:

Uncaught Error: Cannot find module ‘…/TrackList/TrackList’
at webpackMissingModule (SearchResults.css?737e:82)
at Module. (SearchResults.css?737e:82)
at Module…/src/Components/SearchResults/SearchResults.js (SearchResults.js:24)
at webpack_require (bootstrap:856)
at fn (bootstrap:150)
at Module. (App.css?4827:82)
at Module…/src/Components/App/App.js (App.js:99)
at webpack_require (bootstrap:856)
at fn (bootstrap:150)
at Module. (index.css?bb0a:82)
at Module…/src/index.js (index.js:18)
at webpack_require (bootstrap:856)
at fn (bootstrap:150)
at Object.1 (reportWebVitals.js:14)
at webpack_require (bootstrap:856)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1

This is my code so far:

App.js:

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

import SearchBar from '../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';


class App extends React.component {
  constructor(props) {
    super(props) 
    this.state = {
      searchResults: [
        { name: 'sonia',
          artist: 'oijgoifvdoinv',
          album: 'coding',
          id: 'xy'
        },
        { name: 'sonia',
          artist: 'oijofinvees',
          album: 'coding',
          id: 'xy'
        },
        { name: 'sonia',
        artist: 'eqwertuu',
        album: 'coding',
        id: 'xy'
        }
      ],
      playlistName: 'my playlist',
      playlistTracks: [
        { name: 'playlistname1',
        artist: 'thebestplaylist',
        album: 'codingplaylist',
        id: 'xyplaylist'
        },
      
        { name: 'playlistname1',
        artist: 'anevenbetterplaylist',
        album: 'codingplaylist',
        id: 'xyplaylist'
        },
  
        { name: 'playlistname1',
        artist: 'boringplaylist',
        album: 'codingplaylist',
        id: 'xyplaylist'
        }    

      ] 

    }
   
    this.addTrack = this.addTrack.bind(this)
    this.removeTrack = this.removeTrack.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 })
  }

  removeTrack(track) {
    let tracks = this.state.playlistTracks
    tracks = tracks.filter(currentTrack => currentTrack.id !== track.id)
    this.setState({ playlistTracks: tracks })
  }

//filtering out user has clicked on to remove 
 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}
      onRemove={this.removeTrack} />
      
    </div>
  </div>
</div>
  );
}
}

export default App;

Playlist.js:

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} 
  onRemove={this.props.onRemove}
  isRemoval={true} />
  <button className="Playlist-save">SAVE TO SPOTIFY</button>
  </div>
  )}
}

export default Playlist;

Searchbar:

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

class SearchBar extends React.Component {
// constructor() {
//   super()

//   }
  
  render() {
  return (  
  <div>
  <div className="SearchBar">
  <input placeholder="Enter A Song, Album, or Artist" />
  <button className="SearchButton">SEARCH</button>
</div>
</div>
  )}
}

  export default SearchBar

SearchResults.js

import React from 'react';
import './SearchResults.css';
import TrackList from '../TrackList/TrackList'

class SearchResults extends React.Component {
 

  render() {
  return ( <div>
    <div className="SearchResults"
    // onAdd={this.props.addTrack}
    >
      <h2>test</h2>
      <TrackList 
      tracks={this.props.searchResults} 
      onAdd={this.props.onAdd}
      isRemoval={false} />
    </div>
  </div>
  )}
}

export default SearchResults

Track:

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

// const renderAction = () => {
//   return isRemoval === 'true' ? <button>-</button> : <button>+</button> 
// }

class Track extends React.Component {
  constructor(props) {
    super(props)
    this.addTrack = this.addTrack.bind(this)
    this.removeTrack = this.removeTrack.bind(this)
  }


  renderAction() {
      if (this.props.isRemoval) {
        return <button className='Track-action' onClick={this.removeTrack}>-</button>
      } else {
        return <button className='Track-action' onClick={this.addTrack}>+</button>
      }
  }

  addTrack() {
    this.props.onAdd(this.props.track)
  }

  //if the id of the item weve clicked to remove matches the id of an item in the 
  //playlist array it'll be filtered out
  removeTrack(){
    this.props.onRemove(this.props.track)   
  }

    render() {
      return (
    
        <div className="Track">
          <div className="Track-information">

          <h3>{this.props.track.name}</h3>
               <p>{this.props.track.artist} | {this.props.track.album}</p>
          </div>
            {this.renderAction()}
        </div>


  )
 }
}






export default Track

Tracklist

import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';

// import SearchResults from '../SearchResults/SearchResults'

class TrackList extends React.component {
 
  render() {
    if (this.props.tracks) {
      const trackList = this.props.tracks.map(track => {
        return <Track 
        key={track.id} 
        track={track} 
        onAdd={this.props.onAdd} 
        onRemove={this.props.onRemove} 
        isRemoval={this.props.isRemoval} /> 
    })
  
  return ( 
    <div className="TrackList" track={this.props.playlistTracks}>
    { trackList }
     </div>
   )
  }
 }
}

export default TrackList;

It’s going to be something really obvious, i know it. any help would be appreciated!

That’s a strange looking error message because it makes it seem as though the file isn’t in the right spot, but it might not be that.

One thing I do notice is that you extended React.component instead of React.Component in your TrackList.js file. You’ve also done that in your App.js file. Try to fix those and see if the error goes away or changes.

1 Like

Good spot! I’ve updated my code with the amendments but it’s not liking the reference to the tracklist file- how frustrating.

I took all your files, corrected the casing of React.Component in both files that I mentioned, and then only had to correct one other thing to get a non-error page, but the error message for it was nothing like what you posted.

In your Playlist.js file, you access the prop playlistTracks but in your App.js file, you pass the playlist from state to the Playlist component on the attribute playListTracks. Correcting this let me see your test playlist and search results without an error on the page.

I tried changing the letter casing of one of the directories, and that was the closest I could get to the error message you posted, but it still didn’t have the full listing that your message is showing. Just in case though, I’d double and triple check all the directory and file names to be sure it all matches the casing being expected.

For reference, below is what mine looks like.

Hey, thanks for doing that!

I triple checked my folder structure and it was exactly the same. I deleted the Tracklist folder and file because it just wasn’t registering it- and that seemed to work!

I have another problem now. I’ve managed to complete the project but i’m getting a mapping error of undefined in my Tracklist file :sweat_smile:

Any chance i can pick your brain on that? It might be worth sharing my github repo if you have a few mins to spare?

Thanks for all your help so far! :slight_smile:

Glad you got that working!

Of course, pick away. Sharing the github link sounds like a good idea. It’ll be a lot easier to get a full view.

It was a really weird error- must be a quirk with create-react-app? Anywho i’ve sent you a direct message with a link to my repo- let me know if you got it ok! Thanks again! :slight_smile:

Yep, I got it. Replying to you there now.