Jammming project: Step 79 Module parse failed: Invalid regular expression:

I am working on the Jammming project and find myself stuck. I am getting the following error on the Spotify.js file:

Module parse failed: Invalid regular expression: /access_token[^&]*)/: Unmatched ‘)’ (12:57)
File was processed with these loaders:
Failed to compile.

I have gone back to step 79 where this expression is created. I copy/pasted the hint code to make sure I didn’t have a typo. Also, looked at the video where this is done. But I still can’t figure out what I’m doing wrong. My code is as follows:

const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);

When I search the error on Google it looks like I might be missing some files or a library of some sort? But I haven’t had any problems following the lessons up to this point so it doesn’t feel right to me. Any suggestions on where I might look to get this resolved? Thanks in advance for your help!

Hello, @athelenegosnell73529.

Can you post the entire code from your Spotify.js file?
If/when you do, remove your clientId value like below:

const clientId = ''

This is what is in the file thus far:

import React from 'react';

let accessToken;

const clientId = ' ';

const redirectUri = 'http://localhost:3000/';

const Spotify = {

    getAccessToken () {

        if (accessToken) {

            return accessToken

        }

        //get url info

        const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);

        const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);

        if (accessTokenMatch && expiresInMatch) {

            accessToken = accessTokenMatch[1];

            const expiresIn = Number(expiresInMatch[1]);

            window.setTimeout(() => accessToken = '', expiresIn * 1000);

            window.history.pushState('Access Token', null, '/');

            return accessToken;

        } else {

            const accessUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`;

            window.location = accessUrl;

        }

},

search(term) {

    const accessToken = Spotify.getAccessToken();

    return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`,

    {headers: {

        Authorization: `Bearer ${accessToken}`

    }}).then(response => {

        return response.json();

    }).then(jsonResponse => {

        if (!jsonResponse.tracks) {

            return [];

        }

        return jsonResponse.tracks.items.map(track => ({

            id: track.id,

            name: track.name,

            artist: track.artists[0].name,

            album: track.album.name,

            uri: track.uri

        }));

    });

}

}

export default Spotify;

Well, the only thing I can figure is that there is an issue with your environment where the ability of the regular expression to capture characters using ( ) is somehow not allowed. Not 100 percent sure that is the problem, but it’s my best guess right now. You could try this workaround:

//remove the parenthesis from the regular expressions
const accessTokenMatch = window.location.href.match(/access_token=[^&]*/);
const expiresInMatch = window.location.href.match(/expires_in=[^&]*/);
//use the slice method to assign the same values to accessToken and expiresIn
accessToken = accessTokenMatch[0].slice(accessTokenMatch[0].indexOf('=') + 1);
const expiresIn = Number(expiresInMatch[0].slice(expiresInMatch[0].indexOf('=') + 1);

Locate the 4 lines in your code referenced above, and comment them out. Then add these lines in their place, and see if that works.

Let me know either way.

That worked. I think this will let me continue. But it also makes me think that I need to maybe do something to my environment? Thank you so much for getting back to me.

My first thought is to make sure everything is up to date. Glad it worked. There’s no harm in using the workaround. It does the same thing, but uses a second step when making the value assignments to the two variables referenced.

Happy coding!