serebrov / emoji-mart-vue

One component to pick them all (performance improvements) 👊🏼
https://serebrov.github.io/emoji-mart-vue/
BSD 3-Clause "New" or "Revised" License
275 stars 48 forks source link

Uncaught TypeError: Cannot read properties of undefined (reading 'allCategories') #250

Open leonwisdom opened 2 years ago

leonwisdom commented 2 years ago

I am using Vue 3 with the Composition API and following the documentation but i am running into an error. Screenshot 2022-11-18 at 17 10 50 Any help would be greatly appreciated, thank you

serebrov commented 2 years ago

@leonwisdom Could you provide an example of the code that reproduces the error?

leonwisdom commented 1 year ago

@serebrov My apologies for the late reply, i have recently got back from holiday.

Here is the code, the css file is imported globally:

<template>
  <Picker v-if="emojiPickerSelected" :data="emojiIndex"
      title="Pick your emoji…" emoji="point_up" @select="convertEmoji"
  />
</template>

<script>
import { ref } from "vue";
import { Picker, EmojiIndex } from "emoji-mart-vue-fast/src";
import data from "emoji-mart-vue-fast/data/all.json";

export default {
  name: "EmojiPicker",
  components: {
    Picker
  },
  emits: ["updateEmoji"],
  setup(props, context) {
    const emojiPickerSelected = ref(false);
    let emojiIndex = new EmojiIndex(data);

    const toggle = () => {
      emojiPickerSelected.value = !emojiPickerSelected.value;
    }

    const convertEmoji = (emoji) => {
      context.emit("updateEmoji", emoji.native);
    }

    return {
      emojiPickerSelected,
      emojiIndex,
      toggle,
      convertEmoji,
    };
  }
};
</script>

Thank you for looking into this, i have followed the instructions on how to use and setup. here are the versions i am using: Vue - 3.2.45 emoji-mart-vue-fast - 12.0.1

serebrov commented 1 year ago

@leonwisdom I am still not able to reproduce the error. I added your example into the Vue 3 demo project, but it works fine - no error:

Screenshot 2022-12-11 at 23 10 42

Live demo is here: https://serebrov.github.io/emoji-mart-vue3-demo/