I have this weird issue and here are the important things to bear in mind:
- it's working perfectly fine locally
- it worked perfectly fine for months (locally and prod)
- I did not touch anything, only pushed completely unrelated changes
- I reverted it back to a previous state, the issue persists
- I rebooted the VPS, restarted PM2 etc
The error(s):
TypeError: Cannot read properties of undefined (reading '__vccOpts')
TypeError: Cannot use 'in' operator to search for 'displayName' in undefined
TypeError: Cannot read properties of undefined (reading 'split')
I get those 3 errors,"split" when I click on the route, the others if I try again. Everything happens in vue-router.esm-bundler.js:3295 apparently
Here's an odd behaviour that I noticed. Let's say that my app has A, B, C and D routes/components. I start the app (I'm therefore on component A), it won't let me access B, the other routes are fine.
I go to C, refresh, I get the bug. But now I can go to B. Once in B, if I refresh, the issue "teleports itself" and now B has an issue again but I can access C.
At ANY point, I can access D, no problem. This route doesn't seem to be problematic. Even if I refresh.
Problematic routes seem to be the ones with params in them... However, I can't access route B (which has params) from the root of my site (which doesn't have any). So, there is an issue even when first starting the site.
I tried to use createHashHistoryMode instead, no luck, same behaviour.
I basically can access the whole site but I need to make the bug appear somewhere (by refreshing a problematic component) and then I can access the previously problematic route...
Any idea?
It will be hard to share the code, that's a massive project with a back end and because it's working locally, I can't really replicate the behaviour on demand and like I said, it used to work for months on end so, I'd just be sharing a working code anyway.
Thanks!