NuxtImg: WARN Overriding NuxtImg component.

[castrogarciajs]

Hello team,

I get this warning in the console when using the NuxtImg component but I can't understand what it means.

info of nuxt:

• Operating System: Linux
• Node Version: v20.9.0
• Nuxt Version: 3.8.0
• CLI Version: 3.9.1
• Nitro Version: 2.7.0
• Package Manager: pnpm@8.9.2
• Builder: -
• User Config: app, devtools, modules, css, ui, colorMode, postcss
• Runtime Modules: @nuxt/ui@2.9.0, @nuxt/image@1.0.0
• Build Modules: -

---

[10:40:23 AM]  WARN  Overriding NuxtImg component. You can specify a priority option when calling addComponent to avoid this warning.

[10:40:23 AM]  WARN  Overriding NuxtPicture component. You can specify a priority option when calling addComponent to avoid this warning.

[cdwmhcc]

same

[castrogarciajs]

[rcluis]

same

[andrzejkupczyk]

I've come here to report the same issue, as it might be the reason for the changes in image size when refreshing the page 🤔

[dam-orzel]

I fix it by moving devtools: { enabled: true } on top of the defineNuxtConfig and moving image object to bottom

export default defineNuxtConfig({
devtools: { enabled: true },
modules: ['@formkit/nuxt', "@nuxt/image"],
formkit: {
autoImport: true
},
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/scss/variables" as *;',
},
},
},
},
css: ["@/assets/scss/main.scss"],
image: {
provider: "ipx",
presets: {
default: {
modifiers: {
format: "webp",
loading: "lazy",
quality: "100",
},
},
svg: {
modifiers: {
format: "svg",
loading: "lazy",
quality: "100",
},
},
},
},
})

[duongxinh2003]

I had the same problem

[rahulkumarsingh73690]

+1

[oemer-aran]

I feel like this project is kind of abandoned even though it's an official package and pretty new. Most of the issues have zero answers.

[oemer-aran]

I fix it by moving devtools: { enabled: true } on top of the defineNuxtConfig and moving image object to bottom

Oddly enough the answer from @dam-orzel seems to fix the issue for me too.

Note: Since Nuxt 3.8 devtools is enabled by default. If you add the devtools config at the top of the nuxt.config.ts and enable it manually, the warning will disappear.

export default defineNuxtConfig({
  devtools: { enabled: true },
  // ..
  image : { /* ... */ }
})

[andrzejkupczyk]

I plan to give it another try, as my previous attempt was unsuccessful 😬 Thank you both!

It's worth noting that the package is licensed under MIT, which means it's provided without warranty. Rather than assuming it's abandoned, let's explore the code ourselves and be patient.

[netopolit]

I have the same issue and have never added Nuxt UI to my project. The problem started after I updated Nuxt to 3.8.0. and it's still there on 3.8.2.

[andrzejkupczyk]

Same. However, I think it is related somehow, as Nuxt DevTools uses @nuxt/devtools-ui-kit (https://devtools.nuxt.com/module/ui-kit) 🤔 Thanks @castrogarciajs!

[muhammadmahmoud98]

I have the same issue with nuxt 3.8.2 and @nuxt/image 1.1.0.
Adding devtools: { enabled: true } to the top of nuxt.config hides the warnings when starting dev server but appear again when saving files

[AloisSeckar]

I even tried to set devtools: { enabled: false }, but I am keep getting the warnings upon saving files with dev server running 🤨

But not all files, only /composables and /utils it seems

Since I have no direct dependency on @nuxt/ui, I also tried "overrides" : { "@nuxt/ui" : "latest" }" to force last version in package-lock.json and a fresh npm install, but it didn't help either.

Last but not least I updated all my dependencies to latest versions available. The problem is still there.

------------------------------
- Operating System: Windows_NT
- Node Version:     v18.14.0
- Nuxt Version:     3.8.2
- CLI Version:      3.10.0
- Nitro Version:    2.8.1
- Package Manager:  npm@9.4.2
- Builder:          -
- User Config:      ssr, devtools, modules, runtimeConfig, image, supabase
- Runtime Modules:  @vueuse/nuxt@10.7.0, @nuxt/image@1.1.0, @nuxtjs/i18n@8.0.0-rc.11, @nuxtjs/supabase@1.1.4, @nuxtjs/tailwindcss@6.10.1, @formkit/nuxt@1.4.0, @pinia/nuxt@0.5.1
- Build Modules:    -
------------------------------

"devDependencies": {
    "@formkit/nuxt": "1.4.0",
    "@nuxt/image": "1.1.0",
    "@nuxtjs/eslint-config-typescript": "12.1.0",
    "@nuxtjs/i18n": "8.0.0-rc.11",
    "@nuxtjs/supabase": "1.1.4",
    "@nuxtjs/tailwindcss": "6.10.1",
    "@pinia/nuxt": "0.5.1",
    "@vueuse/core": "10.7.0",
    "@vueuse/nuxt": "10.7.0",
    "eslint": "8.55.0",
    "infinitimeline": "0.4.0",
    "nuxt": "3.8.2",
    "openapi-typescript": "5.4.1",
    "pinia": "2.1.7",
    "supabase": "1.123.4",
    "tailwindcss": "3.3.6"
}

[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

[DamianGlowala]

https://stackblitz.com/edit/github-znuutj?file=composables%2FuseTest.ts

1. Launch dev server.
2. Try editing anything within the useTest composable.

[SDIjeremy]

any update on this?

[miztizm]

[15:03:50]  WARN  Overriding NuxtImg component. You can specify a priority option when calling addComponent to avoid this warning.
[15:03:50]  WARN  Overriding NuxtPicture component. You can specify a priority option when calling addComponent to avoid this warning.

How to investigate or debug it?

[Hecatron]

I've just tried this under windows and linux and the issue is still there even after the above patch
For a reproduction

npx nuxi@latest init docs -t themes/docus
cd docs
pnpm install --shamefully-hoist
pnpm add @nuxt/image

then just add '@nuxt/image' to the modules section
as soon as you load the page it comes up with Overriding NuxtImg component. You can specify a priority option when calling addComponent to avoid this warning.

[danielroe]

The fix is released in the latest version of Nuxt Kit but other modules may be using older versions. Try adding a resolution or override to pin the kit version to the latest one.

[onurusluca]

Also having this with shadcn-vue

[11:08:09]  WARN  Overriding Toaster component. You can specify a priority option when calling addComponent to avoid this warning.


[11:08:09]  WARN  Overriding Calendar component. You can specify a priority option when calling addComponent to avoid this warning.

Edit:
It looks like shadcn has 2 different components with the same name and Nuxt autoimport is trying to import these with different names so it shows errors.

[AlvinWang627]

Also having this with shadcn-vue

[11:08:09]  WARN  Overriding Toaster component. You can specify a priority option when calling addComponent to avoid this warning.


[11:08:09]  WARN  Overriding Calendar component. You can specify a priority option when calling addComponent to avoid this warning.

I've got this warning too in nuxt3.
I removed this code from nuxt.config.ts.
The warn will disappear.

  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: "",
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: "./components/ui",
  },

[danielroe]

@AlvinWang627 Would you open a new issue with a reproduction? 🙏

[AlvinWang627]

@AlvinWang627 Would you open a new issue with a reproduction? 🙏

I found the error, it's my problem.

I put shadcn.ts in the modules folder and also put it in nuxt.config.ts.
So I import shadcn modules twice.

[gregmsanderson]

For anyone else getting this kind of error

[11:08:09]  WARN  Overriding Toaster component. You can specify a priority option when calling addComponent to avoid this warning.


[11:08:09]  WARN  Overriding Calendar component. You can specify a priority option when calling addComponent to avoid this warning.

... and finding neither of the above solutions work, I realised that it can be caused by actual duplication. Despite the shadcn-vue component names being different, its calendar and v-calendar both export Calendar, and sonner and toast both export Toaster. For a demo I installed all the shadcn-vue components using their CLI, and hence got that error from that duplication.

The solution was simply to delete one from each.