在Next.js中使用heic2any库时解决Blob未定义错误

这个错误的核心原因是：Next.js默认的服务端渲染（SSR/SSG）环境中不存在Blob、File这类浏览器专属API，而heic2any库及你的转换逻辑依赖这些API，页面刷新时服务端会执行到相关代码，直接触发报错。

以下是具体解决方案：

1. 确保heic2any仅在客户端加载执行 #

方法A：动态导入heic2any并禁用SSR #

通过Next.js的动态导入功能，指定模块仅在客户端加载，避免服务端解析该库：

import dynamic from 'next/dynamic';

// 动态导入heic2any，强制仅在客户端执行
const heic2any = dynamic(() => import('heic2any'), { ssr: false });

方法B：通过环境判断包裹客户端代码 #

在执行heic2any及相关浏览器API代码前，先判断当前是否处于客户端环境：

let heic = assets[0];
// 仅在客户端环境处理HEIC转换
if (heic.name.endsWith('.heic') && typeof window !== 'undefined') {
  let randomName = Math.floor(Math.random() * 184) + 1;
  heic2any({
    blob: heic,
    toType: "image/png",
    quality: 0.7,
  }).then((blob) => {
    // File构造函数同样依赖浏览器环境，已被上面的判断覆盖
    let heicFile = new File([blob], `heicImage-${randomName}.png`, {
      type: "image/png",
    });
    setFiles([heicFile]);
  });
}

2. 修复原代码的状态覆盖问题 #

原代码中处理HEIC文件后，仍会执行setFiles([...files, ...validFiles])，导致转换后的文件状态被覆盖。需要调整逻辑分支：

const isHeicFile = assets[0]?.name.endsWith('.heic');

if (isHeicFile && typeof window !== 'undefined') {
  // 仅处理HEIC文件的转换逻辑
  let randomName = Math.floor(Math.random() * 184) + 1;
  heic2any({
    blob: assets[0],
    toType: "image/png",
    quality: 0.7,
  }).then((blob) => {
    let heicFile = new File([blob], `heicImage-${randomName}.png`, {
      type: "image/png",
    });
    setFiles([heicFile]);
  });
} else {
  // 处理非HEIC文件的校验和状态更新
  if(fileFormat.length < assets.length){
    alert("Invalid file format,only jpg,png,jpeg,heic,pdf,doc & docx file format required");
    setFiles([]);
    return;
  }
  setFiles([...files, ...validFiles]);
}

3. Next.js 13+ App Router 专属方案 #

如果使用App Router，直接在组件顶部添加客户端指令，让整个组件仅在客户端渲染：

'use client'; // 放在组件文件最顶部

// 正常导入heic2any
import heic2any from 'heic2any';

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