Rails/ReactJs View not updating on Browser Refresh - javascript

Just recently, I have added Reactjs to my Rails application. However, whenever I reload the same .jsx file, but with different content (ie <h1>Hello<h1/> to <h1> Hello again<h1/>), the browser does not respond and update the view. I have tried restarting the server and reloading the page. I have also created a separate rails application, and I was able to recreate Furthermore,I have also pulled my partner's repositories to check if there were any file differences. There were none.
However, when I pull his repo, my browser updates the content, but it doesn't update it anymore afterward when I edit a .jsx file. It should also be noted that when I edit the content on a .jsx file, the view updates for him, but it doesn't update for me when reloading the page. Our files are the same, but only I have the problem. I have also toggled safe mode, but it didn't make a difference.
I am using Webpacker with Yarn on Jetbrains' RubyMine with Windows 10. Here is a picture of what the problem is:
The code vs the output

After a great amount of trial and error, the problem was with the IDE and where it was retrieving its settings and files from. I had a backup HDD that held old information on it such as my last projects contents. This was wiped.
I also managed to find old IDE settings in my "../users/%your_name$/.Rubymine2018.1". All old RubyMine settings were removed. I also reinstalled my IDE to give it yet another clean start. As far as I can tell, this has worked.
A big thanks to everyone who helped me in the comments!

I have been facing the same issue, and as I have tried to follow the guide provided previously I couldn't know where to start from.
And what I had to do is to run npm run build everytime I update my jsx in my component.

Related

Busting the cache in webpack still requires a soft reload

I recently configured Webpack (version 4) to split the bundle in three chunks (bundle, runtime and vendor) and also to append a hash to the beginning of each of their filenames so that the browser can sense the changes in them. I'm also updating the HTML references with the HtmlWebpackPlugin.
This seems to be working, but not fully, let me explain. Before I did this, a hard reload was needed after each deployment in order to see the new changes, this is no longer needed.
Now the problem is, when you load the web app after a deployment for the first time, it still shows you the old version, it's only when you soft reload the webpage that it shows the new changes.
What I am wondering is, is there any way that I can get rid of this behavior so that whenever a deployment is done and you load the web app the changes instantly show up without the need of refreshing once?
Thanks in advance!
You could append a random querystring to the import of your bundles, like src="bundle.js?nocache=12345" that's generated everytime.
This prevents the browser from caching your code, and doesn't require you to change the bundle names (which is convenient).
If you don't want it to be loaded fresh each time even when you're not releasing anything, you should keep something like a version number somewhere and append that in a querystring to the bundle import instead.
Though, your current implementation basically does the same. It should be a fresh non-cached bundle when you open the web app.. I don't think there is a way to make the browser detect changes in javascript and refresh the imported scripts, unless you are working with something like webpack-dev-server (hot reload) that does that for you, but that's development convenience only.

Webpack chunks are not reloaded on deploy

I've been having this issue for awhile now, first describe here. After upgrading to Webpack 4, it seemed like the issue resolved itself, but it doesn't seem to be the case.
The issue here, is that after deploy, when the chunks get updated, the server is not aware of it? It's quite hard to reproduce this issue and I never were able to do it on demand. But sometimes, if I have the page hanging, the browser will try to grab, what I assume, cached versions of webpack chunks for css and js. But as those are outdated now, I end up with this and a empty website:
Reloading the page, sometimes having to do a force reload, is the only way to fix this, as browser redownload the correct chunks. I'd love to get some pointers to resolve this, as I've never managed to find anything written on this and how to fix this. I am planning to either drop chunks all together or provide an inline JS that will ask to reload the page if it detects any of these 404s... which is not ideal way to do this.
You can find my webpack configuration in the link above. I am deploying this to Heroku, my app is Rails 5.1, with Vue.js 2

What am I doing wrong with Angular js manual bootstrap process?

I am using Angular 1.7.2 in a project i'm working on. (I prefer Angular 1.x)
I am doing the bootstrap process manually (because i'm adding scripts programmatically).
But, I am having 2 issues with the manual bootstrap process.
I have to use a setTimeout, else the bootstrap never works. And my problem with this is, the more files I add to my project, the longer i have to make the timeout.
Sometimes when I load my web page or refresh the site, not all my components are loaded. If i monitor the network traffic, i can sometimes see that the html files are not retrieved at all. And there are no errors in the console or anything.
It seems to me there must be something happening in the angular.boostrap process that is failing or getting stuck, but i can't figure it out.
For my first issue, why is the setTimeout required, is there a way to not need this?
Second, why does my site not load sometimes?
Could it be related to the OS locking the files temporarily because of all the source control, anti-virus, other services running on my computer? If so, how can i tell?
I put together a test project with relevant code here on github
I previously thought this was related to the routing, but it's not (see here), But it seems not related to angular-routing after all.
Any information would be much appreciated, this is driving me mad.
Update 1:
I have the code running here on github pages.
Best chance to replicate issue is to use google chrome, enter url, open dev tools (f12), then actually load url. Sometimes, the page doesn't load completely.
I have updated the test website to better reflect my project where I add scripts dynamically.
I think i found the solution thanks to a comment by igor
I moved my app.route.js file to be loaded before any of my angular component and directives and from what I can tell this solves my problem.
I will update the linked sample project too

JS Injection in Wordpress

I just upgraded to WP 4.3.1 on one of my websites. After upgrade (which seemed to go with no problems at all), I noticed that the layout of my pages has changed. There is a bar across the top of my page (not the admin bar) that wasn't there before. When I inspect the element there, I see a whole bunch of new code that is not being created by any of my plugins. And I cannot find the source of this injection in any of the provided php files. I have no idea where it is coming from, but I suspect that something in the WP 4.3.1 package has been compromised, or maybe there is a callout to a site somewhere that injects this code.
Anyway, this is a BIG problem and I don't know how to fix it.
I've copied the injected injected code below. It appears in all the pages on my site, right below the tag. Interestingly it can only be seen by "inspecting element" in the browser; page source does not reveal it (I've added some line breaks to make it more readable, but this is exactly what shows up in my page.
This same problem occurs on every site where I upgrade to WP 4.3.1. I hope someone can fix this problem IMMEDIATELY!!
Clearing cache, history & cookies doesn't resolve the problem. I can't tell where this injected code is coming from. Also, Google doesn't seem to be much help in telling me anything useful about http://kfc.i.illuminationes.com/snitch, which is one of the links that is being created.
Our site was infected, this is what we did to get rid of it
Thanks to this discussion which led me to a more detailed one
Connect via ssh to the server
Check the directory structure and find out recently created / modified directories
Check recently modified files for <script>. I found many files having JavaScript inserted which would connect to external sites.
As these calls were made on each page, I checked header.php in wp-content/themes/your-theme directory. (check the ones you are not using as well as that might be infected but may not show in radar)
You might also want to check footer.php for infection.
Re check file permissions on server as per WordPress Hardening guidelines on Codex
Delete unrequired ftp accounts in FileZilla (or its equivalent)
If you use any caching, delete entire cache.
You can verify if this worked using devtools network tab.

Resources - Javascript file strange behavior

I'm having a problem regarding with my javascript files in my spring web project.
I wonder what's wrong with this, but my external javascript file doesn't reflect the changes I made to it when I run the program.
What I do is I need to rename the file so that the changes would take effect.
When I close eclipse and open it again, then the changes would not be reflect again. Then I need to rename the javascript file again.
It seemed that it retains the previous code it has everytime I close and open my eclipse.
I also tried to delete the javascrip file, and boom!!! it still run the previous code even though I already deleted it!!!
I'm lost guys, have you experienced this problem?
Any help would be appreciated!
Thanks in advance!
The problem is not related to the Spring Framework and the problem is not even in you code. The problem is in your IDE.
Try to reinstall it.

Categories