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

howler.default is undefined #45

Open
foxilated opened this issue Sep 1, 2023 · 8 comments
Open

howler.default is undefined #45

foxilated opened this issue Sep 1, 2023 · 8 comments

Comments

@foxilated
Copy link

foxilated commented Sep 1, 2023

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
Copy link

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
Copy link

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

@dosstx
Copy link

dosstx commented Dec 18, 2023

same

@adirizky54
Copy link

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

@jairoblatt
Copy link

Same, i'm using nuxt@^3.9.3

@Dodobibi
Copy link

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
Copy link

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

@byronogis
Copy link

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]

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

No branches or pull requests

9 participants