如何解决Next.js 13使用Blurhash包时的Module parse failed错误

错误含义解析 #

你遇到的错误是因为Webpack无法解析sharp-darwin-x64.node这类Node.js原生二进制模块：

error ./node_modules/sharp/build/Release/sharp-darwin-x64.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

所有Blurhash相关包基本都依赖sharp图片处理库，而sharp包含平台专属的二进制文件，这类文件只能在Node.js服务端环境运行，不能直接被Webpack打包到客户端代码中——浏览器无法识别这类二进制内容，这就是报错的核心原因。

解决方法 #

方法1：将Blurhash计算移到服务端（推荐） #

Next.js 13的App Router中，服务端组件或API Route可以直接处理Node.js原生模块，所以把生成Blurhash的逻辑放到服务端，客户端通过API调用获取结果：

步骤1：创建API Route

在app/api/blurhash/route.js中编写服务端逻辑：

import blurhashFromURL from 'blurhash-from-url';

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const imageUrl = searchParams.get('url');
  
  if (!imageUrl) {
    return new Response('缺少图片URL参数', { status: 400 });
  }

  try {
    const blurhash = await blurhashFromURL(imageUrl);
    return new Response(JSON.stringify({ blurhash }), { status: 200 });
  } catch (err) {
    return new Response('生成Blurhash失败', { status: 500 });
  }
}

步骤2：客户端调用API

修改你的页面组件，通过fetch调用上述API：

'use client';
import { useState, useEffect } from 'react';

export default function Page() {
  const [blurs, setBlurs] = useState([]);

  async function getBlurhash(imageUrl) {
    const encodedUrl = encodeURIComponent(imageUrl);
    const res = await fetch(`/api/blurhash?url=${encodedUrl}`);
    const data = await res.json();
    
    setBlurs(prev => [...prev, data.blurhash]);
    console.log(data.blurhash);
  }

  useEffect(() => {
    getBlurhash(
      "https://images.unsplash.com/photo-1690263914767-963579f9620c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=400&q=60"
    );
  }, []);

  return (
    <div>{/* 你的页面内容 */}</div>
  );
}

方法2：使用纯JavaScript实现的Blurhash库 #

如果一定要在客户端生成Blurhash，可以替换为不依赖sharp的纯JS库（比如blurhash），手动处理图片加载和编码：

步骤1：安装纯JS库

npm install blurhash

步骤2：客户端代码实现

'use client';
import { useState, useEffect } from 'react';
import { encode } from 'blurhash';

// 加载图片并获取ImageData
function loadImageData(imageUrl) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 处理跨域图片
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      resolve(ctx.getImageData(0, 0, img.width, img.height));
    };
    img.onerror = reject;
    img.src = imageUrl;
  });
}

// 生成Blurhash
async function getBlurhash(imageUrl) {
  const imageData = await loadImageData(imageUrl);
  // 参数说明：像素数据、宽、高、x分量数、y分量数（数值越小模糊程度越高）
  return encode(imageData.data, imageData.width, imageData.height, 4, 4);
}

export default function Page() {
  const [blurs, setBlurs] = useState([]);

  useEffect(() => {
    getBlurhash(
      "https://images.unsplash.com/photo-1690263914767-963579f9620c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=400&q=60"
    ).then(hash => {
      setBlurs(prev => [...prev, hash]);
      console.log(hash);
    }).catch(err => {
      console.error('生成失败:', err);
    });
  }, []);

  return (
    <div>{/* 你的页面内容 */}</div>
  );
}

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