Subscribe on changes!

DEV_ROOT_FRAGMENT patchFlag is set despite compilerOptions.comments = true

avatar
Sep 26th 2022

Vue version

3.2.39

Link to minimal reproduction

https://codepen.io/21stCenturyJonas/pen/oNdodBR

Steps to reproduce

Notice how the dev and prod versions behave differently and how the element root warning is not logged to the console, despite <a-component> having multiple root nodes in dev and in prod.

What is expected?

The DEV_ROOT_FRAGMENT flag should not be set since the comments won't be stripped and the component will continue to render a fragment in production. Thus, the transition should break in development like it does in production and the respective element root warning for <Transition> children should be logged:

    if (__DEV__ && !isElementRoot(root)) {
      warn(
        `Component inside <Transition> renders non-element root node ` +
          `that cannot be animated.`
      )
    }

What is actually happening?

The compiler assumes that the comment will be stripped in production and sets the DEV_ROOT_FRAGMENT flag, hiding any warnings and causing different runtime behavior.

System Info

No response

Any additional comments?

No response