Jamming - Create a Playlist App With the Spotify API (Part One)

Get Help
#1

I’m currently stuck on the Jamming project. Here’s the error my react app throws:

Blockquote

Compiled with problems:X

ERROR in …/src/Components/SearchBar/SearchBar.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Projects\codecademy\jamming\jamming\src\Components\SearchBar\SearchBar.js: Support for the experimental syntax ‘jsx’ isn’t currently enabled (8:13):

  • 6 | render() {*
  • 7 | return (*
    > 8 | 
  • |             ^*
  • 9 | *
  • 10 | SEARCH*
  • 11 | *

Add @babel/preset-react (babel/packages/babel-preset-react at main · babel/babel · GitHub) to the ‘presets’ section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (babel/packages/babel-plugin-syntax-jsx at main · babel/babel · GitHub) to the ‘plugins’ section to enable parsing.

  • at instantiate (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:72:32)*
  • at constructor (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:367:12)*
  • at Parser.raise (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:3684:19)*
  • at Parser.expectOnePlugin (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:3741:18)*
  • at Parser.parseExprAtom (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:13282:18)*
  • at Parser.parseExprSubscripts (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12852:23)*
  • at Parser.parseUpdate (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12831:21)*
  • at Parser.parseMaybeUnary (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12801:23)*
  • at Parser.parseMaybeUnaryOrPrivate (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12592:61)*
  • at Parser.parseExprOps (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12599:23)*
  • at Parser.parseMaybeConditional (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12569:23)*
  • at Parser.parseMaybeAssign (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12521:21)*
  • at C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12479:39*
  • at Parser.allowInAnd (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:14553:12)*
  • at Parser.parseMaybeAssignAllowIn (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12479:17)*
  • at Parser.parseParenAndDistinguishExpression (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:13608:28)*
  • at Parser.parseExprAtom (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:13180:23)*
  • at Parser.parseExprSubscripts (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12852:23)*
  • at Parser.parseUpdate (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12831:21)*
  • at Parser.parseMaybeUnary (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12801:23)*
  • at Parser.parseMaybeUnaryOrPrivate (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12592:61)*
  • at Parser.parseExprOps (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12599:23)*
  • at Parser.parseMaybeConditional (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12569:23)*
  • at Parser.parseMaybeAssign (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12521:21)*
  • at Parser.parseExpressionBase (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12457:23)*
  • at C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12451:39*
  • at Parser.allowInAnd (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:14547:16)*
  • at Parser.parseExpression (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:12451:17)*
  • at Parser.parseReturnStatement (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:15275:28)*
  • at Parser.parseStatementContent (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:14898:21)*
  • at Parser.parseStatement (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:14844:17)*
  • at Parser.parseBlockOrModuleBlockBody (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:15503:25)*
  • at Parser.parseBlockBody (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:15494:10)*
  • at Parser.parseBlock (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:15478:10)*
  • at Parser.parseFunctionBody (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:14152:24)*
  • at Parser.parseFunctionBodyAndFinish (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:14136:10)*
  • at Parser.parseMethod (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:14085:31)*
  • at Parser.pushClassMethod (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:16021:30)*
  • at Parser.parseClassMemberWithIsStatic (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:15870:12)*
  • at Parser.parseClassMember (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:15800:10)*
  • at C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:15740:14*
  • at Parser.withSmartMixTopicForbiddingContext (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:14524:14)*
  • at Parser.parseClassBody (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:15715:10)*
  • at Parser.parseClass (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:15689:22)*
  • at Parser.parseStatementContent (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:14892:21)*
  • at Parser.parseStatement (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:14844:17)*
  • at Parser.parseBlockOrModuleBlockBody (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:15503:25)*
  • at Parser.parseBlockBody (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:15494:10)*
  • at Parser.parseProgram (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:14762:10)*
  • at Parser.parseTopLevel (C:\Projects\codecademy\jamming\jamming\[email protected]\parser\lib\index.js:14749:25)*

Blockquote

Now,
I’m using VSCode in Windows 11. I’ve checked for syntax errors (and have a checker in VSCode). Nothing comes up. However, the error sees it as one because it doesn’t recognize Babel.
I have tried installing Babel again. I have checked Stackoverflow.
None of the fixes are working for me.
I’ve tinkered with various config files and presets in hopes that one of them would, but my app is not acknowledging Babel for whatever reason. This happened after I completed step 16.

Here’s my code for the three files I was working on when it broke:

App.js

import React from 'react'; import './App.css'; import SearchBar from '/Projects/codecademy/jamming/jamming/src/Components/SearchBar/SearchBar'; class App extends React.Component { render() { return ( <div> <h1>Ja<span className="highlight">mmm</span>ing</h1> <div className="App"> <SearchBar /> <div className="App-playlist"> {/* <SearchResults /> */} {/* <Playlist /> */} </div> </div> </div> ); } } export default App;

Searchbar.js

import React from 'react'; import '/Projects/codecademy/jamming/jamming/src/Components/SearchBar/SearchBar.css'; class SearchBar extends React.Component { render() { return ( <div className="SearchBar"> <input placeholder="Enter A Song, Album, or Artist" /> <button className="SearchButton">SEARCH</button> </div> ) } } export default SearchBar;

Searchbar.css

.SearchBar {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 6.94rem;
margin-bottom: 6.33rem;
}

.SearchBar input {
width: 287px;
padding: .88rem 0;
border: 1px solid #fff;
border-radius: 3px;
margin-bottom: 2.22rem;
color: #010c3f;
text-align: center;
font-size: 1rem;
}

.SearchBar input:focus {
outline: none;
}

.SearchButton {
cursor: pointer;
width: 8.11rem;
padding: .77rem 0;
border-radius: 54px;
background-color: #010c3f;
text-align: center;
font-size: .833rem;
transition: background-color .25s;
border: 0px;
color: #fff;
font-weight: 500;
}

.SearchButton:hover {
background-color: rgba(108, 65, 233, .7);
}

Any insight would be appreciated!

#2

Have you tried a fresh install of the starter project? Then copy over the files you have changed to that point.

#3

I was trying to avoid that because it’s a react app, but I will blow it away and start over if I must :crying_cat_face:

#4

I am not suggesting a full restart. Copy all of your modified react folders/files into the new ‘replacement’ project so that you can retain your code. Just wondering if something went wrong with the original setup for the node modules.

1 Like
#5

having a 401 error occur. my token is good. can’t figure it out. please help
thank u

#6

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.