onResponseError element-plus el-notification bug

[arnauddoub]

Environment

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.4
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: css, build
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-38hauf?file=composables/useApi.ts

Describe the bug

Hello, in the header I get a null user but if i comment ElNotification which is in onResponseError of useApi.ts i get my user in the header. I don't understand why. (sorry for my English)

Additional context

dependency element-plus 2.2.6

Logs

No response

[huang-julien]

check your console, there's a hydration node mismatch. AppHeader has null as user prop value client side

[arnauddoub]

@huang-julien but why I don't have this hydration node mismatch if I removeElNotification in useApi.ts ?

[huang-julien]

i'm not familiar with element-plus but ElNotification might need to be wrapped with if (process.client), some libraries or plugins are not compatible with the node environement (ssr). Triggering client side only compatible code server-side can easily trigger hydration issues

[arnauddoub]

i have wrapped with if (process.client) stackblitz but same error

[huang-julien]

@arnauddoub
useApi.ts

import { ElNotification } from 'element-plus';

interface ResponseError {
  response: { status: number; _data?: any };
}

export async function useApi<Type>(
  request: string | (() => string),
  options: any = {}
) {
  const { accessToken } = useAuth();

  if (accessToken.value) {
    options.headers = {
      Authorization: `Bearer ${accessToken.value}`,
    };
  }

  options.onResponseError = async ({ response }: ResponseError) => {
    if (response.status === 400) {
      if (process.client) {
        ElNotification({
          title: 'Erreur',
          message: response._data?.message,
          type: 'error',
        });
      }
    }
  };

  return useAsyncData<Type>("key", async () => {return await $fetch(request, {
    ...options,
  })});
}

[danielroe]

This is a common SSR gotcha. The issue is that on SSR, Vue renders the HTML from top to bottom, outside to inside. And if you only fetch the user as you are rendering the 'inner' part of the page, it doesn't rerender the layout at the top of the page. (On client-side it's fine as can be reactive.) So if you have a common piece you rely on for rendering your page, make sure to fetch it in the layout, a plugin, or a middleware - somewhere outside of the rendering process.

[arnauddoub]

If people are interested, with this code I can have the notifications and the user in async in the layout stackblitz