Next.js（App Router）中Jimp导入失败：read函数不是一个函数

核心问题 #

你遇到的报错是因为Jimp的模块导出方式和当前导入逻辑不匹配，再加上Next.js App Router下的组件模式限制，导致无法正确调用read方法。

具体解决步骤 #

• 调整导入方式
  Jimp v1.x+版本采用具名导出而非默认导出，把导入语句改成：

  import { read } from 'jimp';
  

  调用时直接用await read(file)即可。如果用的是v0.x版本，试试全量导入：

  import * as Jimp from 'jimp';
  

  再调用Jimp.read(file)。

• 标记组件为客户端组件
  App Router里的page.tsx默认是服务器组件，但Jimp依赖浏览器环境运行，必须在文件顶部加'use client'指令：

  'use client';
  
  import { read } from 'jimp';
  import { useEffect } from 'react';
  
  export default function Home() {
    useEffect(() => {
      (async () => {
        // 确保file是有效的浏览器File对象
        const img = await read(file);
        // 后续处理逻辑
      })();
    }, []);
  
    return <div>...</div>;
  }
  

• 可选：添加转译配置
  如果上述方法无效，在next.config.js里把Jimp加入转译列表：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    experimental: {
      appDir: true,
    },
    transpilePackages: ['jimp'],
  };
  
  module.exports = nextConfig;
  

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