just started working with reactjs recently, month or two..not a pro but can find my way around.. I am using create ract app (quickie ,that ships with service-worker) and my setup is such that I am deploying react app in the root of my java REST application, so all my service rest calls are in relative format, e.g /rest/myservice/123 etc.. and they work just fine..
but recently I started getting strange errors, and rest calls stopped working..
if I execute RET URL from browser .... nothing happens index loads... when I test with postman REST works just fine it also works in safari or if url is localhost... ...so after hours of frustration i discovered that service worker doing its .... caching . my rest calls are getting intercepted and they never make it to server... and there is nowhere that it mentions about how to overcome it, neither in service worker docs nor in create-react-app docs ...nothing is mentioned about this use case...... this is so pathetic...
I figured it out after numerous trail and errors... but it did not stop there..
I went ahead and deleted the service-worker registration entry from index.js also deleted service-worker file and rebuild the app. well service-worker.js file is still there... it showed up in build folder after I rebuild the project..... what is it with create-react-app did they got paid by google to include service-worker? or what is going on? why can not I remove it? and how do I prevent it from canceling my rest url calls?
when I type : https://xxxx.io/x/referal/refCode/3429878 it just loads application...
what else am I missing?
got the answer over #Redit needed to unregister worker...
details #:
https://www.reddit.com/r/reactjs/comments/8hovvb/removal_of_serviceworker_from_reactjs_app/
Related
I have a react application that I've deployed using nginx, which however only return a blank page. I've been looking for a solution for the last week and I can say that I tried almost anything... but nothing seems to work.
If I open the console I can see that all of the files are delivered with success, however, I got a "Loading failed for the with source ..." on firefox and a "net::ERR_HTTP2_PROTOCOL_ERROR 200" on Chrome. The weird thing is that both files are actually received (200 status) and can be viewed with the development tools. Moreover, if I visit the static resource link I get the full content without problems.
And of course, the issue is only when using the production environment, if I deploy it locally it works perfectly.
I really don't know what to do. I've tried updating the "homepage" directive, playing around with "react-router", changing the various nginx configurations and many other things but nothing.
If anyone could help me out I would really appreciate it!
I was running nginx with docker on Raspberry and, for some unknown reason, the timing on the container was completely messed up. I solved the problem by running the container in privileged mode ('privileged: true' on docker-compose)
So I have just completed my coding boot camp and wanted my final React project on my github to show potential employers. I forked my final project from my school's github. Everything was running smoothly prior to when i forked the project, but i wanted to ensure it would load in case other employers want to check it out. I did a git clone to my personal repo and installed all my files including my env files. I did a yarn start only to get this :
invalid request error message - **{"type":"https://httpstatus.es/401",
"status":401, "title":"Unauthorized",
"detail":"Access token invalid or expired"}**
My api and secret keys are still active and my api file from petfinder-sdk i pulled from github to my project handles the token key generation.
link to my repo - https://github.com/mrshawnhum/capstone-starter-mrshawnhum
I don't know how an access token could expire, going to the pointed url points to a very public page describing the "401" error.
If the dependency comes from your code : rewrite your code so that it doesn't make an http request to the web just for fetching a description of an HTTP status. Or at least, doesn't try to authenticate, if the public information is OK.
If the dependency comes from a module : track the culprit, see if you can easily change its behavior (make an unautenticated call ? a config variable at setup ? dropping this module in favor of another one ? ...).
Not sure on which Stack subforum to ask so feel free to correct me.
Question: Can you host Laravel web app with React frontend on Heroku for free? I read something, somewhere, long ago that it can. If any one knows and if also knows any good tutorials/articles for said Laravel+React web app calamity, that would be great.
Ps: I got github repo for said app, so if that helps ...
Mucho kudos in advance.
Edit1:
I figured it out by reading docs and by watching this tutorial
Now i have different problem. Some font files for the app are accessed from public folder. Heroku than says cors not allowed.
I tried creating middleware(example), i also tried with some packages, not sure if it's Heroku or what, but my attempts of tackling this ended to no avail.
What would be my next vector of approach to this problem?
Edit2:
An url to my web app. My web app is using this space .
This is how it would look like when i seed Heroku:
an image from my local machine.
Edit3:
An image of data send by ajax call:
it sends data of user, but not of articles, like they're not seeded at all...
Edit4:
I am surprised? now. I sincerily don't know what i have done, but cors errors have disappeared ... Still seeding still doesn't work ..
Edit5:
Cors error persist still, but only when user get logged in. Don't why is this happening, it's peculiar ... Anyhow, besides these cors errors, images uploaded to storage folder, even after creating symlink on Heroku, don't persist. It must be like it is explained in this SO post. Still, all main functionalities work, that's something right?
Yes, you can!
You can do it by setting the Laravel preset to react (it comes with Vue by default) with:
$ php artisan preset react
This installs all the required dependencies and also creates a dummy Example in your resources directory.
Now you can build the js by compiling your assets with
npm run prod
This will generate your app.js file with all you need to include React components in your views. You can push it to heroku as usual.
I hope it helps :)
my react app is working locally but after the deploy, I faced the problem when I press any button there is no problem but if I want to refresh I see that problem "404 - File or directory not found."
I found this solution:
https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#browserhistory
Configure Your Server
"Your server must be ready to handle real URLs. When the app first loads at / it will probably work, but as the user navigates around and then hits refresh at /accounts/23 your web server will get a request to /accounts/23. You will need it to handle that URL and include your JavaScript application in the response."
But I don't know how can I do this
I try something but it doesn't work
TRY
npm run build, this will create build folder inside your project root folder
if you want to deploy to remote server just transfer that build
folder.
npx serve -s build on windows, if you are using mac kindly see if it is still npx.
then try to refresh every path of it
hope this works, happy coding.
Since the server cannot find the static content in the directory (i.e. not found the file /tomcat/accounts/23), it will give you 404 unless you have additional route handling.
In React routing I think you can try with HashRouter
See more details here:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md
HashRouter vs BrowserRouter
Using Next.js - building this
I am porting my app to the next.js framework. Currently, I am re-creating the authentication system, otherwise, this iteration of my app is pretty bare-bones. All of a sudden, after adding my protected routes (Higher Order Components) - not sure if that is related - I started getting this error along with super clunky loading (obviously).
The connection to http://localhost:3000/_next/webpack-hmr was interrupted while the page was loading.
Otherwise, everything works as expected.
I have no idea how to even begin to troubleshoot this sort of thing. Does anyone have any ideas of how I might get a bit more info/insight on this problem? Guidance on how to debug? My next move is to start disconnecting things until it goes away I guess. Any help would be appreciated! Thanks
As per the resolution suggested in https://github.com/zeit/next.js/issues/9776, You can unregister the service worker if you are using CRA.
The following code shows the way to remove registered service worker:
import { unregister } from './serviceWorker'
// ...
unregister();
If you have already deployed the registered one, first you to need build this code and deploy again it will deploy with unregistered one. The reason for doing this is because the service worker is registered in your users' browsers if you've used register before. unregister removes it entirely, though. If you build you app again, the main JS bundle will get a new hash, the users will download it, and unregister will remove it for them.
Have had the same issue.
I followed recommendations from various sources I researched and none of them worked. In my case it was an issue in next.config.js file.
More specifically, in my next.config.js file I was including an async generateBuildId function but I left it blank in order to revisit the algorithm at a later stage since the project was in its early stage. After returning a valid buildID from this function the warning disappeared.
This usually happens when you are developing the app
The issue might be service work that is getting register to the browser again and again in development mode as the browsers reload fully,
open the Dev tool and check whether a service worker is a registered or not.
if it registers then unregister it, and update your next.config.js so that the service worker will not register again in the browser
I am using "next-pwa" module, below is the check which i have done
pwa: {
disable: process.env.NODE_ENV === 'development',
register: true,
scope: '/',
dest: 'public',
swSrc: 'service-worker.js',
},
My two cents: this happened to me using Firefox, connecting to localhost;
same error:
The connection to http://localhost:9009/__webpack_hmr
was interrupted while the page was loading.
Being specific I was running start-storybook -p 9009 -s public, but that's actually unrelated to the issue.
I solved this clearing Cached Web Content and Site Data at Firefox preferences: