Unexpected token

[ShahriarKh]

I'm fetching an article from cms. Inside it, there's a line:

<pre class="wp-block-code"><code>css { color: red }</code></pre>

that breaks the rendering and throws this error SyntaxError: Unexpected token (19:44)

I tried with dangerouslySetInnerHTML and it works.

import JsxParser from "react-jsx-parser";
import css from "./Article.module.scss";

export default function Article({ content }) {
    return (
        <article className={css.article}>

            {/* works */}
            <div dangerouslySetInnerHTML={{ __html:content}} />

            {/* doesn't work */}
            <JsxParser
                jsx={content}
                autoCloseVoidElements
                showWarnings={true}
                renderInWrapper={false}
            />

        </article>
    );
}

Is there a solution for this?

[DevMetwaly]

Your code is not a valid JSX the problem is in { color: red } cause u r using " { " the items between curly braces will interpreted as JSX

look to this issue it may help #112