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?
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 :)