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!
