I've seen a few of these posts on StackOverflow already, though I really can't seem to get mine working no matter what I try.
I am trying to host a webpage, though when deploying I am left with a blank screen, and the following error in the console:
Uncaught SyntaxError: Unexpected token '<' in main.e7fa3b75.js:1
I've seen posts which suggest it is a problem with the pathing to my static files, though I cant seem to sort it out.
This post suggests I should remove an extension from my package.json, though I don't use that extension.
This post says I should remove the repository name from the homepage field in the package.json, though that also wouldn't work for me.
I'm out of ideas, here is the repo, if someone doesn't mind taking a look?
I have got it to render the website for a few moments, only to disappear to the same white screen moments later. There are no problems if I run the page on local host.
UPDATE
I have since got the application to host, but only if I explicitly visit the URL of the landing page.
https://jcdw99.github.io/
From the landing page there is a /papers route which can be reached from the navbar. If you press on the button, the page renders. Though, if you try to explicitly view the page, by manually visiting
https://jcdw99.github.io/papers it returns a 404.
Any help?
Try <HashRouter> instead of <BrowserRouter> since Github pages don't support HTML5 history API (see notes on client side routing) but React BrowserRouter uses it. See this question with similar problem.
One observation is if you navigate directly using # in the url, like https://jcdw99.github.io/#/papers it works!
Related
I am getting a 404 error whenever I try to enter a URL directly in the browser whereas, the normal routing using react-router-dom works fine.
I have a nested routes structure with the nested routes being lazy loaded.
I have also read about a few potential solutions including hashrouter but it comes with the disadvantage of having a hash in the url
Are there any other solutions?
When using React, it's important to understand that the app is only initially loaded when you call the index route (e.g. localhost:3000/), so if you're manually browsing to certain routes (e.g. localhost:3000/testroute), your browser is attempting to GET that specific route rather than loading the React application first.
I'd suggest checking out the answer on this post, as it provides a very detailed explanation and potential solutions. On one of my React apps I encountered this issue and was able to resolve it with a DNS wildcard.
Some days ago I was working on an issue for my job where a page on React couldn't "catch" an error when someone tried to navigate using a bad URL that had the percentage sign (%) that can't be decoded.
The React project uses react-router-dom to handle navigation by showing different views when accessing different URL's (it even has a 404 route when it has no matching routes), and the struture looks very similar to React Router's 404 example, here's the link where you can try for yourself adding /% to the URL from the sandbox's browser and understand in a better way the problem.
In my local-development scenario the page only shows the stack trace in the following image (also check the console output).
I understand that it if someone provides a bad URL that can't be decoded this error will throw and therefore the page will not run. I've been looking for a while and haven't found nothing related to how to catch it on React (I'm not sure if that's really possible).
Any suggestions are welcome!
I've built a Next.js app that uses dynamic routing and I'm noticing some strange behavior with the <Link> prefetches.
Occasionally (usually after rebuilding but not always) my app starts returning 404s for all prefetches on a given page. If I follow a link, the next page loads but again, all the prefetches on that page start to 404. This problem will go away after refreshing the page several times but this is not always consistent.
The breaks seem to happen exclusively on my dynamic routes, using getStaticProps and content revalidation every second. Below is an example of how I've structured my Link, note tripname would be a dynamic value.
<Link href={`/trip/${tripname)}`}>
<a>
<Card className={classes.tripCardRoot} />
</a>
</Link>
This is what happens when the page loads.
Edit:
I spent the day digging into this and have some additional details to better describe what I'm experiencing. This error is definitely related to when I build my app and is only occurring on pages that are being generated after the build process via the fallback:true property in my getStaticPaths() function.
Pages that are explicitly built (e.g. in the paths array) do not seem to exhibit this problem. I'm not sure if this makes sense but it seems as though the first few loads of a given page revert back to a version from the previous build rather than a fallback page. It's only after reloading a page a few times that the fallback functionality actually kicks in and next builds that page as part of the current build. From that point on everything seems to work as expected until the next build where the whole ordeal starts fresh.
Also included a screenshot of the console log indicating that there's an issue in the /_next/data/... directory. Though I'm not sure what this error is actually referring to.
I had the exact same problem... After 2 days trial/error I finally found a solution. But it's not the best solution IMO.
I updated all my <Link /> components from next/link and disabled the prefetch option. After this change I don't see any 404 errors in my dev-tools network-tab anymore. All GET-requests for the pre-generated JSON data will only take place on hover now, and magically they now don't result in a 404...
I know it is not the best solution, but at least the problem is gone... Hopefully somebody will reply with a better solution!
I used create-react-app to create my react app.
I have it deployed on AWS Cloudfront + S3. Everything seems to work when I visit the site: https://www.remotecareers.io
However, when I try using the "Fetch and Render" feature of Fetch as Google, I see this:
It's weird that the This is how a visitor to your website would have seen the page: part is empty. However, my main issue is when I try to do the same thing for the non-root routes.
For example, I have this page: https://www.remotecareers.io/remote-jobs/new. It looks like it's working fine. However, when I try fetching it through google it says it's Not Found.
It says the same thing in the new Google Search Console too:
So far even to get just the This is how Googlebot saw the page: part to work, I installed and added:
import "babel-polyfill"; // I tried this by itself as well as with the 2 below
import "url-search-params-polyfill";
import "whatwg-fetch";
What's weird is that the homepage is (partially) working but the rest of the pages aren't being scanned at all. I thought it might be because I wa missing the robots.txt file so I added it but it seems to not have any affect (https://www.remotecareers.io/robots.txt). Can someone help me?
From my experience, relying on googlebots to run javascript to render the app is not very reliable. For best SEO performance, you need to server render your react app.
You will need a dedicated NodeJS server that will render your react app, then send down the rendered HTML to the browser. The browser will receive the HTML response, which includes some script tags as well. After the scripts are loaded, it will run and hydrate your react app so that everything works properly.
Try reading this article to get you started on this topic.
So I am using a web app which has an iframe pointing to my angularjs application. If I navigate around the parent web app, I notice that the browser history is doubled up. For example, if I navigate to contacts > about us > home, then the history will be:
- home
- about us
- about us
- contacts
- contacts
If I point the iframe to a simple web page with no angular, then the parent app history works fine. I came across this bug on the angularjs website with a similar issue which appears to have been resolved in an earlier version of angular: https://github.com/angular/angular.js/issues/1054 but it doesn't seem to be resolved for some people. I'm using v1.2.26. Has anyone else experienced this issue?
So it turns out my assumptions about routing as the potential cause were correct, and I can't believe I didn't realize this sooner. Essentially my iframe app routes to different locations through some sort of event. Each route, while it does not impact the parent url, will add a new entry to the browser history (which is normal browser behaviour). The iframe app is designed upon page load to run through a couple routes, thus adding to the browser history, and making it appear like each parent page navigation was doubled.
The question now becomes, is there a way to prevent each route execution from adding the browser history?
UPDATE:
$location.replace() seems to be the only solution I can find. The app makes use of $location.path() a lot to trigger a new route; so I've modified it to be $location.path().replace(); This will replace the current history entry instead of adding a new one.