"<router-view> can no longer be used directly inside <transition>" warning showing when router-view is not used directly inside transition.

[codigovision]

Version

4.0.12

Reproduction link

jsfiddle.net/8gxaptq2/

Steps to reproduce

Run and view warning in the console.

What is expected?

No warning.

What is actually happening?

The warning is displayed in the console.

---

I believe this is a bug because the warning specifically states that router-view can no longer be used directly inside, yet it is shown when not used directly inside, and also the router-view does work inside of a transition that is not its direct parent.

[posva]

The warning shouldn't appear in this scenario indeed. Contribution welcome!

BTW: It's worth noting, it's only a warning and it doesn't affect runtime, so you are totally fine

[codigovision]

Thanks for confirming that it's not an intended warning in this case.

After digging into the warnDeprecatedUsage function where the warning is thrown, I believe the issue is that it only looks at the parent, which is the parent component, but not necessarily the parent dom element, so the parent subtree could contain other elements.

What if the condition, after checking that the parent type is "KeepAlive" or contains "Transition", also checks that the parent subtree type is "RouterView"? That way it would ensure that the direct child of the "transition" or "keep-alive" is in fact the "router-view".

function warnDeprecatedUsage() {
    const instance = getCurrentInstance();
    const parentName = instance.parent && instance.parent.type.name;
    const parentDirectChild = instance.parent && instance.parent.subtree.type.name;

  if (parentName && parentDirectChild &&
        (parentName === 'KeepAlive' || parentName.includes('Transition')) &&
            parentDirectChild === 'RouterView') {
        const comp = parentName === 'KeepAlive' ? 'keep-alive' : 'transition';
        warn(`<router-view> can no longer be used directly inside <transition> or <keep-alive>.\n` +
            `Use slot props instead:\n\n` +
            `<router-view v-slot="{ Component }">\n` +
            `  <${comp}>\n` +
            `    <component :is="Component" />\n` +
            `  </${comp}>\n` +
            `</router-view>`);
    }
}

[posva]

I don't think that would be enough but feel free to give this a try. There are a few existing test cases in warning.spec.ts, if anybody wants to add this, give it a try by adding a new test and making sure old ones still pass. Note this might be a bit difficult to achieve without false positives. In that case, we will mark this as a won't fix as the warning still brings value given a lot of people is migrating to Vue Router 4

[codigovision]

It works in my own testing, but what do you believe it may be missing?

[posva]

cases that combine KeepAlive, Suspense, etc. I tested locally and it didn't pass the tests.

[codigovision]

Ah, ok, thanks for trying it out. Is there anyway to disable/suppress this specific warning like we can with configureCompat?

[titusdecali]

Can we get this fixed, please?
As @codigovision mentioned, it only seems to look at the parent, so when you use it in layout components it fires this error (regardless of it working perfectly as expected)

[LinusBorg]

Here's a little workaround for the time being, using a functional component wrapper around router-view.

https://jsfiddle.net/Linusborg/rkdft7cy/4/