nuxt / nuxt/image

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

Open
#1,706 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

details-needed needs reproduction
Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

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"
  }
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with next.config.js and package.json, then run the listed build script with the shown Nuxt and @nuxt/image configuration. Compare the local build with the GitHub Actions deployment environment; done means the build completes without the NuxtImg component-loader error.

Written by the indexing model from the issue text.

Assessment

Tech stack
github-actions, javascript, nuxt
Domain
ci-cd, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.