Next.js中使用html2canvas报错“不是函数”，如何正确调用？

我之前在Next.js里用html2canvas的时候也踩过这个坑！问题出在dynamic导入默认导出模块的方式上：html2canvas本身是默认导出的函数，但直接用dynamic(() => import('html2canvas'))拿到的是模块的命名空间对象，不是直接可调用的函数，所以才会抛出"不是函数"的错误。

正确的导入方式 #

你需要在dynamic的导入回调里明确获取模块的default导出，这样拿到的才是可以直接调用的html2canvas核心函数：

import dynamic from 'next/dynamic';

// 重点：通过.then(mod => mod.default)提取默认导出
const html2canvas = dynamic(() => import('html2canvas').then(mod => mod.default), {
  ssr: false,
});

完整使用示例 #

另外要注意，html2canvas是纯客户端操作，必须等DOM渲染完成后再调用，比如通过点击事件或者useEffect触发：

import dynamic from 'next/dynamic';
import { useEffect } from 'react';

const html2canvas = dynamic(() => import('html2canvas').then(mod => mod.default), {
  ssr: false,
});

export default function ScreenshotComponent() {
  const takeScreenshot = async () => {
    try {
      // 调用html2canvas生成截图
      const canvas = await html2canvas(document.body);
      // 将生成的canvas添加到页面中
      document.body.appendChild(canvas);
    } catch (err) {
      console.error('截图出错啦:', err);
    }
  };

  // 可选：组件挂载完成后自动触发截图
  useEffect(() => {
    takeScreenshot();
  }, []);

  return (
    <div>
      <h1>测试截图页面</h1>
      <button onClick={takeScreenshot}>点击生成截图</button>
    </div>
  );
}

补充：如果坚持原导入方式的替代写法 #

如果你不想修改导入逻辑，也可以在调用时通过default属性拿到函数：

// 原导入代码
const html2canvas = dynamic(() => import('html2canvas'),{ssr:false})

// 调用时需加.default
html2canvas.default(document.body).then(function(canvas) {
  document.body.appendChild(canvas);
});

不过显然第一种直接提取默认导出的写法更简洁直观。

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