{{ inside math causes unclear errors #2240
Description
Describe the bug
Consecutive {{ inside LaTeX math expressions cause several kinds of unclear error messages.
Workaround: Adding a space between consecutive braces helps, e.g. ${ {\alpha}^i}^T$ then LaTeX renders fine.
Minimal reproduction
Steps to reproduce the behavior:
- https://sli.dev/new
- Write
${{\alpha}}^T$in slides.md and save. Note open {{ AND closing }}.
=> Shows error (may take a second or two until it pops up):
[plugin:vite:vue] Error parsing JavaScript expression: Expecting Unicode escape sequence \uXXXX. (1:2)
/home/projects/zzmivaxqxg.github/slides.md__slidev_1.md:3:200
1 | <template>
2 | <InjectedLayout v-bind="_frontmatterToProps($frontmatter,0)">
3 | <p><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mi>α</mi><mi>T</mi></msup></mrow><annotation encoding="application/x-tex">{{\alpha}}^T</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8413em;"></span><span class="mord"><span class="mord"><span class="mord"><span class="mord mathnormal" style="margin-right:0.0037em;">α</span></span></span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8413em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight" style="margin-right:0.13889em;">T</span></span></span></span></span></span></span></span></span></span></span></p>
| ^
4 |
5 | </InjectedLayout>
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.
(The important part is "Error parsing JavaScript expression". The detail about "\uXXXX" is specific to \alpha and may vary per math expression. A simple expression like ${{x}}$ can work with no error! But e.g. ${{x-}}$ fails because x- is invalid as JS.)
- If instead you write
${{\alpha}^i}^T$, note {{ BUT no closing }}, it shows different error:
[plugin:vite:vue] Interpolation end sign was not found.
/home/projects/zzmivaxqxg.github/slides.md__slidev_1.md:3:221
1 | <template>
2 | <InjectedLayout v-bind="_frontmatterToProps($frontmatter,0)">
3 | <p><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><msup><mi>α</mi><mi>i</mi></msup><mi>T</mi></msup></mrow><annotation encoding="application/x-tex">{{\alpha}^i}^T</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.0559em;"></span><span class="mord"><span class="mord"><span class="mord"><span class="mord"><span class="mord mathnormal" style="margin-right:0.0037em;">α</span></span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8247em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">i</span></span></span></span></span></span></span></span></span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:1.0559em;"><span style="top:-3.2776em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight" style="margin-right:0.13889em;">T</span></span></span></span></span></span></span></span></span></span></span></p>
| ^
4 |
5 | </InjectedLayout>
(Looks like the KaTeX render succeeds, it seems it's only the <annotation encoding="application/x-tex">{{\alpha}^i}^T</annotation> tag that triggers issue?
Guess: is it intercepted by some Vue template syntax?)
Environment
-
Slidev version: 52.1.0
-
Browser: Firefox 141
-
OS: Linux
-
reproduced in a local project (i.e.
npm create slidev@latest).