How to resolve Uncaught TypeError from Wave bundle.js when adding Wave.js to Rails 6 app

Question

I am trying to add Wave JS to my Rails 6.1.7.8 app and I'm getting the following Uncaught Type error from Wave bundle.js:

bundle.js:866 Uncaught TypeError: this._canvasElement.getContext is not a function at new t (bundle.js:866:1)

The Uncaught Type error is orginating from line # 9 in the get_wave.js script below.

get_wave.js:

import {Wave} from "@foobar404/wave";

jQuery(document).ready(function()  { //after the entire page is loaded.

document.addEventListener("click", function() {
     
     let audioElement = document.querySelector("#player");
     let canvasElement = document.querySelector("#player_canvas");
     let wave = new Wave(audioElement, canvasElement);  /// Uncaught TypeError: this._canvasElement.getContext is not a function
         
     // Intermediate example: add an animation with options
     wave.addAnimation(new wave.animations.Wave({
         lineWidth: 10,
         lineColor: "#2a9fd6",
         count: 20
     }));
 
});
    
}); 

I did a search on the internet and found the link below to try and resolve the error.

MDN Web doc - TypeError: "x" is not a function

And I tried adding the line below as the first line in the get_wave JS script in order export the "this._canvasElement.getContext" Wave function and the issue was not resolved as expected.

export * from '@foobar404/wave';

Are there any other suggestions for resolving the Uncaught TypeError issue when adding Wave JS to a Rails 6 app?

Answer 1

All I can think of is to check what the canvasElement variable has stored it in, you need it to be an <canvas> element for this Wave constructor. The constructor assumes it is a canvas element, typed: CanvasRenderingContext2D, which has a getContext function. I hope this helps :)