Skip to content

Incorrect rendering with vue 3.5.15 and component props #1312

@cjpearson

Description

@cjpearson

Environment

  • Operating System: Darwin
  • Node Version: v22.15.0
  • Nuxt Version: 3.17.4
  • CLI Version: 3.25.1
  • Nitro Version: 2.11.12
  • Package Manager: yarn@1.22.19
  • Builder: -
  • User Config: compatibilityDate, devtools, modules
  • Runtime Modules: @nuxt/test-utils@3.19.1
  • Build Modules: -

Reproduction

https://github.com/cjpearson/test-utils-issue

Describe the bug

After upgrading to Vue 3.5.15, we have a test where the component is improperly rendered. This is the output of renderSuspended().html()

Before (3.5.14):

<div id="test-wrapper">
  <div>
    <transition-stub appear="false" persisted="false" css="true">
      <dialog open=""><button data-testid="close-button"> Close </button>
        <div>
          <div data-testid="dialog-content"> I am some modal content </div>
        </div>
      </dialog>
    </transition-stub><button data-testid="btn">Open</button>
  </div>
</div>

After (3.5.15):

<div id="test-wrapper">
  <div>
    <!--[object Object]--><button data-testid="btn">Open</button>
  </div>
</div>

While it's caused by a vue upgrade, I think this may be an issue within the test-utils because when running the application itself, everything seems to work ok.

Additional context

There seem to be a couple necessary aspects for this bug to occur:

  • There's a component which has a prop of type Component
  • The default value for this prop is imported through a barrel file

I've tried narrowing down the changes in Vue 3.5.15 and it looks like this change in compiler-sfc is the root cause.

Logs

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions