Adding `@babel/preset-react` to docusaurus does not enable "Support for the experimental syntax 'jsx'" about docusaurus

[slorber]

Remember that MDX compiles to JSX. html is a valid MDAST / HAST type, but I'm not sure a type like html is supported by the MDX compile. JSX is stricter than HTML. An HTML string might not be well-formed and might not even be convertible to JSX (and yet browsers can still render it because they are less strict).

What you probably want as output is <div dangerouslySetInnerHTML={{__html: "<div>My HTML markup</div>"}}></div>

And for that the AST is:

    {
      "type": "mdxJsxFlowElement",
      "name": "div",
      "attributes": [
        {
          "type": "mdxJsxAttribute",
          "name": "dangerouslySetInnerHTML",
          "value": {
            "type": "mdxJsxAttributeValueExpression",
            "value": "{__html: \"<div>My HTML markup</div>\"}",
            "data": {
              "estree": {
                "type": "Program",
                "body": [
                  {
                    "type": "ExpressionStatement",
                    "expression": {
                      "type": "ObjectExpression",
                      "properties": [
                        {
                          "type": "Property",
                          "method": false,
                          "shorthand": false,
                          "computed": false,
                          "key": {
                            "type": "Identifier",
                            "name": "__html"
                          },
                          "value": {
                            "type": "Literal",
                            "value": "<div>My HTML markup</div>",
                            "raw": "\"<div>My HTML markup</div>\""
                          },
                          "kind": "init"
                        }
                      ]
                    }
                  }
                ],
                "sourceType": "module",
                "comments": []
              }
            }
          },
        }
      ]
    }

This is out of scope of Docusaurus, and more of a MDX help so I'm closing.

The best to troubleshoot this would be to run the compilation using your remark code outside of Docusaurus, until you get the JSX output you want.

You should write unit tests to assert that for a given MDX doc, you get the expected JSX output when compiling with MDX using your remark plugin. All this does not involve Docusaurus so it's not really qualifiable as a bug. If you need help you'd better ask on the MDX Discord/discussions directly.

[slorber]

We don't transpile MDX components with Babel to build faster, because the output of MDX is already "runnable" by Node and browsers.

This is a tradeoff: you can't use fancy new features in MDX files, but this should be fine most of the time and you can extract your code to another component.

That being said, this limitation doesn't seem super related to your case here.

I can't help because I don't have a minimal repro. I don't see the full error message, the input source, the full remark plugin code, and can't investigate.

Please provide a minimal repro. Also, run your plugin in a standalone MDX playground to see what's the compiled output, and how it differs from what you expected to get.

---

Most likely it's a bug in your remark plugin, and you shouldn't use an element of type "html"

node.type = 'html';
node.value = (<div></div>);

That looks highlightly suspicious to me. Please explain what you expect this to do. And please run this outside of Docusaurus first to see if it does what you expect.

Remember Remark plugins run in Node.js and are not bundled by Webpack. Node.js doesn't support JSX.

[Zenahr]

@slorber The use case I'm trying to realize here is this: dynamic conversion of inline-code elements (text within single backticks in markdown) into html markup -> the final html is supposed to output a popup element showing a description and more info on the inline-code.

The reason I'm trying to make this work automatically is to avoid cluttering the markdown with unnecessary component calls (we're talking about ~100 individual components I'd otherwise have to create and also call within markdown.). Hence the need to replace the inline-code elements with html markup. the html node type is documented here: https://github.com/syntax-tree/mdast?tab=readme-ov-file#html and seems to be the most suitable node type for me to use from my understanding.

Can you make use of this explanation? I'll more than happily provide a minimal repro as soon as I can to further explain myself.