Wavesurfer Plugin usage in React with Typescript

Question

I'm using wavesurfer.js with React and Typescript. To get the typings I'm also using the corresponding @types/wavesurfer.js. Now I want to use the cursor plugin. When I'm importing the actual CursorPlugin this way

import CursorPlugin from 'wavesurfer.js/src/plugin/cursor.js';

I get all the type hints etc. but the compiler says:

ERROR in ./path/to/my/component/index.tsx 9:0-62
Module not found: Error: Can't resolve 'wavesurfer.js/src/plugin/cursor.js' in 'path/to/my/component'

Here is the Codesandbox demonstrating this behavior.

I already found a workaround on the interwebs:

import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.min.js';

and it works although I don't get type hints this way. But it just doesn't seem to be the "right" way to do it, so I was wandering if anyone else has found any better solution yet?

I'm having the same issue. This import worked in v5.x, but not in more recent versions. Did you find a solution? — JL Gradley
– JL Gradley, Commented Apr 16, 2024 at 15:41
@JLGradley unfortunately not, I just went with the workaround I mentioned — Aleksandr Epp
– Aleksandr Epp, Commented Apr 18, 2024 at 9:51

Kalip · Accepted Answer · 2025-04-15 09:45:52Z

0

As of v7, the Cursor plugin is now named Hover.

As mentioned in this Github comment, you can import it with the types:

import Hover from 'wavesurfer.js/dist/plugins/hover.js'

With waveform.js v7 you don't need to install @types/wavesurfer.js.

answered Apr 15 at 9:45

Kalip

1061 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Wavesurfer Plugin usage in React with Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related