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

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

Open
Q16solver opened this issue Dec 3, 2022 · 8 comments

Comments

@Q16solver
Copy link

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?

image

@ThimoDEV
Copy link

ThimoDEV commented Dec 4, 2022

@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
example

When building the module the dist folder already gives these errors

@ThimoDEV
Copy link

ThimoDEV commented Feb 9, 2023

Seems like this issue is now resolved with the latest update

@Q16solver
Copy link
Author

Q16solver commented Feb 9, 2023

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

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

ThimoDEV commented Feb 9, 2023

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

It hasn't been fixed yet.

@RihanArfan
Copy link

RihanArfan commented Apr 5, 2024

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

Having the same issue here.
image

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

5 participants