defineEmits macro only works when assigned to variable

[AQS-DTheuke]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqNkUFLAzEQhf/KkFMLdRcpXtZtUUuvCu3BgxFZN7M1ujsJSbYIpf/dSbaVoii9JZn3vnmZ2Ylba7Ntj6IQpa+dtgE8ht5CW9FmJkXwUswlSWp6qoM2BA2NsNNhDDtJAI7FjiC+XEvaR2Wew9I54yTVhnyA4CryjXEdKphFu8JGEy7Z4ssE2VatVos37ogFPL0a02JFz4ybj8Zjxibmo3EfPp4GauzIuB8s1v1Jy/PIY9wR8StY+lfqV+bDMNLXy4CdbauAfANYYYMOqcb0yeI0AWgPZMLhScEFrBEhNuMMEXoCEhOeLZcavcnevSFeQJqFFPgZkBTPveDLDe8mPwq/D5kyXXJJMRlMtemsbtE92LikZE64WAuV22AYeMv1PfMPtljsjOo53H/FFXL+PnIH2V1PiltJEWX7QwDOuTgrwzS7Sj5eL8/gZYvOs5q/z4Xscir2X8+I4YI=

Steps to reproduce

<script setup lang="ts>
// Error
const transformed = fn(defineEmits<{
  validChange: [boolean]
}>());

// Works
const emit = defineEmits<{
  validChange: [boolean]
}>();
const transformed = fn(emit);
</script>

What is expected?

Using the result of defineEmits() as a function argument without assigning it to a variable first.

In my case I transform the return emit instance to individual event functions.

What is actually happening?

ReferenceError: defineEmits is not defined
    setup about:srcdoc line 63 > injectedScript:20
    callWithErrorHandling https://cdn.jsdelivr.net/npm/@vue/runtime-dom@3.5.13/dist/runtime-dom.esm-browser.js:2334
    setupStatefulComponent https://cdn.jsdelivr.net/npm/@vue/runtime-dom@3.5.13/dist/runtime-dom.esm-browser.js:9982
    setupComponent https://cdn.jsdelivr.net/npm/@vue/runtime-dom@3.5.13/dist/runtime-dom.esm-browser.js:9943
    mountComponent https://cdn.jsdelivr.net/npm/@vue/runtime-dom@3.5.13/dist/runtime-dom.esm-browser.js:7293
    processComponent https://cdn.jsdelivr.net/npm/@vue/runtime-dom@3.5.13/dist/runtime-dom.esm-browser.js:7259
    patch https://cdn.jsdelivr.net/npm/@vue/runtime-dom@3.5.13/dist/runtime-dom.esm-browser.js:6788
    render https://cdn.jsdelivr.net/npm/@vue/runtime-dom@3.5.13/dist/runtime-dom.esm-browser.js:8056
    mount https://cdn.jsdelivr.net/npm/@vue/runtime-dom@3.5.13/dist/runtime-dom.esm-browser.js:6056
    mount https://cdn.jsdelivr.net/npm/@vue/runtime-dom@3.5.13/dist/runtime-dom.esm-browser.js:12239
    _mount about:srcdoc line 63 > injectedScript:18
    <anonymous> about:srcdoc line 63 > injectedScript:23

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 21.30 GB / 39.85 GB
  Binaries:
    Node: 22.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.3.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.11.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: 129.0.6668.70
    Edge: Chromium (127.0.2651.105)
    Internet Explorer: 11.0.19041.4355

Any additional comments?

I ran into this bug when I tried to create a wrapper for defineEmits that coverts the emit function to individual functions.

const emit = defineEmits<{
  validChange: [valid: boolean];
}>();
const { validChange } = useEmitters(emit); // This sadly has to be on separate line

const valid = computed(() => ...);
watch(valid, (value) => validChange(value));

[jvxiao]

The macro function is not a real function. It will be converted into other codes during the compilation of the Vue file. You are not supposed to pass it as a function object for parameter passing

[edison1105]

defineEmits macro is not a runtime function and cannot be used as a parameter.

[AQS-DTheuke]

@edison1105 I don't want to use defineEmits itself as parameter, but it's "return" value.

This code:

const emit = defineEmits<{
  validChange: [boolean]
}>();
const transformed = fn(emit);

gets basically translated to:

const emit = __emit;
const transformed = fn(emit);

Since the effective result is just a variable, I would like to use it, without assigning it to a variable of my own.

So this is my expected output after transformation for my original code example:

const transformed = fn(__emit);