WaveSurfer crash page

Thanks a lot for the library, can some one help me?

Well i trying code an application in react with the framework, and i found some examples but doenst works with me.

i have this code:

function AudioView(props){  
    const waveSurferRef=useRef(null);
    const wavesurfer = useRef(null);

    useEffect(()=>{
        wavesurfer.current = WaveSurfer.create({
            container: waveSurferRef.current,
            waveColor: "#eee",
            progressColor: "OrangeRed",
            cursorColor: "OrangeRed",
            barWidth: 3,
            barRadius: 3,
            responsive: true,
            height: 150,
            // If true, normalize by the maximum peak instead of 1.0.
            normalize: true,
            // Use the PeakCache to improve rendering speed of large waveforms.
            partialRender: true
   
        });
        
        wavesurfer.current.load(nothing);
        return () => wavesurfer.current.destroy();

    },[]);
  

    return (
        <div className="audio-view-container" >
            <div id="waveform" ref={waveSurferRef}/>
        </div>
    )   


}

export default AudioView;

and when i execute, doenst show nothing, and others component dont show more.

the div root <div class="root"></div> dont has any child.

[Gabrielk99]

@Gabrielk99 I remove the id=waversurfer (in my case) on the div and add a height and width to the div and worked

Okay, other thing u have do is add the position relative for the div that contain “wavesurfer”.

[JulianaCristina]

Same issue here