如何解决Rails 6应用添加Wave.js时出现的Uncaught TypeError

这个错误的核心原因是传入Wave构造函数的canvasElement不是有效的HTMLCanvasElement，或者元素不存在，导致调用getContext时失败。以下是具体的排查和解决建议：

1. 确保DOM元素存在且类型正确 #

首先要确认页面上确实存在id="player_canvas"的<canvas>标签，而非其他类型元素（比如div）。同时在创建Wave实例前，添加元素存在性和类型检查：

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

jQuery(document).ready(function() {
    document.addEventListener("click", function() {
        let audioElement = document.querySelector("#player");
        let canvasElement = document.querySelector("#player_canvas");

        // 检查元素是否存在
        if (!audioElement || !canvasElement) {
            console.error("音频或画布元素未找到");
            return;
        }

        // 确认是canvas元素
        if (!(canvasElement instanceof HTMLCanvasElement)) {
            console.error("player_canvas 不是canvas标签");
            return;
        }

        let wave = new Wave(audioElement, canvasElement);
        
        wave.addAnimation(new wave.animations.Wave({
            lineWidth: 10,
            lineColor: "#2a9fd6",
            count: 20
        }));
    });
});

2. 避免重复创建Wave实例 #

当前代码每次点击都会生成新的Wave实例，不仅浪费资源，还可能导致DOM元素绑定冲突。可以将wave变量提升到外部作用域，确保只创建一次：

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

jQuery(document).ready(function() {
    let wave = null; // 外部作用域存储实例
    document.addEventListener("click", function() {
        if (wave) return; // 已创建则直接返回

        let audioElement = document.querySelector("#player");
        let canvasElement = document.querySelector("#player_canvas");

        if (!audioElement || !canvasElement || !(canvasElement instanceof HTMLCanvasElement)) {
            console.error("元素异常");
            return;
        }

        wave = new Wave(audioElement, canvasElement);
        
        wave.addAnimation(new wave.animations.Wave({
            lineWidth: 10,
            lineColor: "#2a9fd6",
            count: 20
        }));
    });
});

3. 处理Rails Turbo的页面加载机制 #

Rails 6默认启用Turbo（原Turbolinks），传统的document.ready只会在首次页面加载时执行，后续页面切换时DOM不会完全重建，可能导致元素选择失败。改用Turbo的加载事件：

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

// 替换jQuery.ready为Turbo加载事件
document.addEventListener("turbo:load", function() {
    let wave = null;
    document.addEventListener("click", function() {
        if (wave) return;

        let audioElement = document.querySelector("#player");
        let canvasElement = document.querySelector("#player_canvas");

        if (!audioElement || !canvasElement || !(canvasElement instanceof HTMLCanvasElement)) {
            console.error("元素异常");
            return;
        }

        wave = new Wave(audioElement, canvasElement);
        
        wave.addAnimation(new wave.animations.Wave({
            lineWidth: 10,
            lineColor: "#2a9fd6",
            count: 20
        }));
    });
});

4. 重新安装依赖确保兼容性 #

如果以上方法无效，可能是依赖包安装出现问题，尝试重新安装Wave JS：

yarn remove @foobar404/wave
yarn add @foobar404/wave

内容的提问来源于stack exchange，提问作者B4DataLore