I installed a few apis via npm. I am trying to import it but get an error that it won't work. If I remove the code everything will work besides,

const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
    width: 800,
    height: 600
});

then, it works.

import butterchurn from "butterchurn";
import butterchurnPresets from "butterchurn-presets";

alert("sup");
//callback
//initalize audio context and get canvas
// initialize audioContext and get canvas

//window.navigator.getUserMedia({audio:true, video:false}, userMediaCallback);

//intialize audioContext and get canvas
let canvas = document.querySelector("#canvas")


let userMediaCallback = stream => {

    let audioContext = new AudioContext()
    let mic = audioContext.createMediaStreamSource(stream);

    const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
        width: 800,
        height: 600
    });

    // get audioNode from audio source or microphone

    visualizer.connectAudio(mic);
    
    // load a preset

    const presets = butterchurnPresets.getPresets();
    const preset = presets['Flexi, martin + geiss - dedicated to the sherwin maxawow'];

    visualizer.loadPreset(preset, 0.0); // 2nd argument is the number of seconds to blend presets

    // resize visualizer

    visualizer.setRendererSize(1600, 1200);

    // render a frame
    
    visualizer.render();
    

}

window.navigator.getUserMedia({audio: true, video: false}, userMediaCallback, console.log);