indexedDB is not defined

[alvintheodora]

Environment:
vue3-emoji-picker: 1.1.8,
Framework: Vue 3
OS: macOS 13.3
Browser : [Chrome Version 116.0.5845.179 (Official Build) (arm64)]

Description:
ReferenceError: indexedDB is not defined error message appear when I run unit testing with vitest.

Expected Behavior:
There should be an option to not use the indexedDB so it will not reproduce the error

Additional Context:
Do we have option to disable the usage of indexedDB?

Thank you in advance for your assistance!

[Drillan767]

This issue is blocking my deployments 😞

[plfort]

You can install fake-indexeddb as a dev dependency and load it in vite.config.js:

export default defineConfig({
        test: {
            setupFiles: [
                 //...
                "fake-indexeddb/auto" // required for EmojiPicker
            ],
//...

[alvintheodora]

My workaround in my nuxt 3 app is to load the component with defineAsyncComponent, like:

import "vue3-emoji-picker/css";
...
const EmojiPicker = defineAsyncComponent(() =>
  import("vue3-emoji-picker").then((EmojiPicker) => EmojiPicker)
);

[andre-w2]

It works for me, I did it this way.
I added the following line to the nuxt.config.js file:
build: { transpile: [ 'vue3-emoji-picker' ] },

and so created a folder and a file modules/register-component.ts
register-component.ts:

import { addComponent, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    addComponent({
      name: 'EmojiPicker',
      filePath: 'vue3-emoji-picker',
      mode: "client"
    })
  },
})

[ghost]

I have also encountered this issue and hope the developers can solve it as soon as possible. Thank you. The above measures are not effective. I am using nuxt3

[AndreasFaust]

The problem is Nuxt’s Server-Rendering: IndexedDB exists only in the browser and not on the server.
Wrap the emoji-picker in Nuxt’s ClientOnly-Component and it works.

https://nuxt.com/docs/api/components/client-only

[genu]

Its an unfortunate workaround. Something like this shouldn't be so tightly coupled with IndexedDB

[AndreasFaust]

Of course it’s not an ideal solution. It’s just a pragmatic way to make this otherwise great library work in Nuxt.

[hoiles]

I had the same issue and I fix it with:

Adding the ''vue3-emoji-picker'' to the nuxt.config file

build: { transpile: ['vue3-emoji-picker'], }, runtimeConfig: {

Create a plugin ' vue-emoji-picker.client.ts'

`import EmojiPicker from 'vue3-emoji-picker'
import 'vue3-emoji-picker/css'

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('EmojiPicker', EmojiPicker)
})
`
Add your picker:

<emoji-picker v-if="showEmojiPicker" :native="true" @select="onSelectEmoji" />