Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MathML cause built time error #3746

Closed
Mister-Hope opened this issue May 9, 2021 · 1 comment
Closed

MathML cause built time error #3746

Mister-Hope opened this issue May 9, 2021 · 1 comment

Comments

@Mister-Hope
Copy link

Mister-Hope commented May 9, 2021 •
edited
Loading

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
Copy link
Member

posva commented May 9, 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

@posva posva closed this as completed May 9, 2021
@Mister-Hope Mister-Hope mentioned this issue Aug 2, 2021
Closed
@brc-dd brc-dd mentioned this issue Jun 9, 2022
Closed
4 tasks
@abdonrd abdonrd mentioned this issue Jan 27, 2023
Merged
7 tasks
@huang-julien huang-julien mentioned this issue Jan 28, 2023
Closed
@sto3psl sto3psl mentioned this issue Mar 3, 2023
Closed
@github-actions github-actions bot locked and limited conversation to collaborators Oct 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@posva @Mister-Hope