Vue version

3.3.4

Link to minimal reproduction

https://github.com/tragid/vue-default-export-error/tree/vue-3.3.4-emit-errors-2

Steps to reproduce

1. Create enum:

export enum InputType {
  INPUT = 'input-event',
  CHANGE = 'change-event',
  BLUR = 'blur-event',
  FOCUS = 'focus-event',
}

2. Create component with defineEmits:

interface ComponentEmits {
  (e: 'click-event', value: string): void;
  (e: InputType.BLUR, value: string): void;
  (e: InputType.FOCUS, value: string): void;
  (e: InputType.INPUT, value: string): void;
  (e: InputType.CHANGE, value: string): void;
}

const emit = defineEmits<ComponentEmits>();

3. Facing runtime errors on DEV and not setting up emits on PROD.

runtime-core.esm-bundler.js:41 [Vue warn]: Component emitted event "focus-event" but it is neither declared in the emits option nor as an "onFocus-event" prop.

runtime-core.esm-bundler.js:41 [Vue warn]: Component emitted event "input-event" but it is neither declared in the emits option nor as an "onInput-event" prop.

runtime-core.esm-bundler.js:41 [Vue warn]: Component emitted event "change-event" but it is neither declared in the emits option nor as an "onChange-event" prop.

runtime-core.esm-bundler.js:41 [Vue warn]: Component emitted event "blur-event" but it is neither declared in the emits option nor as an "onBlur-event" prop.

What is expected?

Can setup events with imported enum

What is actually happening?

Facing runtime errors on DEV and not setting up emits on PROD.

runtime-core.esm-bundler.js:41 [Vue warn]: Component emitted event "focus-event" but it is neither declared in the emits option nor as an "onFocus-event" prop.

runtime-core.esm-bundler.js:41 [Vue warn]: Component emitted event "input-event" but it is neither declared in the emits option nor as an "onInput-event" prop.

runtime-core.esm-bundler.js:41 [Vue warn]: Component emitted event "change-event" but it is neither declared in the emits option nor as an "onChange-event" prop.

runtime-core.esm-bundler.js:41 [Vue warn]: Component emitted event "blur-event" but it is neither declared in the emits option nor as an "onBlur-event" prop.

System Info

No response

Any additional comments?

No response

Why not? This is valid type. Maybe at least it is possible throw an exception on build time that enums are not supported?

Also noticed, that this bug is reproduced only when enum value, and strings are mixed within event names. When only enum values are represented in Emit type - everything is working properly Working example with:

interface ComponentEmits {
  (e: InputType.BLUR, value: string): void;
  (e: InputType.FOCUS, value: string): void;
  (e: InputType.INPUT, value: string): void;
  (e: InputType.CHANGE, value: string): void;
}

const emit = defineEmits<ComponentEmits>();

Why not? This is valid type. Maybe at least it is possible throw an exception on build time that enums are not supported?

Also noticed, that this bug is reproduced only when enum value, and strings are mixed within event names. When only enum values are represented in Emit type - everything is working properly Working example with:

interface ComponentEmits {
  (e: InputType.BLUR, value: string): void;
  (e: InputType.FOCUS, value: string): void;
  (e: InputType.INPUT, value: string): void;
  (e: InputType.CHANGE, value: string): void;
}

const emit = defineEmits<ComponentEmits>();

Are you sure? It's not working. No emits are generated. see

Why not? This is valid type. Maybe at least it is possible throw an exception on build time that enums are not supported? Also noticed, that this bug is reproduced only when enum value, and strings are mixed within event names. When only enum values are represented in Emit type - everything is working properly Working example with:

interface ComponentEmits {
  (e: InputType.BLUR, value: string): void;
  (e: InputType.FOCUS, value: string): void;
  (e: InputType.INPUT, value: string): void;
  (e: InputType.CHANGE, value: string): void;
}

const emit = defineEmits<ComponentEmits>();

Are you sure? It's not working. No emits are generated. see

Yes, sorry, you are right, there are no emits generated, just noticed that there are no runtime warning with this setup

Yes, all events declared with enum are marked as "Not declared" in Vue's browser extension. Additionally, if you have a parent component that emits same event as it's child component, event callback on parent will be executed twice due to inheritAttrs: true default behavior

I can confirm this seems to be a bug. We are using enums to define all our events and they are not picked up by Vue. Results in events being executed twice.

Would be nice to support Enums inside defineEmits