Node-Canvas ES模块导入问题：开发与生产环境差异排查

方案1：检查package.json模块类型配置 #

• 确认项目根目录package.json的type字段：
  • 若设置了"type": "module"（ES模块项目），尝试导入canvas的明确ES模块入口：

    import { createCanvas, loadImage, Image } from "canvas/lib/index.js";
    

  • 若为CommonJS项目，移除"type": "module"，或改用require导入：

    const { createCanvas, loadImage, Image } = require("canvas");
    

方案2：重新安装canvas并补全系统依赖 #

AWS Linux环境缺少canvas编译所需的底层依赖，是导致包安装不完整、出现MODULE_NOT_FOUND的常见原因：

• 先卸载现有canvas包：

  npm uninstall canvas
  

• 安装Amazon Linux系统依赖：

  sudo yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel
  

• 强制在当前环境编译安装canvas：

  npm install canvas --build-from-source
  

方案3：调整导入路径为具体文件 #

避免直接导入canvas目录，指定包内的明确入口文件：

// 优先使用标准导入
import { createCanvas, loadImage, Image } from "canvas";
// 若标准导入失败，尝试指定CommonJS入口
import { createCanvas, loadImage, Image } from "canvas/dist/index.cjs";

方案4：对齐Node.js版本 #

• 检查AWS Linux与macOS开发环境的Node.js版本是否一致：

  node -v
  

• 版本差异可能导致模块解析逻辑冲突，使用nvm等工具切换至与开发环境相同的Node.js版本。

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