Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue 3.3.4. doesn't setup events defined with enum values #8466

Open
tragid opened this issue May 31, 2023 · 6 comments · May be fixed by #8475
Open

Vue 3.3.4. doesn't setup events defined with enum values #8466

tragid opened this issue May 31, 2023 · 6 comments · May be fixed by #8475

Comments

@tragid
Copy link

tragid commented May 31, 2023

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',
}
  1. 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>();
  1. 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

@tragid
Copy link
Author

tragid commented Jun 1, 2023

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>();

@edison1105
Copy link
Member

edison1105 commented Jun 1, 2023

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

@tragid
Copy link
Author

tragid commented Jun 1, 2023

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

@ghost
Copy link

ghost commented Jun 22, 2023

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

@hymair
Copy link

hymair commented Jul 27, 2023

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.

@daniilgri
Copy link

Would be nice to support Enums inside defineEmits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants