howler.default is undefined

[foxilated]

Uncaught (in promise) TypeError:

My code:

<script setup lang="ts">
import { useSound } from "@vueuse/sound";

const { play } = useSound("pop.mp3");
</script>

<template>
<button
  @click="play()"
>
</template>

my nuxt.config.ts:

export default defineNuxtConfig({
  css: ["@/assets/css/main.css"],
  devtools: {
    enabled: true,
  },
  components: [{ path: "@/components/home", prefix: "Home" }, "~/components"],

  modules: [
    "@vueuse/nuxt",
    "@vueuse/motion/nuxt",
    "@vueuse/sound/nuxt",]

  sound: {
    scan: "~/assets/sounds",
  },

  runtimeConfig: {
    public: {
      baseURL: process.env.BASE_URL,
    },
  },

  app: {
    head: {
      link: [{ rel: "icon", type: "image/png", href: "/logo.png" }],
    },
  },
});

My package.json:

{
  "name": "mob-website",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
  "dependencies": {
    "@formkit/icons": "^0.19.3",
    "@formkit/nuxt": "^0.19.3",
    "@formkit/themes": "^0.19.3",
    "@nuxt/image": "^1.0.0-rc.1",
    "@nuxtjs/eslint-module": "^4.1.0",
    "@pinia/nuxt": "^0.4.11",
    "@vee-validate/nuxt": "^4.11.2",
    "@vee-validate/yup": "^4.11.2",
    "@vueuse/motion": "^2.0.0",
    "@vueuse/sound": "^2.0.1",
    "eslint-plugin-tailwindcss": "^3.13.0",
    "flipbook-vue": "^1.0.0-beta.4",
    "nuxt-gtag": "^0.6.1",
    "nuxt-icon": "^0.5.0",
    "nuxt-storage": "^1.2.2",
    "nuxt-swiper": "^1.2.0",
    "nuxt-viewport": "^2.0.6",
    "vee-validate": "^4.11.2",
    "vue3-google-map": "^0.17.1",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "@nuxt/devtools": "^0.8.2",
    "@nuxt/eslint-config": "^0.1.1",
    "@nuxtjs/google-fonts": "^3.0.2",
    "@nuxtjs/i18n": "8.0.0-rc.3",
    "@types/node": "^18.17.3",
    "@types/qs": "^6.9.7",
    "@typescript-eslint/eslint-plugin": "^6.4.0",
    "@typescript-eslint/parser": "^6.4.0",
    "@vueuse/core": "^10.3.0",
    "@vueuse/nuxt": "^10.3.0",
    "autoprefixer": "^10.4.15",
    "eslint": "^8.47.0",
    "eslint-plugin-vue": "^9.17.0",
    "nuxt": "^3.6.5",
    "postcss": "^8.4.28",
    "tailwindcss": "^3.3.3"
  },
  "overrides": {
    "vue": "latest"
  }
}

[angelorc]

Similar issue here index.mjs?v=bbe42651:18 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Howl')

I have a similar configuration

[truesteps]

Any updates? Same issue no matter how I set it up :D

[dosstx]

same

[adirizky54]

Any updates? Got same issue, i use [email protected]

[jairoblatt]

Same, i'm using nuxt@^3.9.3

[Dodobibi]

Add 'howler' to your devDependencies and in vite.optimizeDeps.include seems to resolve this issue

export default defineNuxtConfig({
  // nuxt config......
  vite: {
    optimizeDeps: {
      include: ['howler']
    }
  }
}

[lamlamla]

Same here, i use nuxt 3 and just got Cannot read properties of undefined (reading 'Howl'). Any workaround?

[byronogis]

Add 'howler' to your devDependencies and in vite.optimizeDeps.include seems to resolve this issue

export default defineNuxtConfig({
  // nuxt config......
  vite: {
    optimizeDeps: {
      include: ['howler']
    }
  }
}

worked for me, [email protected]