Wavesurfer.js is working fine, but react-wavesurfer has issues

Question

I have run into a roadblock on my web project that uses Wavesurfer. I have installed wavesurfer.js and react-wavesurfer as node modules in my project. Wavesurfer.js seems to be

Answer 1

React-wavesurfer handles the creation of the wavesurfer instance itself. So you can leave out the makeWave part.

import React, { Component } from 'react';
import WaveSurfer from 'react-wavesurfer';

export default class WaveComponent extends Component {
  render() {
    return (
      
    );
  }
}

This code works for me. If this doesn't work please post the exact versions of wavesurfer.js and react-wavesurfer you are using.

Also please bear in mind that you need to expose wavesurfer.js as a global variable if you are using a module bundler. (This will hopefully be no longer necessary in the near future) – for more exact instructions please see https://github.com/mspae/react-wavesurfer#prerequisites-and-common-pitfalls)