Region plugin in Vue giving error while import

[laxmangaian]

Hi, I am trying to use wavesurfer.js in my application which built using Vue. When I import the Region plugin it's showing error like below.

Importing as below:

import WaveSurfer from 'wavesurfer.js';
import RegionsPlugin from 'wavesurfer.js@7/dist/plugins/regions.min.js';

Error:

Could not find module in path: 'wavesurfer.js/dist/plugins/regions.min.js' relative to '/src/components/HelloWorld.vue'

[katspaugh]

Try importing it as suggested in the readme:

import Regions from 'wavesurfer.js/dist/plugins/regions.esm.js'

[laxmangaian]

It is still giving the same error. Please check below image. I am using wavesurfer.js == 7.5.4 version.

Code Reference: https://codesandbox.io/p/sandbox/holy-shape-vdwnvg?file=%2Fsrc%2Fcomponents%2FHelloWorld.vue%3A57%2C1

[katspaugh]

It looks like you're not using NPM, so you need to specify an actual path for the module, or a URL.

E.g. a CDN URL: import WaveSurfer from 'http://unpkg.com/[email protected]/dist/wavesurfer.esm.js'

And similarly for the Regions plugin.

[laxmangaian]

Thank you it worked fine in my local system after replacing .min to .esm