Compilation fails at hast nodes with slashes in tagName

[Maronato]

• mdx-bundler version: 8.0.0
• node version: v16.13.0
• yarn version: 1.22.17

Hast nodes with - in their tagName causes mdx-bundler to crash.

What you did

I created a rehype plugin that injects hast elements into the tree. These elements happen to have tagNames with slashes in them (e.g. <my-tag />).

What happened

mdx-bundler crashes with the following error:

✘ [ERROR] Expected "}" but found "-"

    _mdx_bundler_entry_point-fae02464-d973-4ca3-9f1f-9e272d343fb6.mdx:11:10:
      11 │       data-lsp: "data-lsp"
         │           ^
         ╵           }

/Users/Me/Project/node_modules/esbuild/lib/main.js:1493
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
_mdx_bundler_entry_point-fae02464-d973-4ca3-9f1f-9e272d343fb6.mdx:11:10: ERROR: Expected "}" but found "-"
    at failureErrorWithLog (/Users/Me/Project/node_modules/esbuild/lib/main.js:1493:15)
    at /Users/Me/Project/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/Users/Me/Project/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/Users/Me/Project/node_modules/esbuild/lib/main.js:1149:7)
    at /Users/Me/Project/node_modules/esbuild/lib/main.js:1258:14
    at /Users/Me/Project/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/Users/Me/Project/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/Users/Me/Project/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12) {
  errors: [
    {
      detail: undefined,
      location: {
        column: 10,
        file: '_mdx_bundler_entry_point-fae02464-d973-4ca3-9f1f-9e272d343fb6.mdx',
        length: 1,
        line: 11,
        lineText: '      data-lsp: "data-lsp"',
        namespace: '',
        suggestion: '}'
      },
      notes: [],
      pluginName: '',
      text: 'Expected "}" but found "-"'
    }
  ],
  warnings: []
}

Reproducing the error

The following Hast tree is an example that causes it to crash:

{
  "type": "root",
  "children": [
    {
      "type": "element",
      "tagName": "p",
      "properties": {},
      "children": [
        {
          "type": "text",
          "value": "Example mdx",
          "position": {
            "start": { "line": 2, "column": 1, "offset": 1 },
            "end": { "line": 2, "column": 12, "offset": 12 }
          }
        },
        {
          "type": "element",
          "tagName": "data-lsp",
          "properties": {},
          "children": [],
          "position": {
            "start": { "line": 1, "column": 1, "offset": 0 },
            "end": { "line": 1, "column": 13, "offset": 12 }
          }
        }
      ],
      "position": {
        "start": { "line": 2, "column": 1, "offset": 1 },
        "end": { "line": 2, "column": 12, "offset": 12 }
      }
    }
  ],
  "position": {
    "start": { "line": 1, "column": 1, "offset": 0 },
    "end": { "line": 3, "column": 1, "offset": 13 }
  }
}

This particular example was created using the following code, which you can use to reproduce the issue:

import parser from "rehype-parse"
import { unified } from "unified"
import { select } from "hast-util-select"
import { bundleMDX } from "mdx-bundler"

/**
 * Takes some html string and returns the hast equivalent
 */
const toHast = (html) =>
  unified().use(parser).parse(html).children[0].children[1].children[0]

/**
 * Rehype plugin that injects the following html inside
 * a <p> node:
 * `<data-lsp />`
 */
const plugin = () => {
  return (root) => {
    const hastNode = toHast("<data-lsp />")
    const node = select("p", root)
    node.children.push(hastNode)
  }
}

const run = async () => {
  const md = `
Example mdx
`

  const { code } = await bundleMDX({
    source: md,
    xdmOptions: (options) => {
      options.rehypePlugins = [plugin]
      return options
    },
  })
  console.log(code)
}

await run()

Problem description:

I tried to compile the above code using just xdm and it faced no issues, so it may be something that happens after that.

Suggested solution:

I'm not sure. The error message is a bit cryptic, so it's hard to tell if the issue is with the code that esbuild receives or somewhere else.

I should also point out that replacing - with _ or other characters "solves" the issue.