SVGs fail with unhelpful error messages

[baerrach]

Subject of the issue

An inline svg fails with error messages that don't help trouble shoot the problem.

Your environment

• Packages: gatsby

Steps to reproduce

I've tried creating a codesandbox link https://codesandbox.io/s/mdx-js-and-svgs-0cvso

The problem will be that the "content/blog/test-1" and "content/blog/test-2" failures stop the gatsby site from being created correctly.

You'll need to manually fiddle with those to see "content/blog/test-3" working.

I've included the failing svg here and the steps taken to get it to work.

Failing SVG

This svg is generated by plantuml but its simple enough to see where the problems are.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="61px" preserveAspectRatio="none" style="width:54px;height:61px;" version="1.1" viewBox="0 0 54 61" width="54px" zoomAndPan="magnify"><defs><filter height="300%" id="f1bvofi6njmo" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><rect fill="#FEFECE" filter="url(#f1bvofi6njmo)" height="35.0938" style="stroke: #A80036; stroke-width: 1.5;" width="28" x="7" y="7"/><ellipse cx="19.5" cy="16.5938" fill="#000000" rx="2.5" ry="2.5" style="stroke: #000000; stroke-width: 0.0;"/><text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="3" x="25" y="21.457">/</text><line style="stroke: #A80036; stroke-width: 1.5;" x1="8" x2="34" y1="26.0938" y2="26.0938"/><!--MD5=[ff5fdca3ecc987b82a3d7e046f365577]
@startuml

object "\*/" as failing_f_s

@enduml

PlantUML version 1.2020.15(Sun Jun 28 21:09:45 ACST 2020)
(MIT source distribution)
Java Runtime: Java(TM) SE Runtime Environment
JVM: Java HotSpot(TM) 64-Bit Server VM
Default Encoding: Cp1252
Language: en
Country: AU
--></g></svg>

This fails with the error unknown: Unexpected token (8:1063) and a stack trace.
Unfortunately because the HTML is not pretty printed its hard to determine the problem.

Using Pretty Printed HTML

If I pretty-print the svg to become

<svg
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="61px" preserveAspectRatio="none" style="width:54px;height:61px;" version="1.1" viewBox="0 0 54 61" width="54px" zoomAndPan="magnify">
	<defs>
		<filter height="300%" id="f1bvofi6njmo" width="300%" x="-1" y="-1">
			<feGaussianBlur result="blurOut" stdDeviation="2.0"/>
			<feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
			<feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
			<feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
		</filter>
	</defs>
	<g>
		<rect fill="#FEFECE" filter="url(#f1bvofi6njmo)" height="35.0938" style="stroke: #A80036; stroke-width: 1.5;" width="28" x="7" y="7"/>
		<ellipse cx="19.5" cy="16.5938" fill="#000000" rx="2.5" ry="2.5" style="stroke: #000000; stroke-width: 0.0;"/>
		<text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="3" x="25" y="21.457">/</text>
		<line style="stroke: #A80036; stroke-width: 1.5;" x1="8" x2="34" y1="26.0938" y2="26.0938"/>
		<!--MD5=[ff5fdca3ecc987b82a3d7e046f365577]
@startuml

object "\*/" as failing_f_s

@enduml

PlantUML version 1.2020.15(Sun Jun 28 21:09:45 ACST 2020)
(MIT source distribution)
Java Runtime: Java(TM) SE Runtime Environment
JVM: Java HotSpot(TM) 64-Bit Server VM
Default Encoding: Cp1252
Language: en
Country: AU
-->
	</g>
</svg>

Then the stack trace shows

SyntaxError: unknown: Unexpected token (22:3)
    20 |  <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdj  ust="spacingAndGlyphs" textLength="3" x="25" y="21.457">/</text>
    21 |  <line style="stroke: #A80036; stroke-width: 1.5;" x1="8" x2="34" y1="2  6.0938" y2="26.0938"/>
  > 22 |  <!--MD5=[ff5fdca3ecc987b82a3d7e046f365577]
       |   ^

Clearly marking the html comment as the problem.

Removing the HTML Comment

With the html comment removed the svg becomes:

<svg
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="61px" preserveAspectRatio="none" style="width:54px;height:61px;" version="1.1" viewBox="0 0 54 61" width="54px" zoomAndPan="magnify">
	<defs>
		<filter height="300%" id="f1bvofi6njmo" width="300%" x="-1" y="-1">
			<feGaussianBlur result="blurOut" stdDeviation="2.0"/>
			<feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
			<feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
			<feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
		</filter>
	</defs>
	<g>
		<rect fill="#FEFECE" filter="url(#f1bvofi6njmo)" height="35.0938" style="stroke: #A80036; stroke-width: 1.5;" width="28" x="7" y="7"/>
		<ellipse cx="19.5" cy="16.5938" fill="#000000" rx="2.5" ry="2.5" style="stroke: #000000; stroke-width: 0.0;"/>
		<text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="3" x="25" y="21.457">/</text>
		<line style="stroke: #A80036; stroke-width: 1.5;" x1="8" x2="34" y1="26.0938" y2="26.0938"/>
	</g>
</svg>

the error becomes

 SyntaxError: unknown: Namespace tags are not supported by default. React's JSX   doesn't support namespace tags. You can set `throwIfNamespace: false` to bypa  ss this warning.

Removing the XML namespaces

With the xml namespace removed the svg becomes:

<svg
	contentScriptType="application/ecmascript" contentStyleType="text/css" height="61px" preserveAspectRatio="none" style="width:54px;height:61px;" version="1.1" viewBox="0 0 54 61" width="54px" zoomAndPan="magnify">
	<defs>
		<filter height="300%" id="f1bvofi6njmo" width="300%" x="-1" y="-1">
			<feGaussianBlur result="blurOut" stdDeviation="2.0"/>
			<feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
			<feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
			<feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
		</filter>
	</defs>
	<g>
		<rect fill="#FEFECE" filter="url(#f1bvofi6njmo)" height="35.0938" style="stroke: #A80036; stroke-width: 1.5;" width="28" x="7" y="7"/>
		<ellipse cx="19.5" cy="16.5938" fill="#000000" rx="2.5" ry="2.5" style="stroke: #000000; stroke-width: 0.0;"/>
		<text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="3" x="25" y="21.457">/</text>
		<line style="stroke: #A80036; stroke-width: 1.5;" x1="8" x2="34" y1="26.0938" y2="26.0938"/>
	</g>
</svg>

And the svg is rendered correctly.

Expected behaviour

The svg should be rendered even if it contains html inline comments and xml namespaces.

Actual behaviour

mdx-js fails with errors.

[wooorm]

MDX support JSX, not HTML. So comments or other non-JSX things will fail. There are ways online to turn SVG into JSX.
For the unhelpful errors: we support much better JSX parsing on the next branch for MDX@2!

[baerrach]

Hmm. I didn't consider that.

https://www.markdownguide.org/basic-syntax/#html says its up to the application to determine whether html tags are allowed in markdown.

The https://mdxjs.com/getting-started#mdx page says you support the https://daringfireball.net/projects/markdown/syntax which says:

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.

For my problem, it mostly works, except for the HTML comment and xml namespaces.

I'm using the https://github.com/baerrach/gatsby-remark-plantuml to convert code blocks annotated with plantuml into svg. This works with gatsby-transformer-remark and I was also trying to use gatsby-plugin-mdx

Do you have suggestions for how to solve this problem?

[wooorm]

I see it as MDX = MD - HTML + JSX. Hence, you can’t use the normal HTML / SVG syntax to represent them, but instead must use the JSX version. Per my previous comment, there are tools that do that, such as svgr!

[baerrach]

svgr looks like it takes an svg on disk to rewrite it into a JSX component.

That's not going to solve my problem.

I have a markdown file with a code block that contains plantuml code.

I am using a remark plugin to transform that into an SVG.

Perhaps I need to look at the transformation chain more closely and stop trying to hack it. This worked for gatsby-transformer-remark and I thought I could just get away with doing the same with gatsby-plugin-mdx.

[wooorm]

I see that you are the author of gatsby-remark-plantuml. Unfortunately, due to the way you wrote the plugin, it indeed does not work with MDX.

The remark, rehype, and unified ecosystem is built around syntax trees, but you are injecting an HTML node: https://github.com/baerrach/gatsby-remark-plantuml/blob/6dbbd4971a52993131f573deb348cb9a1a9724b4/index.js#L237-L240, which will fail here because MDX does not understand a string of HTML.
I see you are using Cheerio. That is an alternative to rehype. So, you could do some of the things inside unified, and have it all work with MDX.

Here is a project that does stuff similarly to what you are doing, but around math: https://github.com/remarkjs/remark-math. That may be of inspiration?

[baerrach]

Thanks.

There appears to be some different between gatstby-remark plugins and pure remark plugins. At least the last bit of the page https://www.gatsbyjs.org/packages/gatsby-remark-graphviz/ seems to indicate this but doesn't elaborate on why.

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-graphviz/src/index.js is probably a good source of cut-n-paste for me.

[baerrach]

Thanks for your help.

I can see that https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-graphviz/src/index.js is doing exactly what I am already doing, so its not a good example.

It looks like I need to write a second mdx-js version that renders the svg as compatible JSX.

Unfortunately I don't have the time, or desire, to work out how to do that correctly. I'll go back to plain markdown support and hope that someone else comes along who want's MDX support and plantuml and is willing do submit a pull request.