MathML cause built time error

Mister-Hope

May 9th 2021

Version

3.0.11

Reproduction link

https://codesandbox.io/s/boring-cannon-v67q8

Steps to reproduce

A mininalr reproduction link is provided

What is expected?

No errors in console. DO not treat mathml as custom elements

What is actually happening?

Warnings appear in console.

[Vue warn]: Failed to resolve component: mi 
  at <HelloWorld msg="Hello Vue 3 in CodeSandbox!" > 
  at <App> 
[Vue warn]: Failed to resolve component: mrow 
  at <HelloWorld msg="Hello Vue 3 in CodeSandbox!" > 
  at <App> 
[Vue warn]: Failed to resolve component: msup 
  at <HelloWorld msg="Hello Vue 3 in CodeSandbox!" > 
  at <App> 
[Vue warn]: Failed to resolve component: mo 
  at <HelloWorld msg="Hello Vue 3 in CodeSandbox!" > 
  at <App> 
[Vue warn]: Failed to resolve component: mn 
  at <HelloWorld msg="Hello Vue 3 in CodeSandbox!" > 
  at <App> 
[Vue warn]: Failed to resolve component: math 
  at <HelloWorld msg="Hello Vue 3 in CodeSandbox!" > 
  at <App> 
[Vue warn]: Failed to resolve component: mfrac 
  at <HelloWorld msg="Hello Vue 3 in CodeSandbox!" > 
  at <App> 
[Vue warn]: Failed to resolve component: munderover 
  at <HelloWorld msg="Hello Vue 3 in CodeSandbox!" > 
  at <App>

And causes build time fatal error:

TypeError: Cannot create property '__props' on string 'math'
    at normalizePropsOptions (F:\project\waline\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:1386:30)    
    at createComponentInstance (F:\project\waline\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:5283:23)  
    at renderComponentVNode (F:\project\waline\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:156:22)
    at ssrRenderComponent (F:\project\waline\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:481:12)  
    at ssrRender (F:\project\waline\docs\.vuepress\dist\.server\4600.app.js:201:48)
    at script.ssrRender (F:\project\waline\docs\.vuepress\dist\.server\4600.app.js:3284:10)
    at renderComponentSubTree (F:\project\waline\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:219:13)       
    at renderComponentVNode (F:\project\waline\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:170:16)
    at renderVNode (F:\project\waline\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:260:22)
    at renderComponentSubTree (F:\project\waline\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:225:13)

<!doctype html><html lang="en-US"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Math Test</title></head><body><math display="block" xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mfrac><msup><mi mathvariant="normal">∂</mi><mi>r</mi></msup><mrow><mi mathvariant="normal">∂</mi><msup><mi>ω</mi><mi>r</mi></msup></mrow></mfrac><mrow><mo fence="true">(</mo><mfrac><msup><mi>y</mi><mi>ω</mi></msup><mi>ω</mi></mfrac><mo fence="true">)</mo></mrow><mo>=</mo><mrow><mo fence="true">(</mo><mfrac><msup><mi>y</mi><mi>ω</mi></msup><mi>ω</mi></mfrac><mo fence="true">)</mo></mrow><mrow><mo fence="true">{</mo><mo stretchy="false">(</mo><mi>log</mi><mo>⁡</mo><mi>y</mi><msup><mo stretchy="false">)</mo><mi>r</mi></msup><mo> </mo><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>r</mi></munderover><mfrac><mrow><mo stretchy="false">(</mo><mo>−</mo><mn>1</mn><msup><mo stretchy="false">)</mo><mi>i</mi></msup><mi>r</mi><mo>⋯</mo><mo stretchy="false">(</mo><mi>r</mi><mo>−</mo><mi>i</mi><mo> </mo><mn>1</mn><mo stretchy="false">)</mo><mo stretchy="false">(</mo><mi>log</mi><mo>⁡</mo><mi>y</mi><msup><mo stretchy="false">)</mo><mrow><mi>r</mi><mo>−</mo><mi>i</mi></mrow></msup></mrow><msup><mi>ω</mi><mi>i</mi></msup></mfrac><mo fence="true">}</mo></mrow></mrow></math></body></html>

The above html passes W3C validator, therefore vue should build it.

MathML Specification: https://www.w3.org/TR/MathML3/chapter2.html#interf.toplevel Status: Recommendation

So I don't think users should dig futher to do this

And I am totally disagree that it should cause a fatal error. Warnings should be enough.

posva

May 9th 2021

As you found out, you need to specify it with isCustomElement. Like other tags, they will be added if they reach standardisation across browsers but they currently are not: https://developer.mozilla.org/en-US/docs/Web/MathML#browser_compatibility. Your repro only fails on Firefox because it's the only browser supporting mathml

GitHub Track