Not progressing from Nuxt loading screen - vue.js

We are using Nuxt.
The ssr and target of the nuxt.config.js are set as follows
export default {
ssr: false,
target: 'static',
}
Our site is working almost exactly as expected.
However, when we check our site after checking other tabs in our browser, we are sometimes unable to move on from the loading screen.
What is the cause of this? We have logs in the middleware and on each page and component to investigate, but the logs do not show up on the console and we are unable to determine the cause.
What should we suspect and what should we investigate?
The reproduction rate is not 100%. It may have occurred after a day or so.

After all, our phenomenon seems to be the same problem as theirs.
https://github.com/nuxt/nuxt.js/issues/6442
If I may reiterate the condition they describe, it occurs when multiple tabs are used in Chirome. These do not seem to have been fixed, perhaps because they are busy supporting Nuxt 3.
We are displaying multiple tabs for debugging purposes, but in reality we are only displaying one tab, so it's probably not a problem.

Related

Yoast SEO meta description not saving

I generate a Focus Keyphrase and Meta Description in Yoast SEO meta box for my Home Page. But when I exit the editor, if I go back to the Home Page, the Focus Keyphrase and Meta Description have disappeared.
Does anyone know how I can keep them?
Thanks
I spent easily 5 hours trying to track down and fix an issue with Yoast meta fields not saving properly. The only real clue I had was this console error:
Uncaught TypeError: Cannot read properties of undefined (reading 'registerPlugin') at window.wpseoScriptData.window.wpseoScriptData.featuredImage.i.registerPlugin (post-edit.js)
Based on this Yoast Github issue, it appears that the needed YoastSEO javascript app is not there when it's being called in /wp-content/plugins/wordpress-seo/js/dist/post-edit.js when the page is loading, and Yoast javascript app is not actually there, so it bonks.
So there may be something somewhere that is dequeuing the needed javascript that builds the YoastSEO object. One thing to check is to search your code base (excluding the Yoast plugin itself) for instances of wpseo, yoast, etc. If you find some code that is dequeuing/removing something, that might be it. If you have a plugin with results, deactivate if you can and check if that fixes anything.
I also noticed that the SEO Analysis drawer never loads and has the loading spinner running indefinitely. The javascript that controls the setting fields seems to work, but when you save it doesn't actually save, it just goes into the void.
All that said... I wasn't able to figure out what was wrong, but I did get it to start working again. Here's what worked for me...
After reading through a lot of different issue threads, I stumbled across some issues around security plugins blocking parts of the install process. I have my Wordfence settings dialed up pretty strict, so I deactivated it per recommendations while we go through re-installing Yoast.
After making sure that your security plugin(s) are deactivated, then deactivate and uninstall Yoast. Apparently you don't need to remove the plugin data, just uninstall. (This is also a good time to update other plugins if you haven't already).
Once you reinstall Yoast, you should have a button available to reindex the "indexables" that you need to click. It might be on the Dashboard, I don't remember. If you don't see it, you might go to Search Appearance > General > Rewrite tables > Force rewrite titles and Enable that, then save changes. I'm not 100% positive, but it seemed like after I did that, there was a panel in the General settings Dashboard or something, that said something along the lines of "Looks like some settings have changed, you should re-index your indexables now" with a button to start the process.
I also had to turn "Show SEO settings for Posts/Pages?" back on under Search Appearance > Content types. After I reinstalled, those were disabled. So maybe that helped Yoast know to load the javascript properly.
I'm not super familiar with Yoast, as you can probably tell, but after doing all this, it's working.
I believe you can also trigger the reindexing process from the CLI if you want, and that it's recommended if you have a large site with over 10k posts or whatnot.
Hope all this helps!

Maximum recursive updates exceeded, only on iOS in a specific component

I have a Vue3 app which is giving me multiple errors only when I mount a specific component within my generic modal component. On desktop across browsers I get zero errors and everything works as expected. On iOS (using desktop Safari connected locally to capture console logs) it shows the log below, along with a few other "Maximum recursive updates..." from other components (which have nothing to do with the modal or it's inner template).
I've checked every single component that is listed in the error below ("at~") and every other component that is used in that modal template (it's only one template that breaks) and NONE of them are using a mounted hook, so the "Unhandled exception during mounted hook" doesn't make any sense.
I know this is not much to go on, but has anyone else seen this recursive error happen only in certain components and only in iOS before?
In addition to the above, I've double checked all logic for any recursive issues and have found none. And, if there really were some, I would assume they would show up on desktop as well, not only on iOS.
Pretty stumped here, friends.

Ctrl+5F shows me the two different types of display

Attachment
I'm currently working on a website.
Attached is the part of the website that I can watch on my computer monitor.
Changed Display below is the what I want.
However, if I keep hitting 'ctrl+f5', the screen shows me either unchanged display or changed display.
I have no idea why it shows me two different types of screen.
As far as I know, 'ctrl+f5' deletes the cache and updates data but it is not for me.
Ridiculously, If I keep hitting 'f5', I can only have the changed display as I want.
I guess I have a problem on css because I get an error message: DevTools failed to load SourceMap: Could not load content for http://localhost:8090/asset/css/sub.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE.
Does anyone know the keys on this problem?
There's not enough info here for anyone to tell you how to fix your problem with any amount of certainty.
What do you mean by changed display? Just the website looking different? Or a different debug preview (like scaling your website down to a phone's screen size)?
If it looks different, that might just have to do with caching.
The difference between CTRL + F5 and just F5 is that CTRL + F5 doesn't use your browser's cache, instead fetching everything fresh from the server, whereas just F5 uses your browser's cache. Your browser generally keeps track of when it cached things and will automatically fetch data anew if the time of caching was too long ago.
The former generally takes longer to load, naturally, which might be why the website looks different, at least until everything has been loaded.
Other than that, CSS gets a little weird sometimes, applying styles in a weird order. This generally has to do with the order in which, and where in your HTML document you actually load your stylesheets. Generally, loading all of them in the head of the document is a good idea. Complete redefinitions of styles in separate stylesheets can get very weird, even if it should follow normal precedence (Thread on CSS precedence)
Though, again, you'll have to elaborate on your problem further, maybe provide some screenshots, for anyone to be able to definitively help you.

VS Code stops letting me collapse code and navigate to definition when working in Vue.js

I've been having a really weird issue with VS Code. After using it for an undetermined amount of time, I'm unable to collapse code and navigate to definition. The arrow indicators in the left margin for collapsing code disappear and I can't seem to get them to come back. Closing the file doesn't work, and restarting the app doesn't work either. The only thing that works is a complete system restart. The same thing happens with ctrl+clicking a class name expecting it to navigate to definition but it doesn't.
I thought at first it was probably an extension I installed so I uninstalled all my extensions, restarted the app and now the collapse icons don't show up at all. I'm working in VueJS and think it might have something to do with *.vue extensions but I'm not sure.
You need Vetur for pretty much any functionality in *.vue files, and Vue Peek for Ctrl+Clicking paths

Trusted Web Activity shows address bar after switching between different Apps

I'm having a really weird behaviour with my TWA. When I am launching the app, the address bar is not shown and the app is running in standalone mode as expected.
But when I am switching between Apps (putting the app in the background), and coming back to it, something weird happens: the page reloads, and the address bar is shown at the top of my app. I am not really sure to understand what's happening here. Even more strange, it looks like this weird behaviour is not happening all the time.
Does anybody here encountered similar issues ?
I checked my assetlinks file, it's accessible and valid, app bundle and so on, everything looks fine. The fact that the app is not showing the bar at launch also seems to confirm that the problem is not coming from the certificate or a configuration issue. What else could cause the problem ?
First launch (looking perfect):
Back from background:
We have seen this occasionally as well.
Which version of Chrome Custom Tabs are you using? Seems like most articles/tutorials use e446d08 which is quite outdated. Suggest trying a newer/latest version of it:
https://github.com/GoogleChrome/custom-tabs-client/commits/master
Their last commit comment suggests that they are still testing things:
There's definitely more we can test, but this is a start.
https://chromium.googlesource.com/custom-tabs-client/+/da65829d7d4b80c00809c6c4aa7f61f88fc7ca26