Cannot use import statement outside a module - react-hls-player

i tried to implement hls player on my nextjs app using react-hls-player but i'm getting Cannot use import statement outside a module error, do you know which part im missing?, here is my code

stream.js

import ReactHlsPlayer from 'react-hls-player'

export default function Stream() {
  const playerRef = React.useRef()

  function playVideo() {
    playerRef.current.play()
  }

  function pauseVideo() {
    playerRef.current.pause()
  }

  function toggleControls() {
    playerRef.current.controls = !playerRef.current.controls
  }

  return(
    <div>
      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
        <div className="p-4 border border-gray-400 shadow-md rounded">
          <ReactHlsPlayer
            playerRef={playerRef}
            src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
          />
        </div>
      </div>
    </div>
  )
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

thankyou in advance!

Looks like a known issue in the module, the maintainer hasn't released a complete fix:- https://github.com/devcshort/react-hls/issues/29

In the meantime you can use dynamic imports to get rid of the error:-

const Player = dynamic(
  () => import('react-hls-player'),
  { ssr: false },
);