Nuxt•2mo ago

Cannot read properties of undefined (reading 'createElement') when call message.error

i just want to call antdesign-vue message.error when api returns error. code here:

import { message} from 'ant-design-vue'

export default defineNuxtPlugin((nuxtApp) => {
    const api = $fetch.create({
        baseURL: "***",
        onRequest({ request, options, error }) {
            ....
        },
        async onResponse({ response, options }) {
            ...
            try{
                const j = response._data as {
                    code: number,
                    message: string,
                    data: any,
                    error: string,
                };
                if(j.code == 0) {
                    return
                }
                message.error(j.message ?? 'custom_error_here')
            }catch(e: any){
            }
        },
    });

    // Expose to useNuxtApp().$api
    return {
        provide: {
            api,
        },
    };
});

import { message} from 'ant-design-vue'

export default defineNuxtPlugin((nuxtApp) => {
    const api = $fetch.create({
        baseURL: "***",
        onRequest({ request, options, error }) {
            ....
        },
        async onResponse({ response, options }) {
            ...
            try{
                const j = response._data as {
                    code: number,
                    message: string,
                    data: any,
                    error: string,
                };
                if(j.code == 0) {
                    return
                }
                message.error(j.message ?? 'custom_error_here')
            }catch(e: any){
            }
        },
    });

    // Expose to useNuxtApp().$api
    return {
        provide: {
            api,
        },
    };
});

5 Replies

kapa.ai•2mo ago

Hi @Jesen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error Cannot read properties of undefined (reading 'createElement') when calling message.error from ant-design-vue inside a Nuxt plugin is likely due to the fact that the plugin code is being executed on the server side, where the DOM and browser APIs (like document.createElement) are not available. The ant-design-vue message component is intended for client-side use only. How to fix: You should ensure that message.error is only called on the client side. In Nuxt, you can check if your code is running on the client by using process.client (Nuxt 2) or import { isClient } from '#imports' (Nuxt 3/4). Since your code is for Nuxt 3/4, you can use:

import { isClient } from '#imports'
import { message } from 'ant-design-vue'

export default defineNuxtPlugin((nuxtApp) => {
  const api = $fetch.create({
    baseURL: "***",
    async onResponse({ response, options }) {
      try {
        const j = response._data as {
          code: number,
          message: string,
          data: any,
          error: string,
        };
        if (j.code == 0) {
          return
        }
        if (isClient) {
          message.error(j.message ?? 'custom_error_here')
        }
      } catch (e: any) {
      }
    },
  });

  return {
    provide: {
      api,
    },
  };
});

import { isClient } from '#imports'
import { message } from 'ant-design-vue'

export default defineNuxtPlugin((nuxtApp) => {
  const api = $fetch.create({
    baseURL: "***",
    async onResponse({ response, options }) {
      try {
        const j = response._data as {
          code: number,
          message: string,
          data: any,
          error: string,
        };
        if (j.code == 0) {
          return
        }
        if (isClient) {
          message.error(j.message ?? 'custom_error_here')
        }
      } catch (e: any) {
      }
    },
  });

  return {
    provide: {
      api,
    },
  };
});

This ensures that message.error is only called in the browser, preventing the server-side error. Summary:
- The error occurs because ant-design-vue's message API requires the DOM, which is not available on the server. - Use isClient to guard client-only code in your Nuxt plugin. The knowledge sources do not explicitly mention this specific error with ant-design-vue, but they do explain that plugins run on both server and client, and you should check before using anything dependent on browser APIs or plugins that require the DOM, especially in error handling contexts Nuxt 4 Error Handling. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@719216962462548022> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

JesenOP•2mo ago

@kapa.ai isClient is always false. nuxt4.

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources provided do not contain explicit information about the isClient utility or its behavior in Nuxt 3/4, nor do they mention that isClient is always false. The official documentation does not reference isClient as a recommended approach for client-only code in plugins. However, the sources do show that to check for client-side execution, you can use import.meta.client within your code. For example, in the context of error boundaries and plugin setup, the following pattern is used:

onErrorCaptured((err) => {
  if (import.meta.client && !nuxtApp.isHydrating) {
    // client-side only logic
  }
})

onErrorCaptured((err) => {
  if (import.meta.client && !nuxtApp.isHydrating) {
    // client-side only logic
  }
})

Nuxt 3 useNuxtApp isHydrating So, instead of isClient, you should use import.meta.client to ensure your code only runs on the client side:

if (import.meta.client) {
  message.error(j.message ?? 'custom_error_here')
}

if (import.meta.client) {
  message.error(j.message ?? 'custom_error_here')
}

This approach is documented and supported in Nuxt 3/4. If you continue to experience issues, please ensure your plugin is not being executed during server-side rendering, or wrap your client-only logic as shown above. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@719216962462548022> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Cannot read properties of undefined (reading 'createElement') when call message.error

Did you find this page helpful?