SyntaxError: Unexpected token when rendering image from Wordpress to Gatsby

[bsmith20681]

First off, thanks for making this! I have been able to create components in React, embed them into custom HTML snippets within WordPress, and have them appear exactly where I would like them in blog posts using Gatsby.

The problem I am running into is that if there is an image within the blog post nothing will render. However, if there is no image everything will render just fine.

I have added the autoCloseVoidElements prop but I still run into the same issue.

When I set the showWarnings to true I get this error.

SyntaxError: Unexpected token (25:2801) at Object.et.raise (react-jsx-parser.min.js:1) at Object.G.unexpected (react-jsx-parser.min.js:1) at Object.$.parseExprAtom (react-jsx-parser.min.js:1) at Object.parseExprAtom (react-jsx-parser.min.js:1) at Object.$.parseExprSubscripts (react-jsx-parser.min.js:1) at Object.$.parseMaybeUnary (react-jsx-parser.min.js:1) at Object.$.parseExprOps (react-jsx-parser.min.js:1) at Object.$.parseMaybeConditional (react-jsx-parser.min.js:1) at Object.$.parseMaybeAssign (react-jsx-parser.min.js:1) at Object.$.parseExpression (react-jsx-parser.min.js:1)

After reading through the error it still isn't apparent what the issue is.

Below is the image that is being passed from WordPress to JSX Parser.

`

<script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1)}}</script>

<script type="application/json" data-wp-inline-image-hydration="1">{"image":{"layout":"constrained","backgroundColor":"#b8a8a8","images":{"fallback":{"src":"/static/48abf52ececd5cb3cd11b2dc9bf15243/ee12c/Depositphotos_140976734_S-1.jpg","srcSet":"/static/48abf52ececd5cb3cd11b2dc9bf15243/6d521/Depositphotos_140976734_S-1.jpg 250w,\n/static/48abf52ececd5cb3cd11b2dc9bf15243/eb401/Depositphotos_140976734_S-1.jpg 500w,\n/static/48abf52ececd5cb3cd11b2dc9bf15243/ee12c/Depositphotos_140976734_S-1.jpg 1000w","sizes":"(min-width: 1000px) 1000px, 100vw"},"sources":[{"srcSet":"/static/48abf52ececd5cb3cd11b2dc9bf15243/d67cb/Depositphotos_140976734_S-1.webp 250w,\n/static/48abf52ececd5cb3cd11b2dc9bf15243/88b3a/Depositphotos_140976734_S-1.webp 500w,\n/static/48abf52ececd5cb3cd11b2dc9bf15243/38534/Depositphotos_140976734_S-1.webp 1000w","type":"image/webp","sizes":"(min-width: 1000px) 1000px, 100vw"}]},"width":1000,"height":667},"alt":"women vaccumming","className":"wp-image-679 inline-gatsby-image-wrapper","data-wp-inline-image":"1"}</script> `

I would image that some of this markup is causing the issue, but everything has a closing tag as far as I can see.

Any suggestions or workarounds would be appreciated!

[bsmith20681]

After working on it some more I was able to discover that it also giving a similar issue with react-html-parser. Gatsby wants to add it's own markup to every image which makes it difficult to debug which part is causing the issue.

The workaround I came up with was to create an image component and pass the src through props. I then added that basic image component to JSX parser and it worked like a charm!