Typeerror: null is not an object (evaluating 'i.fillStyle=this.convertColorValues(t.waveColor)')

[psdev0]

I've been recently started getting this typeerror which was not the case a few months ago. My code was working fine for majority of users. Here's how I use it.

useEffect(() => {
    const totalBars = 6;
    const containerWidth = 25;
    const barWidth = containerWidth / totalBars;

    const createWaveSurfer = () => {
      if (wavesurfer) {
        wavesurfer.destroy();
      }

      const ws = WaveSurfer.create({
        container: containerRef.current as HTMLElement,
        waveColor: "rgb(79, 70, 229)",
        progressColor: "rgb(79, 70, 229)",
        barWidth: barWidth,
        barGap: 1,
        width: 25,
        height: 40,
      });

      const rec = ws.registerPlugin(
        RecordPlugin.create({
          scrollingWaveform: false,
          renderRecordedAudio: false,
        }),
      );
      setWavesurfer(ws);
      rec.startRecording();
    };

    createWaveSurfer();

    return () => {
      if (wavesurfer) {
        wavesurfer.destroy();
      }
    };
  }, []);

Why I am getting this error for some users, Am I missing something?

[katspaugh]

Maybe your containerRef.current is null.

[psdev0]

But with v7.8.8, it works fine from what I upgraded and that upgrade introduced this bug.

[katspaugh]

I don't see any other issues in your code snippet.
Between 7.8.8 and 7.8.15 there doesn't seem to be any changes that might have caused that error.
Can you downgrade to 7.8.11 and see if the error persists?

[psdev0]

Now I noticed some errors in v7.8.8 too even if I have a null guard there.

And it is not being caught by the trycatch.

const AudioWaveForm = memo(() => {
  const [wavesurfer, setWavesurfer] = useState<WaveSurfer | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const totalBars = 6;
    const containerWidth = 25;
    const barWidth = containerWidth / totalBars;

    const createWaveSurfer = () => {
      if (wavesurfer) {
        wavesurfer.destroy();
      }

      if (!containerRef.current) return;

      const ws = WaveSurfer.create({
        container: containerRef.current as HTMLElement,
        waveColor: "rgb(79, 70, 229)",
        progressColor: "rgb(79, 70, 229)",
        barWidth: barWidth,
        barGap: 1,
        width: 25,
        height: 40,
      });

      const rec = ws.registerPlugin(
        RecordPlugin.create({
          scrollingWaveform: false,
          renderRecordedAudio: false,
        }),
      );
      setWavesurfer(ws);
      rec.startRecording();
    };

    try {
      createWaveSurfer();
    } catch (error: any) {
      console.log("createWaveSurfer error: ", error);

      sentryCaptureMessage("CreateWaveSurfer Error");
      sentryAddBreadcrumb("CreateWaveSurfer Error", SentryLevel.ERROR, {
        data: {
          error,
          message: error?.message,
          containerRef,
          wavesurferInstance: wavesurfer,
        },
      });
    }

    return () => {
      if (wavesurfer) {
        wavesurfer.destroy();
      }
    };
  }, [containerRef.current]);

  return <div ref={containerRef} className="flex w-[25px] shrink-0"></div>;
});

[psdev0]

I tried hard but not able to regenerate the issue itself.

But is it possible that the Component in which it is being used, if re-renders many times can cause this AudioWaveFrom to lose its ref values?

(I got this idea just after posting this, will try to test this tomorrow.)