Next.js 13使用next/image时出现TypeError: Cannot read properties of undefined (reading 'call')

针对你遇到的Cannot read properties of undefined (reading 'call')错误，以下是具体修复步骤：

1. 升级Next.js版本 #

你当前使用的next@13.0.7是App Router刚推出时的beta版本，存在大量已知兼容性bug。直接升级到最新稳定版：

npm install next@latest

2. 确保next.config.js配置完整 #

检查你的配置文件是否为标准导出结构，避免片段式配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['i.ibb.co'],
  },
  experimental: {
    appDir: true,
  },
};

module.exports = nextConfig;

3. 清理缓存并重启服务 #

升级或修改配置后，清理缓存避免旧文件干扰：

# 删除缓存和依赖文件
rm -rf .next node_modules package-lock.json
# 重新安装依赖
npm install
# 重启开发服务
npm run dev

4. 验证Image组件使用 #

确认Image组件的导入和属性设置无误，也可以尝试使用fill属性配合父容器定位的写法：

import Image from "next/image";

function Header() {
  return (
    <header>
      <div style={{ position: "relative", width: 50, height: 10 }}>
        <Image 
          src="https://i.ibb.co/LhMfkJw/logo-Meta.png" 
          alt="Logo" 
          fill 
          style={{ objectFit: "contain" }} 
        />
      </div>
    </header>
  );
}

export default Header;

（保留原width和height属性的写法也支持，两种方式均可）

如果以上步骤仍未解决问题，可以临时用原生<img>标签替代测试，排除图片URL或域名配置问题。

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