Cannot use import statement outside a module about wavesurfer-react HOT 7 CLOSED

{
    ...,
    "next": "13.1.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "wavesurfer-react": "2.2.2",
    "wavesurfer.js": "6.4.0",
    ...
}

import { useCallback, useMemo, useRef, useState } from 'react';
import { WaveSurfer, WaveForm, Region, Marker } from 'wavesurfer-react';
import RegionsPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.regions.min';
import TimelinePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.min';
import MarkersPlugin from 'wavesurfer.js/src/plugin/markers';

export default function Wavesurfer({ id }) {
  const waveformId = 'waveform' + '-' + id;
  const timelineId = `timeline-${id}`;

  const plugins = useMemo(() => {
    return [
      {
        plugin: RegionsPlugin,
        options: { dragSelection: true },
      },
      {
        plugin: TimelinePlugin,
        options: {
          container: timelineId,
        },
      },
      {
        plugin: MarkersPlugin,
        options: {
          markers: [{ draggable: true }],
        },
      },
    ];
  }, [timelineId]);

  const [regions, setRegions] = useState([
    {
      id: 'region-1',
      start: 0.5,
      end: 10,
      color: 'rgba(0, 0, 0, .5)',
      data: {
        systemRegionId: 31,
      },
    },
    {
      id: 'region-2',
      start: 5,
      end: 25,
      color: 'rgba(225, 195, 100, .5)',
      data: {
        systemRegionId: 32,
      },
    },
    {
      id: 'region-3',
      start: 15,
      end: 35,
      color: 'rgba(25, 95, 195, .5)',
      data: {
        systemRegionId: 33,
      },
    },
  ]);

  const [markers, setMarkers] = useState([
    {
      time: 5.5,
      label: 'V1',
      color: '#ff990a',
      draggable: true,
    },
    {
      time: 10,
      label: 'V2',
      color: '#00ffcc',
      position: 'top',
    },
  ]);

  const wavesurferRef = useRef(null);

  const onWaveSurferMount = useCallback((waveSurfer) => {
    if (waveSurfer.markers) {
      waveSurfer.clearMarkers();
    }

    wavesurferRef.current = waveSurfer;

    if (wavesurferRef.current) {
      wavesurferRef.current.load('/audios/1.mp3');

      wavesurferRef.current.on('ready', () => {
        console.log('WaveSurfer is ready');
      });

      wavesurferRef.current.on('region-removed', (region) => {
        console.log('region-removed --> ', region);
      });

      wavesurferRef.current.on('loading', (data) => {
        console.log('loading --> ', data);
      });
    }
  }, []);

  return (
    <WaveSurfer plugins={plugins} onMount={onWaveSurferMount}>
      <WaveForm id={waveformId}>
        {regions.map((regionProps) => (
          <Region
            onUpdateEnd={() => {}}
            key={regionProps.id}
            {...regionProps}
          />
        ))}
        {markers.map((marker, index) => {
          return (
            <Marker
              key={index}
              {...marker}
              onClick={(...args) => {
                console.log('onClick', ...args);
              }}
              onDrag={(...args) => {
                console.log('onDrag', ...args);
              }}
              onDrop={(...args) => {
                console.log('onDrop', ...args);
              }}
            />
          );
        })}
      </WaveForm>
      <div id={timelineId}></div>
    </WaveSurfer>
  );
}

  ...
  const plugins = useMemo(() => {
    return [
      {
        plugin: RegionsPlugin,
        options: { dragSelection: true },
      },
      {
        plugin: TimelinePlugin,
        options: {
          // old value was only timelineId
          container: '#' + timelineId,
        },
      },
      {
        plugin: MarkersPlugin,
        options: {
          markers: [{ draggable: true }],
        },
      },
    ];
  }, [timelineId]);
  ...

import { WaveSurfer, WaveForm, Region } from "wavesurfer-react";
import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.min";
import TimelinePlugin from "wavesurfer.js/dist/plugin/wavesurfer.timeline.min";

export default function Wavesurfer(props) {
    const [timelineVis] = useState(true);
    const minSec = 5;
    const maxSec = 30;
    const absoluteMaxRegions = 20;
    const [maxRegions, setMaxRegions] = useState();

    const plugins = useMemo(() => {
        return [
            {
                plugin: RegionsPlugin,
                options: { dragSelection: true }
            },
            timelineVis && {
                plugin: TimelinePlugin,
                options: {
                    container: "#timeline" + props.id
                }
            }
        ].filter(Boolean);
    }, [timelineVis]);
    
    return (
        <WaveSurfer plugins={plugins} onMount={handleWSMount}>
            <WaveForm
                id={"waveform" + props.id}
                cursorColor="OrangeRed"
                progressColor="#00a3ff"
                barWidth="3"
                barRadius="3"
                responsive="true"
                partialRender="true"
            >
                {props.regions.map((regionProps) => (
                    <Region
                        onUpdateEnd={handleRegionUpdate}
                        key={regionProps.id}
                        minLength={minSec}
                        maxLength={maxSec}
                        maxRegions={maxRegions}
                        {...regionProps}
                    />
                ))}
            </WaveForm>

            <div className="timeline" id={"timeline" + props.id} />
        </WaveSurfer>
    )

import dynamic from 'next/dynamic';
const Wavesurfer = dynamic(import('src/components/wavesurfer'), { ssr: false })

const Wavesurfer = dynamic(() => import('src/components/wavesurfer'), {
  ssr: false,
})