[For SSR] Failed to resolve components from katex tag names such as ('mo', 'mi', 'msqrt') and resulted a Hydration mismatch

[Etavioxy]

Describe the bug

I am working on a vite-ssr project according vite-plugin-ssr vue guide and encountered the bug.

[Vue warn]: Failed to resolve component: mi
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Index id="index" > 
  at <Index.page id="index" > 
  at <GlobalPageShell > 
  at <App>
[Vue warn]: Failed to resolve component: mo
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Index id="index" > 
  at <Index.page id="index" > 
  at <GlobalPageShell > 
  at <App>
...
[Vue warn]: Hydration node mismatch:
- Client vnode: math 
- Server rendered DOM: <!---->  
  at <Index id="index" > 
  at <Index.page id="index" > 
  at <GlobalPageShell > 
  at <App>
[Vue warn]: Hydration node mismatch:
- Client vnode: math 
- Server rendered DOM: <!---->  
  at <Index id="index" > 
  at <Index.page id="index" > 
  at <GlobalPageShell > 
  at <App>
...
Hydration completed but contains mismatches.

Is there any way to avoid resolve katex tags?

---

My inplemetation is here

The server render and client render using the same function importMd.

import { PageContextServer } from '../types'
import { h } from 'vue'

export { importMd }

async function importMd(url: string, pageContext: PageContextServer) {
  let component = await import(`../../assets/${url}.md`);
  const { pageProps } = pageContext
  return h(component.default, pageProps || {})
}

// index.page.client.ts render()
export { render }

import type { PageContextClient } from '@/types'
import { createApp } from '@/app'

import type { PageContextBuiltIn } from 'vite-plugin-ssr/types'
import { importMd } from '@/utils/renderMarkdown'

async function render(pageContext: PageContextClient) {
  const { Page, pageProps } = pageContext
  const { id } = pageProps
  const html = await importMd(id, pageContext)
  pageContext.markdownHTML = html
  const app = createApp(Page, pageProps, pageContext)
  app.mount('#app')
}

// index.page.server.ts render()
import type { PageContextBuiltIn } from 'vite-plugin-ssr/types'
import { importMd } from '@/utils/renderMarkdown'

export { onBeforeRender }

async function onBeforeRender(pageContext: PageContextBuiltIn) {
  const { id } = pageContext.routeParams
  const html = await importMd(id, pageContext)
  return {
    pageContext: {
      markdownHTML: html,
      pageProps: {
        id
      }
    }
  }
}

For Reproduction:

The repository is saved on gitlab instance in my school and may have unstable network access. I could upload it to github if needed

Reproduction

https://git.halzi.one:8929/Etavioxy/wiki-web

System Info

System:
    OS: Linux 6.5 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 4800U with Radeon Graphics
    Memory: 5.29 GB / 14.99 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.8.1 - /usr/bin/node
    npm: 10.2.1 - /usr/bin/npm
    pnpm: 8.6.12 - ~/.local/share/pnpm/pnpm

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[meteorlxy]

See https://vuejs.org/api/application.html#app-config-compileroptions-iscustomelement

You can mark those tags as custom element to avoid the warning