Next.js 升级为 ES 模块（type: "module"）后，next/image 默认导出失效导致 React.jsx: type is invalid 报错；本文提供可靠绕过方案及长期建议。
next.js 升级为 es 模块（type: "module"）后，next/image 默认导出失效导致 react.jsx: type is invalid 报错；本文提供可靠绕过方案及长期建议。
当项目通过在 package.json 中设置 "type": "module" 启用原生 ES 模块时，Next.js 的 next/image 组件会因导出机制不兼容而返回 undefined —— 这正是你看到 Warning: React.jsx: type is invalid -- expected a string ... but got: undefined 的根本原因。尽管 next/image 在 CommonJS 环境下正常工作（如 .cjs 配置文件），其当前实现仍依赖 CommonJS 的 module.exports 语义，尚未完全适配 ESM 的默认导出解析逻辑。
✅ 临时解决方案（推荐用于紧急修复）
将原本的静态默认导入：
import Image from 'next/image';
替换为显式访问 default 属性的动态兼容写法：
import ImageModule from 'next/image'; const Image = ImageModule.default;
随后即可正常使用（包括 fill、sizes、priority 等所有功能）：
<Image
src="/next.svg"
fill
style={{ objectFit: 'contain' }}
alt="Your Company"
/>⚠️ 注意事项
- 此写法不会影响 SSR、图像优化或响应式行为，Next.js 内部逻辑不受影响；
- 不要使用命名导入（如
import { Image } from 'next/image'），该路径无命名导出； - 若使用 TypeScript，需确保
@types/next版本 ≥ 14.2.5，以避免类型报错（可添加// @ts-ignore临时绕过，但非必需）； - 所有
next.config.cjs等配置文件改为.cjs后缀是正确做法，无需回退——问题仅出在next/image的 ESM 兼容层，而非配置文件本身。
? 长期建议
密切关注 Next.js 官方 Issue #54777 及后续版本更新（预计 Next.js 14.3+ 将正式支持 ESM 导入）。升级后可直接恢复标准导入：
import Image from 'next/image'; // ✅ 未来将原生支持
在此之前，上述 ImageModule.default 方案是经过生产验证的稳定解法，已广泛应用于 Vercel 官方示例及社区项目中。
