react app published on github pages shows white screen - javascript

I have a React.js app, I built this simple meme generator app trying to learn web development (pretty new to the stuff) and am trying to host it using Github pages. I followed all the steps like installing the gh-pages with node and adding the url to the packages.json and adding the extra 2 lines of code for predeploy and deploy. I have the source for the github pages set to gh-pages. i get no errors when I run the command "npm run deploy" in terminal. But when I click the link I get a white screen. The console gives the error "Loading failed for the with source “https://z0onic.github.io/static/js/2.0b197680.chunk.js”. which is the first js file in the build directory. I searched pretty heavily and found other people who had a similar white screen issue but none of the answers helped. I have triple checked against these answers. Based on the error I'm getting I think its a build error but I don't know how to fix it or figure out exactly what is going wrong.
The github repository is at https://github.com/z0onic/meme-page and the link to the blank page that should be the hosted app is https://z0onic.github.io/meme-page/
when hosting locally through vs code with "npm start" command everything works fine.
Any help is appreciated I hope I'm not overlooking something silly but like I said I'm new to coding and still learning.

set the homepage in package.json to "https://<username>.github.io/<reponame>/" of course substituting things in <>

Related

Unable to resolve module react-native-reanimated/src/core/AnimatedEvent

This is my first post so my apologies if I leave out some important details that will make it easier to answer the question.
As I was working on my project for my app development class I stumbled upon an error that I cannot fix/figure out what's causing it. I did not mess with any of the node modules and the app was working perfectly fine before the error message.
Image of error message
I have attempted to clear the cache, re install and update some of the packages that I needed for this project, and looked for any errors within the code of my project. No luck after 2 hours of attempts.
Are there any recommendations of that I need to do to fix this? Should I start the project from scratch again?
Thank you all!
Have you tried cd ios && pod install? Also, upload your package.json file
As the error suggests react-navigation-drawer is trying to find a component which doesn't exist. Implying your versions are out of sync.
I was able resolve this issue by upgrading react-navigation#4.0.0.

How to deploy a Next.js App on AWS using nginx

I'm currently following a tutorial on youtube on how to deploy a react app on AWS. He's using gitbash and nginx to do it. The problem is that currently I'm using a prebuilt template from themefor*st and the app they made includes next.js in it. Using this template, when I try to do "
npm run build" it does not provide me with an index.html file inside the build folder which is what the Youtube video tutorial points to, to run the front end on the AWS. I'm new to hosting a website but I think the problem lies in the /etc/nginx/sites-available/default configuration for the location. I look up answers on the internet but couldn't find anything helpful, closest so far are this documentation which I do not understand
https://nextjs.org/docs/advanced-features/static-html-export
I need help and if there are any questions regarding the file, I will try my best to explain them! Thank you
Here's the link to the youtube video I referred to above
https://www.youtube.com/watch?v=rE8mJ1OYjmM

React - Browser doesn't detect changes and console says '[HMR] Waiting for update signal from WDS...'

I am pretty new to React, sorry if I am asking something stupid. Any help would be highly appreciated :)
ENVIRONMENT
Ubuntu 20.04 in Windows 10 (WSL2)
Node version - v14.1.0
Npm version - v6.14.7
Code editor - VS Code v1.14.0
STEPS I DID
npx create-react-app <app-name>
cd <app-name>
npm start
https://localhost:3000 opens up in browser with default React landing page. Console says '[HMR] Waiting for update signal from WDS...
'
Delete all files in src directory and create empty index.js in src directory.
Output expected: Blank screen
Output: Default landing page of React even if I reload the page.
Struggles I made before asking this question :(
Looked in issues of create-react-app.
Tried troubleshooting create-react-app as mentioned in official docs.
Looked in stackoverflow for similar questions. Found some but none worked, maybe because my dev environment was different from them (WSL2 in Windows 10).
That sounds like a caching issue to me. My guess would be to clear your google chrome cache and try again. If that doesn't work, check your package.json file and make sure that under "scripts": "start" it says "react-scripts start".
Yayy! The issue is resolved.
It was my mistake :(.
All these days, I was trying to access the Windows filesystem from WSL2 and it seemed to be very slow. So I decided to work in the Linux filesystem itself. And everything works fine now. Thanks for helping :)

Gatsby hot reloading does not reload in the Hello World starter project

Description
I am following along with the instructions here: https://www.gatsbyjs.org/tutorial/part-one/
When I start the dev server and make a change to src/pages/index.js it is not hot reloaded in my browser.
Steps to Reproduce
Using gatsby-cli:
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
cd hello-world
gatsby develop
change the text inside of the div in src/pages/index.js
Expected Result
Page would automatically reload with new text.
Actual Result
Page would not change unless a manual refresh was applied in the browser.
Specs
OS: Ubuntu 18.04.3 LTS running in WSL on Windows 10 Pro
Node: 12.12.0
NPM: 6.11.3
Gatsby CLI: 2.8.8
Gatsby: 2.17.6
Browsers: Chrome 77.0.3865.120, IE 11.1006.17134.0, Firefox 70.0
I've tried multiple browsers with the same result so I ran devtools in firefox and examined the console output when I make a change and I see this error:
The connection to http://localhost:8000/__webpack_hmr was interrupted while the page was loading. client.js:88
[HMR] Update check failed: hotDownloadManifest/</request.onreadystatechange#http://localhost:8000/commons.js:42:16
process-update.js:147
Error: Manifest request to /d528b21bff3fd2caa92d.hot-update.json timed out. bootstrap:41
Firefox can’t establish a connection to the server at http://localhost:8000/__webpack_hmr. client.js:88
I've also looked around on github and here and haven't found a solution to my problem. Any ideas on a workaround, solution, or insight into why this might not be working for me would be greatly appreciated!
I was having same problems. Gatsby Develop hot reload was not working whenever I made changes to files, plus, Gatsby Develop was terribly slow to compile code and get the dev server up and running. I found out that if I create my Gatsby project in Linux directory structure instead of Windows, everything works out good and is blazing fast. So my solution was following.
Create your project in /home/<your_username> directory in WSL. Simply go to /home/<your_username> and make a folder there with mkdir; go to that folder and then run Gatsby create my_project command in that folder.
That way your project will reside in Linux directory structure, making everything run smoothly.
I faced the similar scenario today. Below steps made it work however warning message is persistent in the console.
Delete package.lock.json and node_modules folder
Delete the content present inside C:\Users\\AppData\Roaming\npm and npm-cache
Do a npm i.
Im running gatsby develop on windows. After trying many things, including wsl, npm clenaup etc, I realized that my antivirus sophos was blocking the webpack hot reload socket __webpack_hmr.
All I had to do is to disable the antivirus for a while. ( You are free to uninstall it or maybe change to another one ).
hope it works for you ;)

main.js 404 error for MIT react-starter-kit

I'm using Kriasoft's react starter kit, and I built a small app. Everything runs perfectly locally w/ Browserify, however when I try running the production server at /build/server.js, the main.js file gives a 404 error in the Chrome console and some of my code breaks.
I've done some research and looked around -- I think it has something to do with Browserify, but I haven't been able to figure it out.
Can someone explain me what I'm doing wrong and what the root of the issue is? :)
This issue is addressed here. The build needs to be run with the "release" option when testing without Browsersync/HMR/React Transform.
npm run build -- --release && node build/server.js
Otherwise, the bundle will not build properly.

Categories

Resources