Fix HowlConstructor.value is not a constructor error

[P-James]

I had to make 2 changes to get the package working in a fresh Vite CLI app (vue 3).

1. Change the HowlConstructor
   2a. Either import onMounted from 'vue' instead of 'vue-demi' (as mentioned here Not working with Vue3 & Vite3 #27 (comment))
   2b. Or add the vite config option to disable pre-bundling of vue-demi in my own app.

I thought 2b was the better option.

Only tested on a Vite CLI app.

[ThimoDEV]

Do you know if this also fixes the same error for nuxt 3 with auto importing and constructor? I think they are related issues.

[P-James]

Sorry I have not used nuxt so can't say for sure.
In my own project I have just copied the code to a local directory as a workaround.
Interestingly, I don't need to use howler.default.Howl any more, I can just use howler.Howl.
It still need to import onMounted from vue.
I tried installing vue-demi locally and it didn't work.

[kissu]

I'm not using vue-demi anywhere in my app.

Simply importing those

import { computed, shallowRef, ref, watch, onMounted, nextTick } from 'vue'
import { useSound } from '@vueuse/sound'

I've tried

export default defineConfig({
  optimizeDeps: {
    exclude: ['@vueuse/sound'],
  },
})

but no success so far.

Not sure if your PR will fix the issue here.

Nothing really fancy configuration-wise.

Vue 3.2
Vite 3.2.5
@vueuse/sound 2.0.0

[P-James]

@kissu did you try

export default defineConfig({
  optimizeDeps: {
    exclude: ['vue-demi'],
  },
})

?
It worked for me even when I didn't have it in my package.json.
I think vite knows it's a peer dependency.

Also I generally recognise that this PR is not ideal. It sounds like vue-demi needs to be updated but that's beyond my expertise

[Baiyuetribe]

same issue, vue^3.2.45+vite^4.0.0

[AtlasApollo]

Please merge, thank you.

[AtlasApollo]

Please merge, thank you.

+1

[kissu]

No point into spamming tbh. @AtlasApollo @SuzyWeightman

[AtlasApollo]

No point into spamming tbh. @AtlasApollo @SuzyWeightman

You're right, I apologize for that.

[dev-charles15531]

@P-James This issue gets resolved from your default.Howl fix. I'm just surprised the merge is been neglected and the issue still open

[Koaieus]

Will this PR fix this error or not? If it does, I'd like to kindly request that this PR gets merged; thanks in advance :)

[dev-charles15531]

Yes!
The PR does fix the issue.

[Tahul]

Hello here :)

Sorry for late answer, a bit overwhelmed lately, preparing conferences!

Happy to get your feedbacks if this fixes all of your issues. @kissu @P-James @Koaieus

@ThimoDEV ; could you let me know what is that issue with Nuxt 3 exactly?

The demo website does run on Nuxt and I have no types problems there.

[Q16solver]

@Tahul I believe it's related to this issue #30, the reason that the demo website runs fine might be because it is not using vueuse/sound as a package, but importing the module directly from the src repo so it is able to find the file, whereas as a downloaded package, for some reason it cannot find the module

[Koaieus]

First off there seems to be a missing dependency for globby. After manually adding it as a dependency it and trying it in a new Nuxt3 app, for me the PR seems to move the problem down by one line.

Secondly there seems to be a nesting problem with the nuxt config where it says options.scan instead of options.sounds.scan which should follow if you follow the guide on github. Or the guide needs to be corrected ;)

I was just about to get to testing the new version but time is up for today so tomorrow I will report more!

[Tahul]

@Koaieus ; thanks so much for giving some context.

Going to fix these issues very soon.

[louia]

Now i'm getting ...

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Howl')

#32 (comment)

[iamroi]

@louia I have the same issue. Have you found any workaround for this?

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Howl')