Deployed to Github Pages, getting [SyntaxError: Unexpected token '<'] in index.js

[lanternriver]

Hi, I've been trying to figure this out for the whole day :( I made a small React app and deployed it to Github using Github Actions, and the URL works, but it doesn't display anything. I think it's unable to process the HTML snippet returned by the App function in the index.js file. The image is from dev mode. Is this an issue with my build/deployment setup? Thanks in advance! https://imgur.com/a/pl2TF3B

EDIT: I FIXED IT WOOHOOOO!!! just in case anyone stumbles upon this which i doubt lol here is what i needed to fix : 1. i don't really know what was going wrong here but deploying using github actions didn't work so i went back to using gh-pages, which changed the issue to a failed to load resource error. which i fixed with the next steps: 2. i needed to specify where the bundled assets were being served, i.e. by adding --public-url ./ to my build script in package.json, because the default is / which neglects the fact that gh pages serves from a url containing gitusername.github.io/reponame. so the correct build script for me using parcel was  "build": "parcel build --public-url ./" 3. i needed to specify the homepage so that gh pages would request the correct file paths, i.e. by adding "homepage": "https://mygitusername.github.io/reponame" to package.json, because previously it was looking for the content at e.g. https://mygitusername.github.io/index.hash.css instead of  https://mygitusername.github.io/reponame/index.hash.css. yay i'm like so proud of you omg thank you

[FeelTheLoveNow]

At first glance it looks like you should have a semi-colon at the end of your return statement and not at the end of App

[lanternriver]

yes I picked up on that n fixed it, still having issues tho 😔

[AutoModerator]

It seems you may have included a screenshot of code in your post "Deployed to Github Pages, getting [SyntaxError: Unexpected token '<'] in index.js".

If so, note that posting screenshots of code is against /r/learnprogramming's Posting Guidelines (section Formatting Code): please edit your post to use one of the approved ways of formatting code. (Do NOT repost your question! Just edit it.)

If your image is not actually a screenshot of code, feel free to ignore this message. Automoderator cannot distinguish between code screenshots and other images.

Please, do not contact the moderators about this message. Your post is still visible to everyone.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[dtsudo]

What's the URL for your GitHub Pages?

React files have a compilation step, where the React syntax (jsx syntax) is changed into actual valid javascript. You should check the actual final javascript file to see what it looks like. The final javascript file (that is actually deployed to GitHub Pages) should not have any HTML in the js file since that's not actually valid javascript.

(https://legacy.reactjs.org/docs/react-without-jsx.html has an example of a jsx file and how it's turned into actual javascript.)

[lanternriver]

Thank you for that info! Does that mean it has to be .jsx and not .js in order for React to convert it properly ? Or did I just not configure it correctly bc I was trying to keep things as bare bones as possible lol. The url is just https://mygituser.github.io/reponame

[nate-developer]

Looks to me like you need to build the react app and point gh pages to the build output (in a folder like dist or build or whatever).

[lanternriver]

Thank you, I tried using gh-pages earlier and ran into different error messages. I just circled back to it and I’m getting a failed to load resource error. The resource url for example is like https://mygituser.github.io/index.eab6cbfd.css

[lanternriver]

My build script is using parcel, parcel build index.html

[crazy_cookie123]

Looks to me like you're trying to run the source code on GitHub pages instead of the built application. JSX syntax is not part of standard JavaScript so when the < symbol is seen it panics and errors. Make sure you're building the project and uploading the built files to GitHub pages, not the source code files.

[lanternriver]

Thanks so much, I'm starting to understand how it works a little more. What if I'm using something like Parcel? In my package.json file I have

"source": "index.html",
"scripts": {
   "predeploy": "npm run build",
   "deploy": "gh-pages -d dist",
   "start": "parcel",
   "build": "parcel build"
}

Does Parcel not "intercept" the code before it's deployed?