我试图在我的nextjs应用程序上使用react-hls-player实现hls播放器，但我得到Cannot use import statement outside a module错误，你知道我缺少哪一部分吗？，这是我的代码
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

提前感谢！