I finished developing a professional portfolio website for myself (since I will be graduating this May). Everything looked great when I was using the development server. However, after I tried to deploy it to GitHub Pages, only a blank screen shows. The site should be reachable at https://shaynajrosado.github.io/Portfolio.
After getting frustrated, I tried seeing whether hosting it on Firebase would make a difference.
Click here to see Firebase-Hosted Project
Still, nothing shows up.
This links to a picture of the error message I get when I right-click on the blank page & Inspect
After clicking the error message, it takes me to the React website which translates the error message into: "e(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."
However, in my code, there really aren't any return statements missing. Below is a link to the project repository:
https://github.com/shaynajrosado/Portfolio/tree/gh-pages
I currently have the project set to use branch gh-pages as the source.
Any words of advice would be very greatly appreciated as I continue to wrestle with this!
Related
I have WordPress shared hosted server with Hostinger and wanted to deploy my react app there. I connected to the server with SFTP and copied and pasted the build folder's contents into public_html/test-gpu-app.
The app works, but I've experienced the strangest issue: when accessing the page, a blank page is displayed for 5 or so seconds, and full render takes nearly 8 seconds.
I've deployed the boilerplate react app to ensure it wasn't something I coded poorly/inefficiently, and it experiences the exact same issue. When deploying to Vercel, the app loads instantly, so it's clearly something to do with the server.
Server usage isn't anywhere close to maxed out, and every other page on the site loads quickly. I'm at a loss, can't figure out where to go from here.
The page:
https://artofpc.com/test-gpu-app/
GTMetrix test:
https://gtmetrix.com/reports/artofpc.com/e9IhhRzi/
Any help would be massively appreciated.
If you run the chrome performance profiler, you will see that the only function calls happening when the content loads are by a script called cmbv2.js, which appears to be a data tracking framework or something like that.
Your app code is downloaded only # 5 seconds or so, likely an arbitrary timeout by the lib. I'm guessing this is something like an analytics framework waiting to display content before JS initializes so that users don't see flashes of content. Do you have settings that automatically defer JS or anything like that by third party libs?
It reminds me of something like a layer that sits between HTML and the end user, auto deferring JS execution or something like that.
Be warned of this smell, future internet folks!
I've recently updated my react app to the latest version 18, but since doing that the html in localhost disappears after a few seconds. When I go to dev tools and look at the in 'Elements', it's empty but all of the content is still on the page, I just can't interact with it (click links or buttons, etc.).
Does anyone know what is causing this as I need to know before I push my code to production, as I'm not sure if this is a development environment issue.
I'm more than happy to post screenshots of my code, but I don't even know which screenshots would be helpful/relevant. Let me know if you need any. Thanks
I have a create-react-app build being served by flask. It works fine in other browsers; however on Firefox, when I do a reload, the main.js file is stuck at the fetch method. After 3 minutes, it timesout then renders what it suppose to. I am looking for guidance on where to look from hereon. The production server does not log that the endpoint is receiving the fetch request; however, once the 3 minutes is up, the client side renders the updated information (as if it hit the server side). Everything looks like it should be working in the code I wrote, but I am not able scope out where I should be looking in debugging this issue.
Note: I am giving a broad description of the problem at the moment, but will disclose specifics such as codes, logs, and others items once I am able to get some guidance of the matter. As of now, there are no resources pointing out this specific issue, thus displaying code will simply be a "garbage" dump.
After working on the problem for quite some time, we found these two articles to be very helpful:
https://www.andreasreiterer.at/fix-whitescreen-static-react-app/
https://blog.miguelgrinberg.com/post/how-to-deploy-a-react--flask-project
After testing different sources, we first found that article one's suggestion of changing the homepage to the base url worked. After realizing that the nginx was getting confused on which static files to server, we proceeded to follow article 2's steps.
We did not have any issues on other browsers, but only on firefox. I hope this will help those that are experiencing the same Firefox issue.
I'm working on a react application, that works perfectly until it's built for deployment.
My repo is here:
https://github.com/aiglinski/qr_app.git
I've tried for the better part of two days. I would post code, but at this point I'm so lost I wouldn't even know where to start.
The app does load. If you open the console all of the elements show, and I can manually enter different paths and those load, but nothing shows beyond a blank screen.
Thanks.
I am watching this video and when an error occurs he gets an actual error on the page and only a blank white screen when he deploys the site.
I see this a few times. However I only see white screen no matter if I am on local host or on production.
I see he is using chrome on Mac and I am using it on PC. Not sure if that is the difference.
While I can't say definitively, my suspicion is that you aren't using create-react-app to setup your project.
You will only see that error message if you have used CRA to set up your project, as that is a specific error handler that is baked into that project. If you're not using create-react-app, React should log an error to your console instead.
ReactJS smart enough to hide the errors to the users when the app is in production mode.
You will see only a blank page if the app gets crashed but if you inspect the page you will see small detail about the error in the console.
if you running the app in development mode you will see full details about the errors.
for this case cames componentDidCatch method to handle app crash errors, instead of the blank page display a “Something went wrong” message to the user or you can send XHR request to the server with the error info.
Check out this example of declaring and using an error boundary
https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html