SyntaxError: expected expression, got '<'[Learn More] breed.list:1

[bradleyball]

SyntaxError: expected expression, got '<'[Learn More] breed.list:1

I'm not seeing the object in my console instead this error pops up.

[sorband]

Hello, I get the same error in Firefox. Chrome says it's a CORB issue:

jsonp.js:67 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://api.petfinder.com/pet.find?key=undefined&format=json&location=Seattle%2C%20WA&output=full&callback=jsonp_2vyr291vjltp984 with MIME type text/plain. See https://www.chromestatus.com/feature/5629709824032768 for more details.

I'm running this under W10 WSL. I tried cloning the repo at the specified commit and I am getting the same error.

[laniehei]

@cacheup you're getting an error related to babel. It's not interpreting the JSX correctly. Please check your files against Brian's.

Have both of you run npm install?

[sorband]

@laniehei yep, still the same. As I said above, I get the same error even in this actual repo at the 89678fe commit.

[1Marc]

I thought I remembered Brian fixing this in the course by clearing out the Parcel cache with rm -rf .cache

[1Marc]

Just verified this.

If you receive the SyntaxError: Unexpected token '<' error, then that means your .env file with the Petfinder API keys was not found by Parcel. This happens if you run npm run dev before adding the .env file.

To fix this error, you need to clear Parcel's cache with running rm -rf .cache ... then make sure you have created a .env file in your root directly with API_KEY= and API_SECRET= from the Petfinder API and the error will resolve.

[bradleyball]

ahhhhhhh yes thank you so much @1Marc also thank you @btholt for the best react walkthrough. Love front end masters !!

[scottcate]

I added this to my package.json, it's something I run when weird things happen. Just a reminder to myself that a bundler is in the middle of my code and the browser.

"dev": "parcel src/index.html", "dev-clear": "rm -rf .cache && parcel src/index.html",

[bradleyball]

@scottcate so then I would npm run dev-clear and it will clear my cache for me?

[scottcate]

@scottcate so then I would npm run dev-clear and it will clear my cache for me?

Yes, but as you can imagine the build is much slower, so that's what I did it as a second run script.

[djviy]

Just verified this.

If you receive the SyntaxError: Unexpected token '<' error, then that means your .env file with the Petfinder API keys was not found by Parcel. This happens if you run npm run dev before adding the .env file.

To fix this error, you need to clear Parcel's cache with running rm -rf .cache ... then make sure you have created a .env file in your root directly with API_KEY= and API_SECRET= from the Petfinder API and the error will resolve.

Thanks a lot! 👍 I use create-react-app instead of Parcel. To use variables I changed API_KEY to REACT_APP_API_KEY.
Now console.log(process.env) shows
[Log] {NODE_ENV: "development", PUBLIC_URL: "", REACT_APP_API_KEY: "8e5c40dbd5f82c15ca8d986f829....", REACT_APP_API_SECRET: "b787de6cd4342dfc74d622fd1ded...."}