无法在模块外部使用import语句 – react-hls-player

huangapple go评论64阅读模式
英文:

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

问题

我尝试在我的Next.js应用中使用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;

提前感谢您!

英文:

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 &#39;react-hls-player&#39;

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(
    &lt;div&gt;
      &lt;div className=&quot;grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4&quot;&gt;
        &lt;div className=&quot;p-4 border border-gray-400 shadow-md rounded&quot;&gt;
          &lt;ReactHlsPlayer
            playerRef={playerRef}
            src=&quot;https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8&quot;
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}

next.config.js

/** @type {import(&#39;next&#39;).NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

thankyou in advance!

答案1

得分: 0

看起来是模块中已知的问题,维护者还没有发布完整的修复:-
https://github.com/devcshort/react-hls/issues/29

与此同时,您可以使用动态导入来消除错误:-

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

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(
  () =&gt; import(&#39;react-hls-player&#39;),
  { ssr: false },
);

huangapple
  • 本文由 发表于 2023年5月29日 12:29:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/76354678.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定