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

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-```

About this issue

  • Original URL
  • State: open
  • Created a year ago
  • Reactions: 14
  • Comments: 16

Most upvoted comments

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

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;
}

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

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.

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 

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