英文:
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 '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!
答案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(
() => import('react-hls-player'),
{ ssr: false },
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论