this._wavesurfer.init is not a function

[avocadojesus]

I attempted to follow the README, and have tried both using npm to install and import the beta version of wavesurfer, as well as simply requiring the cdn-hosted wavesurferjs file into my main project. Either way i continue to get the same error. Not sure what i'm doing wrong here, but it seems others are having the same issue

https://stackoverflow.com/questions/44813585/wavesurfer-js-is-working-fine-but-react-wavesurfer-has-issues

any idea what i'm doing wrong here?

attempt 1:

import WavesurferComponent from 'react-wavesurfer'

...
render() {
   <WavesurferComponent audioFile={'/audio/default.mp3'} />
}

attempt 2:

// index.ejs
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>

render() {
   <WavesurferComponent audioFile={'/audio/default.mp3'} />
}

[mspae]

I've answered that question https://stackoverflow.com/a/45662173/5097199

If you are getting this._wavesurfer.init is not a function then this is because the global WaveSurfer variable cannot be found. You need to adjust your build configuration so it is exposed: https://github.com/mspae/react-wavesurfer#prerequisites-and-common-pitfalls

The beta/v2/es6 version of wavesurfer.js was actually originally architected to solve this problem (beforehand wavesurfer.js was built in such a way that it was not possible to use it in a truly modular way) – as yet there is no updated react-wavesurfer version available which works with the beta wavesurfer.js

[danielkrich]

Is there a way to use wavesurfer without touching the webpack config? I'm using 'create-react-app' and I didn't eject.

[tekfunk]

Yea I'm in the same boat. I'm also using create-react-app and cant get that webpack.config code working

[tekfunk]

ok so this worked for me. https://jaketrent.com/post/change-webpack-config-create-react-app-without-ejecting/

[danielkrich]

I ended up wrapping WaveSurfer.js myself, with a single react file. It's much better, because the new version of wavesurfer allows easier interfacing, without touching the webpack config or using work-around libraries at all!

If you want I can upload my solution as a gist or as a module :)

[barbaragomes]

@danielkrich Could you please share your solution? Thanks

[theaidem]

Try yarn add wavesurfer.js@1.4.0

[sokratisvs]

I have the same problem https://stackoverflow.com/questions/44813585/wavesurfer-js-is-working-fine-but-react-wavesurfer-has-issues it causes typeError: this._wavesurfer.init is not a function @danielkrich Can you please share the solution you made?

[18932508]

@danielkrich any chance of having a look at that wrapper please?

[ZuzooVn]

To all:

Note: This version does not work for the version 2 (beta) of wavesurfer.js – A version of react-wavesurfer that will work with the new version is in the making.

Thus, please use wavesurfer.js v1.4.0 instead of v2.x.x

[danielkrich]

@18932508 @sokratisvs @barbaragomes Here you go, sorry for the extreme delay: https://gist.github.com/danielkrich/8fc02a79caeff5de9d6554f003516eae

You will need to import recompose which is just awesome. Usage should be the same as react-wavesurfer. Hope you'll get the hang of it :)