如何在Next.js框架中使用screenfull JavaScript库？

问题原因 #

• 你当前代码存在两个核心错误：首先是同时声明了screenfull的静态导入和动态导入，静态导入会在服务端渲染阶段直接执行，而screenfull完全依赖浏览器的window、document API，服务端环境不存在这些对象，会直接触发报错
• 其次next/dynamic是Next.js专门提供给React组件动态导入的API，不适合用来导入普通JS工具库，用它导入工具库会出现导出格式不匹配、无法正常调用方法的问题

正确实现方案 #

方案1：逻辑处按需动态导入（推荐） #

直接在需要调用全屏能力的客户端逻辑（点击事件、useEffect生命周期等）中使用原生ES动态导入语法，不需要借助next/dynamic：

// 顶部不要声明screenfull的静态导入
const handleFullscreenToggle = async () => {
  // 屏蔽服务端执行逻辑
  if (typeof window === 'undefined') return
  // 动态导入后取default导出
  const screenfull = (await import('screenfull')).default
  if (screenfull.isEnabled) {
    screenfull.toggle()
  }
}

方案2：强制仅客户端加载（适配需要全局导入的场景） #

如果需要提前导入实例，可以通过next/dynamic关闭服务端渲染配置实现，注意不要加多余的静态导入：

import dynamic from 'next/dynamic'

const screenfull = dynamic(
  () => import('screenfull').then(module => module.default),
  { ssr: false }
)

// 调用前先判断实例是否加载完成、当前环境是否支持全屏API
if (screenfull?.isEnabled) {
  screenfull.request()
}

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