Nuxt 3 failed to resolve import "../../../index" from useSound in runtime

[Q16solver]

Hello! I was trying to use this module for nuxt 3, but it does not seem able to find some of the files, maybe it needs to be restructured so that it can find the file after being installed as a node module?

[ThimoDEV]

@Tahul I have exactly the same error. If I manually add import { useSound } from '@vueuse/sound' this error disappears so it seems a problem with the auto import. Also after I manually import this I get the same error (howlcontructor) as mentioned in #27

When building the module the dist folder already gives these errors

[ThimoDEV]

Seems like this issue is now resolved with the latest update

[Q16solver]

@ThimoDEV The issue is to do with the auto import is that right? I'm still getting the same issue if using auto import so I'll keep this open. It's not possible to use auto imports for this?

[Q16solver]

I also get a "TypeError: Cannot read properties of undefined (reading 'Howl')" with the latest update after using module "@vueuse/sound/nuxt" and manually importing useSound, no sounds playing in development

[ThimoDEV]

I also get a "TypeError: Cannot read properties of undefined (reading 'Howl')" with the latest update after using module "@vueuse/sound/nuxt" and manually importing useSound, no sounds playing in development

It still doesn't play sounds for me neither, However the errors I got earlier are gone in Nuxt now (useSound import error). I made a new issue to see what could be the problem nuxt related (or maybe also for vite)

[foxilated]

It hasn't been fixed yet.

[RihanArfan]

Issue is due compiled files ending up in dist/ rather than . which the import is expecting.

Temporary fix

Ensure you're using the Nuxt module, and you've set optimizeDeps

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    ...
    "@vueuse/nuxt",
    "@vueuse/sound/nuxt",
  ],

  sound: {
    sounds: {
      scan: true,
    },
  },

  vite: {
    optimizeDeps: {
      include: ["howler"],
    },
  },

  ...
});

Put the following inside /patches/@[email protected]

diff --git a/dist/runtime/composables/use-sound.ts b/dist/runtime/composables/use-sound.ts
index e1dfc0944295c0aa7915b9a4fc047c1ec51fb084..c2a3c7a9ad7730bf32c29229bc214c6db10efbfa 100644
--- a/dist/runtime/composables/use-sound.ts
+++ b/dist/runtime/composables/use-sound.ts
@@ -1,5 +1,5 @@
 import type { ComposableOptions } from '../../../types'
-import { useSound as _useSound } from '../../../index'
+import { useSound as _useSound } from '../../index'
 import type { SoundsPaths } from '#build/sounds/types'
 import { useNuxtApp } from '#imports'

Then add the following to the end of your package.json

  "pnpm": {
    "patchedDependencies": {
      "@vueuse/[email protected]": "patches/@[email protected]"
    }
  }

Ensure you're shamefully hoisting. Add the following to /.npmrc

shamefully-hoist=true

And finally run pnpm install.

Here's a snippet of usage.

// public/sounds/background.mp3
const { play, pause, stop } = useSound("/sounds/background.mp3");

It seems like auto import scanning for type generation doesn't work, but I've yet to investigate that.

I don't understand enough about library building yet to submit a PR to fix this atm though. If anyone could point me in the right direction, or use this info to submit a PR that'd be fantastic! :)

[TimofeyBiryukov]

Having the same issue here.