Nuxt3升级@nuxt/image模块时构建报错问题求助

问题根源 #

该错误源于ES模块严格解析规则：当模块为严格ESM格式（如.mjs文件或package.json声明"type": "module"）时，导入必须指定完整文件扩展名。同时你的Nuxt 3.1.1版本较旧，与最新版@nuxt/image存在兼容性不匹配问题。

解决方案 #

1. 安装适配当前Nuxt版本的@nuxt/image #

最新版@nuxt/image（v1.x+）要求Nuxt 3.8及以上版本，针对你的Nuxt 3.1.1，需安装兼容的旧稳定版：

# npm
npm install @nuxt/image@0.7.1 --save-dev

# yarn
yarn add @nuxt/image@0.7.1 --dev

# pnpm
pnpm add @nuxt/image@0.7.1 --save-dev

2. 清理缓存并重新安装依赖 #

残留缓存可能导致模块解析异常，执行以下命令：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml

# 重新安装依赖
npm install

# 清理Nuxt构建缓存
npx nuxi clean

3. 核对nuxt.config.ts配置 #

确保配置中无@nuxt/image-edge残留内容，稳定版基础配置示例：

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  // 若需自定义图片提供者，参考官方格式配置
  image: {
    providers: {
      ipx: {
        provider: '@nuxt/image/provider/ipx'
      }
    }
  }
})

4. 修复自定义代码中的导入路径 #

若项目中直接引用了@nuxt/image内部模块，需改用官方暴露的标准导入方式，避免直接引用内部路径：

// 错误写法：直接引用内部未指定扩展名的路径
// import { useImage } from '@nuxt/image/dist/runtime/composables'

// 正确写法：使用Nuxt提供的别名导入
import { useImage } from '#nuxt/image'

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