ReferenceError: self is not defined about wavesurfer-react HOT 4 CLOSED

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import dynamic from "next/dynamic";
import styles from '../styles/Home.module.css'
import {useCallback, useEffect, useState} from "react";

const WaveSurfer = dynamic(() => import("wavesurfer-react").then(m => m.WaveSurfer), { ssr: false });

const Home: NextPage = () => {
  const [plugins, setPlugins] = useState([]);

  const onMount = useCallback((ws$) => {
    console.log({ ws$ });
    if (!ws$) return;
    ws$.load("/record_1.mp3");
  }, []);

  useEffect(() => {
    if (typeof window === "undefined") return;
    /*
     dynamic("...") with wavesurfer plugins doesn't work
     because next will surround it with LoadableComponent
    */
    import("wavesurfer.js/dist/plugin/wavesurfer.timeline").then((TimelinePlugin) => {
      setPlugins([{
        plugin: TimelinePlugin.default,
        options: {
          container: "#timeline"
        }
      }]);
    });
  }, [])

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
        <div style={{ width: "100%" }}>
          {/*
          We cannot you dynamic with WaveForm as far as dynamic surrounds component with LoadableComponent,
          that makes it impossible to read container from WaveForm's props.
          */}
          <WaveSurfer onMount={onMount} container="#wavesurfer" plugins={plugins}>
            <div id="wavesurfer"/>
            <div id="timeline" />
          </WaveSurfer>
        </div>
      </main>
    </div>
  )
}

export default Home

const formWaveSurferOptions = (ref) => ({
  container: ref,
  waveColor: "#eee",
  progressColor: "#0178FF",
  cursorColor: "OrangeRed",
  barWidth: 3,
  barRadius: 3,
  responsive: true,
  height: 150,
  normalize: true,
  partialRender: true,
  plugins: [],
});

const url =
    "https://www.mfiles.co.uk/mp3-downloads/brahms-st-anthony-chorale-theme-two-pianos.mp3";

  useEffect(() => {
    const create = async () => {
      const WaveSurfer = (await import("wavesurfer.js")).default;
      const MarkersPlugin = (await import("wavesurfer.js/src/plugin/markers"))
        .default;

      const options = formWaveSurferOptions(waveformRef.current);
      options.plugins.push(
        MarkersPlugin.create({
          markers: [
            {
              time: 58,
              label: "",
              color: "#ff990a",
            },
            {
              time: 5.5,
              label: "",
              color: "#ff990a",
            },

            {
              time: 24,
              label: "END",
              color: "#00ffcc",
              position: "top",
            },
          ],
        })
      );

      wavesurfer.current = WaveSurfer.create(options);
      wavesurfer.current.load(url);

      wavesurfer.current.on("marker-click", function (marker) {
        console.log("marker drop", marker);
      });

      wavesurfer.current.on("audioprocess", function () {
        const currentTime = wavesurfer.current.getCurrentTime();
        setProgress(currentTime);
      });
    };

    create();

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

const handlePlayPause = () => {
    setPlaying(!playing);
    wavesurfer.current.playPause();
  };

  const back30 = () => {
    wavesurfer.current.skipBackward(30);
  };

const forward30 = () => {
    wavesurfer.current.skipForward(30);
  };
  
<div id="waveform" ref={waveformRef} />
      <div className="controls">
        <div onClick={back30}>Back 30</div>
        <div onClick={handlePlayPause}>{!playing ? "Play" : "Pause"}</div>
        <div onClick={forward30}>Forward 30</div>
      </div>