props breaking when <ClientOnly> and fallback in nuxt production.

[Sandros94]

EDIT:

Original title

unable to use unocss-icons from CDN in nuxt production.

Why it has been updated

Following the discoveries in the comments below (in particular this one and this one), Anu correctly fetches the the icons from the CDN configured inside unocss.config.ts, but more of a problem like:

When using Anu components like ASwitch inside the nuxt's built-in component <ClientOnly> with a #fallback template, some props like off-icon and on-icon don't get correctly updated when the component is fully loaded by the browser (look at the screenshots and descriptions of this event in the comments linked earlier).

Original description

I was testing stuff for #154 (I'm using that stackblitz reproduction) and I've noticed that when I use unocss icons from CDNs they don't get applied to Anu's components while in production.

dev (npm run dev):

production (npm run build && npm run preview):

TBH I've still never tried Anu in production, so Idk if this was existing before v0.13.0

[jd-solanki]

Hi, @Sandros94 I tried Anu demo repo in production and it's working as expected. Can you please share your repo?

[Sandros94]

Just woke up, but in the demo repo I can see that none of the icons comes from CDN.

I'll update my test repo in a bit.

[Sandros94]

Ok I've prepared a reproduction in my test repo under Anu branch.

Pull it, then npm i && npm run build && npm run preview

The key factor is that I'm pulling the icons from a cdn instead of installing them as packages:

https://github.com/Sandros94/test-nuxt3app/blob/ef447e42a721391562875efefc043368b818439b/unocss.config.ts#LL23C9-L31C12

[jd-solanki]

Hey @Sandros94

Can you please add lock file to your test repo? I'm getting errors due to missing lock file.

Awaiting your response.

[jd-solanki]

Moreover, if possible can you please check if you are facing the same with unocss only (without anu)?

[Sandros94]

Once I get back home I'll push that specific lockfile.

Moreover, if possible can you please check if you are facing the same with unocss only (without anu)?

I didn't test unoccs only in that repo, but two notes about it:

• in other repos, where I do have unocss only with the same test config (minus anu oc), I've never faced something similar.
• In the second screenshot you can see the icon on the left that is just inside a div, and works correctly after build, so I cannot imagine how could it be unocss

[Sandros94]

Lock file pushed

[Sandros94]

While fixing a small error (the clock icon was white on white for the light theme), it made me discover a thing.

To solve #135 I decided to implement this:

<template>
    <ClientOnly>
        <template #fallback>
            <ASwitch v-model="off" off-icon="i-svg-spinners:clock"/>
        </template>
        <ASwitch v-model="switchTheme" off-icon="i-ph:sun" on-icon="i-ph:moon"/>
    </ClientOnly>
</template>

<script setup>
const colorMode = useColorMode();
const off = ref(false)
const switchTheme = computed({
    get: () => colorMode.value === 'dark',
    set: (value) => {
        if (colorMode.preference === 'system') {
            // Set the opposite of the current system value
            colorMode.preference = value ? 'dark' : 'light';
        } else {
            // Set the preference back to 'system'
            colorMode.preference = 'system';
        }
    }
});
</script>

and as described in the closing comment of that issue I had to use the built-in <ClientOnly> nuxt component to make ASwitch load its state correctly since I couldn't know until the browser fully loaded the page. But I wanted to add the fallback so that the switch didn't just appear from nowhere.

Here is my discovery

on npm run build, while the component is still on server side, it correctly loads as:

<template>
    <ASwitch v-model="off" off-icon="i-svg-spinners:clock"/>
</template>

but once it gets loaded in a browser (and thus get the information of the current theme), it should become:

<template>
    <ASwitch v-model="switchTheme" off-icon="i-ph:sun" on-icon="i-ph:moon"/>
</template>

but instead it becomes:

<template>
    <ASwitch v-model="switchTheme" off-icon="i-svg-spinners:clock"/>
</template>

Basically when it switches from the fallback to the working one, it does not update the props too, but works correctly because it is using the right v-model.

Current considerations

Later I'll update the test page in demo-branch with all three switch combination and create a new reply in this issue, to better describe what they are and potentially close this issue (or at least update the title). Because now I have come to the conclusion that yes, Anu is indeed using the unocss-icons from CDN, but it gets broken along the way once you use them in the built-in <ClientOnly> nuxt component when used with a fallback.

[jd-solanki]

Due to some issues, action wasn't able to make a edge release to test the latest release I said about. I will let you know once edge release will continue to work.

[Sandros94]

I've updated the /test-page in the demo-repo.
Now it displays all 3 combination for ASwitch with and without the <ClientOnly> nuxt component.

As you can see in the screenshots below, if you forcefully reload the page (ctrl/cmd+shift+R):
browser with light theme:

browser with dark theme:

The following happens:

1. the non-<ClientOnly> switch doesn't go to the proper state (but it is working correctly if clacked).
2. the <ClientOnly> switch does work as it should, but doesn't exists server side, so it only appears when the page is fully loaded client side.
3. the <ClientOnly> + fallback prevents the appearance but the props for defining the icons get lost.

[Sandros94]

I started a discussion in the Nuxt repo.
Maybe it's not an Anu issue at all.

[jd-solanki]

Hey @Sandros94

What's the status of this issue? Did you manage to resolve the issue?

[Sandros94]

Unfortunately I haven't, and by the looks of it it seems that the nuxtlab team is busy with other developments.

One thing I wanted to try was to add a key prop to both, so that I could force vue to distinguish the main element from the fallback one.