Jamming project errors - Netlify won't build due to couple of errors - help!

Hi! Almost there, but a couple of errors still. And honestly, with 3 months of struggling with this project, I ended up replicating the code in components such as the Spotify.js example.

I’ve compared solution code and code of other shared examples, endlessly searched online and asked ChatGPT. Still unable to resolve final few errors for Netlify to successfully deploy - any help would be greatly appreciated !

A couple of issues I’m still having problems with:

  1. upon first load after Spotify login, search button search refreshes page (flashes error screen) and clears the search input field (unless a space is included after last character). Re-typing a second time does return songs from search. How do I fix?

  2. production build compiles with this error:

[eslint]
src/components/SearchBar/SearchBar.js
Line 14:6: React Hook useCallback has a missing dependency: ‘props’. Either include it or remove the dependency array. However, ‘props’ will change when any prop changes, so the preferred fix is to destructure the ‘props’ object outside of the useCallback call and refer to those specific props inside useCallback react-hooks/exhaustive-deps

  1. How to code to hide Spotify client Id etc for Netlify deployment? Searched endlessly online, is there any direct documentation in Codecademy for this?

I realize in sharing my GitHub repo for this, client Id is exposed, but here goes because I want to finish this project. Thanks for reading!

Code:
GitHub

Let’s start with the easy part:

The dependency array

The eslint error. The error message is very explicit and tells you exactly what to do. Maybe you remember that the hooks lesson had a section about what to add to the dependency array: Every function you call and every state you use inside the hook – basically every variable you use and did not define inside the effect hook. With functions and objects that can be a little tricky as they may cause constant rerenders. Search for the effect hook, see which of the props you use, destructure it and then add it to the dependency array. If you have trouble understanding the effect hook, post the code in question here (properly formatted) and read about the rules of hooks and the dependency array in the official react docs:

Notice that you can’t “choose” the dependencies of your Effect. Every reactive value used by your Effect’s code must be declared as a dependency.

Hiding the client ID

It is recommended not to expose your client id in a public repository (as you currently do). You can suppress that by creating an env variable. You need an .env (note the preceding dot) file in your root folder. If you created your app with create-react-app, the variables need to be prefixed with REACT_APP. E.g. your client id variable could be REACT_APP_CLIENT_ID. Then you assign the client id to that variable and replace it in your Spotify.js file with process.env.REACT_APP_CLIENT_ID.

But I don’t know what Netlify deploys from – the src files or the dist folder, prabably the first. So that would not work anymore. And in your live site the client id would be visible anyway.

Creating the access token

That’s how the Spotify.js is intentionally programmed: Spotify needs you to authorize and you do so by redirecting to the localhost with an appended query string that contains your client id. Spotify then sends a response with your access token which is appended to the localhost url. The url that is redirected to also needs to be set in the settings page in your settings page in the Spotify dashboard. So I don’t think there is a way to hide the client id.

2 Likes

Thanks so much for your time and reply! I was able to study and compare another Codecademy student’s repo and understand my dependency array errors, and make those corrections. This allowed Netlify to build production correctly. Regarding hiding the client Id - yes, your clue led me to follow yet another student’s thorough guide and complete in hiding the client Id.

1 Like

Well done! The client id is still visible in the URL, though – but I don’t think that you can avoid that the way the authorization process works… And I don’t think it’s necessary as you’d also need the client secret which is stored in your Spotify dashboard. So, nice job!

1 Like

Thanks again for your reply and encouragement! I’m attempting to understand maybe a further step, because currently only my personal client Id has access. Spotify has amazing documentation to authorize granting an access token, but it’s not something we covered in the front-end part of the Full Stack track. So I can login with my Spotify account, but if anyone else attempts to use this web app, even after they login, the search input field does not fetch and display songs.

If anyone can point me in the right direction in they, I’d be most appreciative!

Git repo

Site

1 Like

I think that the Jammming project was never designed to create a publically accessible and usable application. You probably already achieved the project’s goal – to get access and fetch data from an API and have a working React application.

Here is what happens when I try to search songs with your app:

Your App is in developer mode. Go to the your Spotify developer dashboard → Scottify → Settings

Then you’ll see something like this:

Within dev mode you can add up to 25 users who get access to to app. The default is that in dev mode only you can use the app. You find more information about this on Spotify: Quota modes

1 Like