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[bot]]

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?

[dkacha]

@craigmpeters Replace your current workflow with this:

name: Deploy Nuxt site to Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: macos-latest # or ubuntu-latest if you prefer
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "22"
          cache: "npm"

      - name: Install dependencies
        run: npm install

      - name: Static HTML export with Nuxt
        run: npm run generate

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

You don’t need configure-pages@v5 at all — it breaks nuxt.config.ts parsing, especially if you're using TypeScript or any advanced modules like @nuxt/image.

[MrSunshyne]

Thanks for the tip @dkacha , removing the configure-pages@v5 helped me overcome the same issue 🙏