启用ES6模块后Next.js Image组件出现React.jsx类型无效错误

问题原因 #

在package.json中添加"type": "module"强制启用ES模块后，Next.js的模块解析逻辑发生变化，导致原本的默认导入import Image from "next/image"无法正确获取到Image组件（返回undefined），进而触发组件类型无效的报错。

解决步骤 #

• 切换为命名导入
  将导入语句从默认导入改为命名导入：

  import { Image } from "next/image";
  

  部分Next.js版本在ES模块模式下，Image组件是以命名导出而非默认导出的形式提供的。

• 升级Next.js到最新稳定版
  旧版本Next.js对ES模块的兼容性存在缺陷，升级到最新版本可修复这类模块导出/导入的适配问题。执行命令：

  npm install next@latest
  # 或 yarn add next@latest
  # 或 pnpm add next@latest
  

• 清理缓存并重新构建
  缓存可能残留旧的模块解析信息，按以下步骤操作：

  1. 删除项目根目录下的.next文件夹
  2. 删除node_modules文件夹
  3. 重新安装依赖并启动项目：

     npm install && npm run dev
     

• 检查模块解析配置（若使用TypeScript/JSConfig）
  在tsconfig.json或jsconfig.json中，确保配置与ES模块模式匹配：

  {
    "compilerOptions": {
      "module": "ESNext",
      "moduleResolution": "NodeNext",
      "target": "ESNext"
    }
  }
  

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