Please provide a minimal reproducible demo. This will help us troubleshoot and identify the root cause of the issue. Error logs alone make it difficult for us to pinpoint the exact problem.

Generally speaking, the exclamation marks are the main problem.

I will try to do so as soon as possible, but the minimal reproduction of this one is tough because of app routing and a myriad of things that need to be ported in it, that could be in a way or another leading to this.

And, by the way, #7086 this is still broken with latest Vue. The problem is exactly the same, just elsewhere. There's a reproduction repo for 2 years posted now, and noone seems to care enough. I need to know whether the half-working-day of porting our app's internal structure will go to waste or not.

@wucdbm

I think #7086 hasn't been resolved in two years likely because the reproduction demo is too complex. it contains many third-party libraries. This wastes a lot of time for contributors trying to help you find the bug. This is unreasonable because you are most familiar with your codebase, and if you can't extract a minimal reproduction demo, it's even more impossible for others to do so.

please see https://antfu.me/posts/why-reproductions-are-required

I can understand that reproductions are required, I am working in the same field in the end and face the same issues.

For #7086 the reproduction demo there is quite simple. Third party libraries are qutie irrelevant. I will then get rid of GraphQL and make a simple setTimeout() data fetcher. The thing of substance there is that the server does NOT see the hash parameter passed and consequently the server renders one thing, while the client expects to render something else due to the fact that it does see the query param and the UI must be different.

For this one, it'll take me a considerable amount of time to copy/pasta the project structure in terms nested transition/suspense/router-view/transition/suspense/keep-alive/suspense etc, to make an accurate representation of the conditions where it does break. And then, it breaks every 5th run of a test case. The test hovers over an component that is async with lazy hydration very quickly. Every now and then, the above happens.

Getting same error but only in Safari. It’s really hard to reproduce it :/

@wucdbm did you managed to fix this locally?

@niksy Yes and No. More like no.

        plugins: [
            replace({
                'const getContainerType = (': `
                    const getContainerType = (e) => {
                        if (null === e) {return undefined}
                        if (e.nodeType !== 1) {return undefined}
                        if (isSVGContainer(e)) return 'svg'
                        if (isMathMLContainer(e)) return 'mathml'
                        return undefined
                    }\n
                    \n
                    const getContainerType123 = (`,
            }),

This one fixes the error in that it does not happen. But over my debugging sessions I managed to understand that the reason this happens is the first place is an error elsewhere, which somehow gets masked and this one gets to surface. Once you patch this with the above code, that underlying error will still happen, and will also render your app unusable, not responding to anything anyhow, just like if you didn't patch it.

We managed to figure out that the issue is with KeepAlive, which we have since ditched. It happens due to a weird combination of nested routes, transitions, keep alive, and two layers of suspense. To be fair, I'd ditch suspense as well as other things and do good old v-if loaders and simulate the suspense on the initial load via a plugin in the app that updates a ref.

The biggest problem here is that the vue codebase is littered with bullshit code with non-null assertions or whatever the F that evil thing with the exclamation mark is called. So now due to the lack of proper errors in place where this is "not supposed to happen, so we put an Fing ! in place", good luck have fun catching the root cause of this.

And it seems like the whole JS/TS community loves writing teenage code like that that smells from the get-go, so hmpf. What do I know 🤷 .

In light of the above (and also, thank you for reminding me about this one), I am closing this as it no longer makes sense.

I still don’t know how to consistently reproduce the issue in Safari, currently I’ve managed to work around it and hope to return to it in the future or wait for some totally unrelated change in the codebase (or Safari update) fixes the issue 🤷‍♂️