Issue when using GitHub actions to deploy Nuxt Build Error: [nuxt:components-loader] [nuxt] ~/app.vue is using NuxtImg which requires @nuxt/image

[craigmpeters]

Nuxt Build Error: [nuxt:components-loader] [nuxt] ~/app.vueis usingNuxtImgwhich requires@nuxt/image``

next.config.js

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {}
    },
  },
  modules: ['@nuxt/content', '@nuxt/image','@vesp/nuxt-fontawesome'],
  routeRules: {
    '/': { prerender: true }
  },
  image: {
    provider: "ipx"
  }
})

package.json

{
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "dependencies": {
    "@nuxt/content": "^3.2.0",
    "@nuxt/image": "^1.7.1",
    "@vesp/nuxt-fontawesome": "^1.2.1",
    "nuxt": "^3.15.4"
  },
  "devDependencies": {
    "@fortawesome/free-brands-svg-icons": "^6.7.2",
    "@fortawesome/free-regular-svg-icons": "^6.7.2",
    "@fortawesome/free-solid-svg-icons": "^6.7.2",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.14"
  }
}

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a template for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/image/tree/main/example

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[craigmpeters]

Reproduction available at https://github.com/craigmpeters/nuxtimg

[craigmpeters]

As a temporary fix I have added a step to add the Nuxt Image module which produced this output:
Run npx nuxi@latest module add image

npm warn exec The following package was not found and will be installed: [email protected]
[info] [ nuxi ] Resolved @nuxt/image, adding module...
[info] [ nuxi ] @nuxt/image is already installed
[info] [ nuxi ] Adding @nuxt/image to the modules
[info] [nuxt] Using 2024-04-03 as fallback compatibility date.
[success] [ nuxi ] Types generated in .nuxt

[Baroshem]

Hey there,

It is really strange. Not sure really what could be an issue as it looks like everything is setup correctly.

I have few clues however:

1. Have you tried removing the nuxt content module? Other packages are mandatory but this one we can try to remove and see if it makes a difference.
2. Not sure about the cache step here https://github.com/craigmpeters/nuxtimg/blob/1d0e83b5abd79f4749f9a1ff2fbc8ecb47b65233/.github/workflows/nuxtjs.yml#L63C1-L71C41. Can you remove it and try without it?