如何修复Next 13中Module parse failed: Unexpected character '�'(1:0)错误？

问题重现 #

安装lqip-modern包后，应用抛出Webpack解析错误：

ModuleParseError: 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)

修复方案 #

方案1：优先使用Next.js内置图片优化（推荐） #

Next.js 13+的App Router自带next/image组件，原生支持模糊占位符，无需额外依赖第三方包。示例代码：

import Image from 'next/image';

export default function ImageWithPlaceholder() {
  return (
    <Image
      src="/your-image.jpg"
      alt="示例图片"
      width={800}
      height={600}
      placeholder="blur"
      // 可通过sharp自动生成base64占位符，无需手动编写
      blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=="
    />
  );
}

Next.js默认集成了sharp工具，可自动为本地图片生成模糊占位符数据，无需手动处理。

方案2：自定义Webpack配置兼容二进制文件 #

若必须使用lqip-modern，可在next.config.js中添加Webpack规则处理二进制资源：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 添加规则处理图片类二进制文件
    config.module.rules.push({
      test: /\.(png|jpe?g|gif|webp)$/i,
      type: 'asset/resource',
    });
    // 若lqip-modern依赖其他二进制格式，可按需扩展test规则
    return config;
  },
};

module.exports = nextConfig;

注意：该方案可能与Next.js内置图片处理逻辑冲突，需测试验证兼容性。

方案3：替换为纯JS实现的lqip包 #

lqip-modern依赖二进制模块，可改用纯JS实现的lqip包避免解析问题：

# 卸载原包
npm uninstall lqip-modern
# 安装纯JS版本
npm install lqip

使用示例：

import lqip from 'lqip';

async function generateBlurPlaceholder(imagePath) {
  const result = await lqip(imagePath);
  return result.metadata.dataURIBase64;
}

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