use-sound hook is broken after installing it on a typescript project.

[manish]

Could not find a declaration file for module 'use-sound'. 'c:/Users/manish/Documents/auth-fire/node_modules/use-sound/dist/use-sound.esm.js' implicitly has an 'any' type.
  There are types at 'c:/Users/manish/Documents/auth-fire/node_modules/use-sound/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'use-sound' library may need to update its package.json or typings.ts(7016)
Could not find a declaration file for module 'use-sound'. 'c:/Users/manish/Documents/auth-fire/node_modules/use-```

[ladvoc]

I am receiving the same error:

• use-sound version: v4.0
• React version: v18.2.0
• Vite: v4.4.5
• Typescript: v5.1.3
• Build platform: macOS

[Hemant]

I am also having the same issue.
I am using it with Next.js13 and Typescript

[Hemant]

Does anyone know how can we temporary solve this error like jumping on the previous versions and use that?

[Sebastian Ong]

Same here. Temporarily fixed by adding // @ts-ignore on top of the import, but TypeScript will not be able to provide any type safety for the hook itself. Personally going to hold off from using this package for now.

[Hemant]

Yeah. I'll also prefer not using it for now

[ProgrammingSteve105]

What I did was make a use-sound.d.ts file
Then in the tsconfig.json file add
"typeRoots": ["./use-sound.d.ts"]
inside the compilerOptions

The use-sound.d.ts file looked like this

declare module 'use-sound' {
  import { Howl, Howler } from 'howler';

  interface HookOptions {
    volume?: number;
    playbackRate?: number;
    interrupt?: boolean;
    soundEnabled?: boolean;
    sprite?: { [key: string]: [number, number] };
    // You can add more properties as needed based on your use case
  }

  interface ExposedData {
    volume: number;
    playbackRate: number;
    interrupt: boolean;
    soundEnabled: boolean;
    sprite: { [key: string]: [number, number] };
    // You can add more properties as needed based on your use case
  }

  type PlayFunction = (options?: PlayOptions) => void;

  interface PlayOptions {
    id?: string;
    forceSoundEnabled?: boolean;
    playbackRate?: number;
    // You can add more properties as needed based on your use case
  }

  interface PlayExposedData extends ExposedData {
    stop: (id?: string) => void;
    pause: (id?: string) => void;
    duration: number | null;
    sound: Howl | null;
  }

  type UseSoundTuple = [PlayFunction, PlayExposedData];

  const useSound: (src: string, options?: HookOptions) => UseSoundTuple;

  export default useSound;
}

[Paul]

same issue with latest vite/ react/ts. added // @ts-igmore above the import.

[Akhil Sai Ram]

This helped resolve my issue.

1. Create a folder called generated-types at the same level of tsconfig.json
2. Now, copy the index.d.ts and types.d.ts files from dist folder of @node-modules/use-sound and paste them in the above folder
3. Head over to tsconfig.json and add paths to it in the below format inside compilerOptions

"paths": {
      "use-sound": ["./generated-types/"]
    }

This might or might not be the exact correct answer, but this is helpful than // @ts-ignore

Note: The folder generated-types can be named anything and the same name should be reflecting inside the use-sound of the paths key in tsconfig.json

[Alexander Goldovsky]

Same stuff, using Next.js 13 and Typescript.

[Dhino_Rahmad]

This helped resolve my issue.

1. Create a folder called generated-types at the same level of tsconfig.json
2. Now, copy the index.d.ts and types.d.ts files from dist folder of @node-modules/use-sound and paste them in the above folder
3. Head over to tsconfig.json and add paths to it in the below format inside compilerOptions

"paths": {
      "use-sound": ["./generated-types/"]
    }

This might or might not be the exact correct answer, but this is helpful than // @ts-ignore

Note: The folder generated-types can be named anything and the same name should be reflecting inside the use-sound of the paths key in tsconfig.json

it works for me on Next JS 13, thanks

[Kamal Singh]

@dhino12 solution works. But why does it not pickup types, where they are in nodemodules?

[Manseerat S. Gill]

thank you @akhil0001 @dhino12

[jeffclaybrook]

@akhil0001 you da man thank you!

[Pablo]

@akhil0001 solution is working even on Next.js 14. Thank you!

[Vikrant Bhat]

If someone is still getting TS errors while using the useSound hook, then try installing @types/howler along with the above mentioned solution.

bun install --dev @types/howler 

[Magnus Markling]

If someone is still getting TS errors while using the useSound hook, then try installing @types/howler along with the above mentioned solution.

bun install --dev @types/howler 

This is the way.