LaTeX in MD files ?

[arkhaiel]

trafficstars

Environment

• Operating System: Darwin
• Node Version: v19.2.0
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: [email protected]
• Builder: vite
• User Config: content, extends, css
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-uqq9ly?file=nuxt.config.ts

Describe the bug

I can't use LaTeX, looks like something is wrong, but beyond my understanding !

Additional context

First I tried with my Docus website, and the minimal example only relies on nuxt content.

Logs

Nuxi 3.0.0                                                                                      15:10:46
Nuxt 3.0.0 with Nitro 1.0.0                                                                     15:10:46
                                                                                                15:10:47
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.1.104:3000/

✔ Nitro built in 1200 ms                                                                  nitro 15:10:54
ℹ Vite client warmed up in 4532ms                                                               15:10:54
[Vue warn]: Failed to resolve component: semantics                                              15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: mrow                                                   15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: mi                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: annotation                                             15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: mo                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: mn                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: msub                                                   15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Semantics                                              15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mrow                                                   15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mi                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Annotation                                             15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Semantics                                              15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mrow                                                   15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mo                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mn                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Msub                                                   15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mo                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mn                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Annotation                                             15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: semantics                                              15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: mrow                                                   15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: mi                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: annotation                                             15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: mo                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: mn                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: msub                                                   15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Semantics                                              15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mrow                                                   15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mi                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Annotation                                             15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Semantics                                              15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mrow                                                   15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mo                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mn                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Msub                                                   15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mo                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Mn                                                     15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Annotation                                             15:10:57
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

[arkhaiel]

Ok small update, this issue is split in 2 :

• the "not working" was in fact "works but there's a mistake" and did come from the HTML property aria-hidden="true" added to the not rendered plain text LaTeX code. Following W3 advice, I added this line in my CSS file and it works : [aria-hidden="true"] { display: none; } This part of the bug wasn't nuxt-related
• I still have the Vue warns though. Since a LaTeX element HTML code contains a bunch of <mo>, <mn> and other stuff HTML tags to be rendered by rehype-katex (if I understand good), Vue looks for these components. I tried adding this code in my nuxt.config.ts but it looks like it doesn't change anything, as I still have all these Vue warns.

  vue: {
    compilerOptions: {
      isCustomElement: (tag) => {
        return ['semantics', 'mo', 'mi', 'mn', 'msub', 'annotation'].includes(tag.toLowerCase())
      }
    }
  }

I also tried to pass this option after reading this :

  vite: {
    vue: {
      exclude (or customElement): ['semantics', 'mo', 'mi', 'mn', 'msub', 'annotation']
    }
  }

Still the warnings. Any clue ? I spent hours on this, I think I understand Vue tries to resolve the components used by katex to render LaTeX expressions, I just don't understand why it keeps trying despite my isCustomElement option. I tried to put this option in config.vue.compilerOptions, in config.vite.vue.(template.)compilerOptions, in webpack.loaders.vue.compilerOptions, and I feel so clueless now... I know these are just warns, but since I understand why they're here I'd like to solve them.

Thanks

[arkhaiel]

Well, nope, ignore my precedent message. A lot of tests, a lot of fails, few things that could look like solutions were actually dirty fixes that don't even work in all pages.

Using LaTeX the way I did doesn't work. And I would like to know how I can, but it looks like nobody here use LaTeX in its Nuxt Content website.

[arkhaiel]

I managed to understand my error. To add LaTeX support to Nuxt Content : npm i --save-dev remark-math rehype-katex

in nuxt.config.ts:

  app: {
    head: {
      link: [{
        rel: 'stylesheet',
        href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css'
      }]
    }
  },
  content: {
    markdown: {
      remarkPlugins: [
        'remark-math'
      ],
      rehypePlugins: [
        'rehype-katex'
      ]
    }
  }

There's one issue remaining : the vue warns that say, for components semantics, mrow, msup, mi, annotation, Semantics, Mrow, Mi, Msip, Annotation and probably all other mathml tags that would be needed :

[Vue warn]: Failed to resolve component: Annotation
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

The HTML code that causes the warns :

<span class="katex-mathml">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <semantics>
      <mrow>
        <msup>
          <mi>e</mi><mi>x</mi>
        </msup>
      </mrow>
      <annotation encoding="application/x-tex">e^x</annotation>
    </semantics>
  </math>
</span>

I tried multiple solutions and this one should work :

  vue: {
    compilerOptions: {
      isCustomElement: tag => {
        const arrTags = ['semantics', 'mrow', 'msup', 'mi', 'math']
        const answ = arrTags.indexOf(tag.toLowerCase()) !== -1
        console.log(tag+' :: '+ answ)
        return answ
      }
    }
  }

but the tags that cause the warns are never prompted in the logs, so that means the errors come from elsewhere, not from this point of the runtime. Maybe from the client side ? That means I should put this code elsewhere, but I don't know where !

So, now it works, and I just would like to remove the warns.

[garyo]

I'm having the same issue. Getting many "Failed to resolve component" warnings during build. But the result does work.

[robert-moore]

Same for me

[Benbinbin]

I aslo make my blog support the latex by adding the remark-math plugin, and encounter this problem

refer to Vue documentation the vue.compilerOptions.isCustomElement maybe just work for the in-browser compilation

so I also set the custom elments in vite option too

export default defineNuxtConfig({
  vite: {
    vue: {
      template: {
        compilerOptions: {
          isCustomElement: (tag: string) => {
            // because the math formula render as HTML and Mathml
            // Vue will try to parse them as component and cause warning
            // so here set them as native custom elements
            // refer to https://vuejs.org/guide/extras/web-components.html
            // refer to https://developer.mozilla.org/en-US/docs/Web/MathML/Element
            const mathElementArr = ['math', 'maction', 'annotation', 'annotation-xml', 'menclose', 'merror', 'mfenced', 'mfrac', 'mi', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mprescripts', 'mroot', 'mrow', 'ms', 'semantics', 'mspace', 'msqrt', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover', 'Math', 'Maction', 'Annotation', 'Annotation-xml', 'Menclose', 'Merror', 'Mfenced', 'Mfrac', 'Mi', 'Mmultiscripts', 'Mn', 'Mo', 'Mover', 'Mpadded', 'Mphantom', 'Mprescripts', 'Mroot', 'Mrow', 'Ms', 'Semantics', 'Mspace', 'Msqrt', 'Mstyle', 'Msub', 'Msup', 'Msubsup', 'Mtable', 'Mtd', 'Mtext', 'Mtr', 'Munder', 'Munderover']

            const isMathElement = mathElementArr.includes(tag)
            return isMathElement
          }
        }
      }
    }
  },
})

but it can't work too, maybe something wrong with my configuration?

[Benbinbin]

A tricky solution to remove the annoying warning message is preventing the MathML to render

set the output option for rehype-katex plugin

export default defineNuxtConfig({
  content: {
    markdown: {
      remarkPlugins: ['remark-math'],
      rehypePlugins: {
        'rehype-katex': {
          output: 'html' // the default value is 'htmlAndMathml'
        }
      }
    },
  }
})

But in my project, I like to use the default value htmlANdMathml, because the Mathml <annotation> contain the formula text content, so I can make a feature for user to copy the formula from the web page by double click the formula,

[Benbinbin]

I find this pull request, maybe Vue will support MathML soon!

Wait for it :grinning:

[data-miner00]

I'm having the same issue, for a very long time. If you pass in a console.log to the isCustomElement, you will see all sorts of regular HTML tags but not the one that its complaining.

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag: string) => {
        console.log(tag); // prints nothing that it is complaining
        return ["mjx-container", "MjxContainer", "G", "Use", "Defs"].includes(
          tag
        );
      },
    },
  },
});