Nuxt Icon Request Issue After Deployment

Help
1

Feedback on Vercel Deployment Issue with Nuxt

I am a Chinese user, and my English is not very good. The following issue feedback was translated by AI, so there might be some unclear expressions. Please kindly understand.

Hello,

I encountered an issue while deploying a Nuxt application on Vercel. Here are the details:

Problem Description

In development mode, I used @nuxtjs/dark-mode along with @nuxt/icon to achieve dynamic icon loading. The default configuration of @nuxt/icon was used. Since @nuxtjs/dark-mode requires the use of its built-in component <ColorScheme> in the development environment to avoid hydration issues, I implemented it accordingly. However, after deployment, I faced an issue where the icon requests were failing with a 404 error, and the icons could not be fetched. Interestingly, this issue does not occur when I build and preview the project locally.

Vue Code Snippet

Here is the relevant Vue code:

<template>
  <div class="cursor-pointer opacity-70 transition-opacity hover:opacity-100" @click="handleDark">
    <ColorScheme>
      <Icon v-if="$colorMode.value === 'dark'" name="mingcute:moon-stars-line" size="24"></Icon>
      <Icon v-else name="mingcute:sun-fill" size="24"></Icon>
    </ColorScheme>
  </div>
</template>

<script lang="ts" setup>
const colorMode = useColorMode();

const handleDark = () => {
  colorMode.preference = colorMode.preference === "dark" ? "light" : "dark";
};
</script>

image
image1481×440 23.4 KB

2

Using ColorScheme and ClientOnly resolved the hydration issue, but it did not fix the problem of missing icon requests after deployment on Vercel.
My solution was to ignore the hydration issue and use v-show to control the display instead.
The issue is fixed, but the warnings during development are quite frustrating. Is there a better solution?

3

Hi, @apricityaohan!

Thanks for sharing the details of your issue! I’m glad it is working for you now, but I understand that the warnings can be quite frustrating.

Could you make sure that @nuxt/icon and @nuxtjs/color-mode are properly configured in nuxt.config.ts? Feel free to share what it looks like right now for you. I believe it should look something like:

modules: ['@nuxt/icon', '@nuxtjs/color-mode'],
colorMode: { classSuffix: '' },

For the hydration issues, you could wrap <ColorScheme> in <ClientOnly> to avoid mismatches. Something like:

<ClientOnly>
  <ColorScheme>
    <Icon v-if="$colorMode.value === 'dark'" name="mingcute:moon-stars-line" />
    <Icon v-else name="mingcute:sun-fill" size="24" />
  </ColorScheme>
</ClientOnly>

It might also be worth checking that your local build environment (e.g., Node.js version) matches the production environment on Vercel.

Let us know how you get on!