在Next.js中使用react-hls-player遇模块外import语句错误求助

问题根源 #

react-hls-player 依赖的 hls.js 采用ES模块格式，而Next.js默认不会对第三方ES模块包进行转译，在服务器端渲染环节会触发模块导入错误。

修复步骤 #

1. 修改Next.js配置文件
   打开 next.config.js，添加 transpilePackages 字段，指定需要转译的包：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     reactStrictMode: true,
     transpilePackages: ['react-hls-player', 'hls.js'],
   }
   
   module.exports = nextConfig
   

   该配置会让Next.js将指定的第三方包转译为兼容服务器端渲染的格式。

2. 适配Next.js 13+ App Router（若使用）
   如果你使用的是Next.js 13及以上版本的App Router，需要在组件顶部添加 'use client' 指令，标记该组件为客户端组件：

   'use client';
   import ReactHlsPlayer from 'react-hls-player'
   
   export default function Stream() {
     // 其余代码保持不变
   }
   

3. 确认依赖安装正确
   确保已经安装了 react-hls-player，若未安装，执行以下命令：

   npm install react-hls-player
   # 或使用yarn
   yarn add react-hls-player
   

完成以上步骤后，重启Next.js开发服务器，错误即可解决。

内容的提问来源于stack exchange，提问作者Umar