new Class() will not construct if the code is in template (eg. @click="() => { new MyClass() })

[reitowo]

Describe the bug

I'm writing this code:

<Button label="增加事件" severity="success" @click="() => {
  editingEvent = new GameEvent();
  validateCron(editingEvent.startCron);
  addingEvent = true;
  eventDialogVisible = true;
}" />

After vite build, this code is transformed into

label: "增加事件",
severity: "success",
onClick: x[24] || (x[24] = ()=>{
    k.value = new F(xd)(),
    We(k.value.startCron),
    P.value = !0,
    h.value = !0
}

Where F(xd) is:

function F(e) {
    return kt(e) ? e.value : e
}

function kt(e) {
    return !!(e && e.__v_isRef === !0)
}

Which seems telling if it is a "ref", and the code throw:

TypeError: Class constructor xd cannot be invoked without 'new'
    at X.onClick.x.<computed>.x.<computed> (index-fc7beea5.js:1143:29535)
    at mr (index-fc7beea5.js:1:13064)
    at en (index-fc7beea5.js:1:13143)
    at HTMLButtonElement.n (index-fc7beea5.js:1:57387)

I assume that it is because new F(xd)() is not equal to new xd()?

This seems the same problem:
https://stackoverflow.com/questions/74069642/class-constructor-cannot-be-invoked-without-new-instantiating-own-class-i

Reproduction

The GameEvent has a custom constructor, and it is declared in electron/core/game.ts

export class GameEvent {
    id: string;

    enabled: boolean;
    random: boolean;

    name: string = null;
    content: string = null; 
    startCron: string = "* */1 * * *"; 
    duration: number = null; 

    createsAt: Date = null;

    constructor(init?: Partial<GameEvent>) {
        Object.assign(this, init);
        this.id ??= uuidv4()
    }
}

The Vue page is declared in src/components/Editor.vue

import Button from "primevue/button";
import { GameChoice, GameEvent, GameUserBill } from "../../electron/core/game";

<template>
  <Button label="增加事件" severity="success" @click="() => {
    editingEvent = new GameEvent();
    validateCron(editingEvent.startCron);
    addingEvent = true;
    eventDialogVisible = true;
  }" />
</template>

Steps to reproduce

I use Vue in electron, but this problem should apply to all because it is generated by vite-build

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
    Memory: 93.70 GB / 127.71 GB
  Binaries:
    Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1992.0), Chromium (115.0.1901.188)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-vue: ^4.2.1 => 4.2.3
    vite: ^4.3.5 => 4.3.9

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

This is a bug in Vue: vuejs/core#6483

[reitowo]

Thanks. Hard to find it out.