search

joshwcomeau / use-sound

A React Hook for playing sound effects
MIT License
2.76k stars 98 forks source link

How to use with Next.js? #56

Closed abcd-ca closed 3 years ago

abcd-ca commented 3 years ago

Hi, l'm trying to use this in TypeScript with Next.js. I'm getting,

TS2307: Cannot find module '../../../public/sfx/correct-answer/test.mp3' or its corresponding type declarations.

I know my path is right. I don't know if I can get a webpack file-loader configured but even if I did, would I still get this TypeScript error?

Your library looks really cool and I'd like to use it so would appreciate any help. I couldn't find much by searching the web.

joshwcomeau commented 3 years ago

Hey there — Pretty sure your path should be /sfx/correct-answer/test.mp3. In Next.js, all static assets in /public/ can be accessed from / (so /public/images/cat.jpg would be /images/cat.jpg).

Hope it helps!

ilhamwahabi commented 3 years ago

I'm also encounter this problem, although my import has been correct.

This is how I fix it. I still don't know why we can't use import in Next.js.

Screenshot 2021-02-11 152938

DianaLaa commented 3 years ago

Same problem. I've added the url-loader and file-loader packages, to no avail. The browser shouts 404 at me in the Chrome Developer Tools console and I'm not even calling the paly function yet. Does anyone have a full example with nextjs so that I know where people are placing their sound files on disk?

ilhamwahabi commented 3 years ago

@DianaKoenraadt I'm using it in my project https://github.com/iwgx/morsible

btw just put it in public

DianaLaa commented 3 years ago

Apparently you omit the /public part when you use it. So if you put the mp3 in /public/sounds/my-sound.mp3, you reference it

const [play] = useSound('/sounds/my-sound.mp3');

joshwcomeau commented 3 years ago

Ah, sorry for the confusion — Silly mistake on my part, especially since I use Nextjs myself!

I've removed the example from the README, since yeah really I want to encourage people to consult the docs for their own framework rather than provide instructions for it (that are subject to grow stale as frameworks evolve)

On Thu, Jun 17, 2021 at 3:12 AM Diana Koenraadt @.***> wrote:

Apparently you omit the /public part when you use it. So if you put the mp3 in /public/sounds/my-sound.mp3, you reference it

const [play] = useSound('/sounds/my-sound.mp3');

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/joshwcomeau/use-sound/issues/56#issuecomment-862991692, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABTCARB4QDQJJFRXGVDAH5TTTGN6PANCNFSM4VS6GSMA .