esbuild-xdm plugin: Cannot read property 'start' of undefined

[Ehesp]

Initial checklist

• [x] I read the support docs
• [x] I read the contributing guide
• [x] I agree to follow the code of conduct
• [x] I searched issues and couldn’t find anything (or linked relevant results below)

Steps to reproduce

I'm trying to use shiki with a remark plugin using remark-shiki.

Whenever I include the plugin, I hit the following error:

node_modules/esbuild/lib/main.js:869:27: error: [plugin: esbuild-xdm] Cannot read property 'start' of undefined
    869 │               let result = await callback2({
        ╵                            ^
    at onload (.../node_modules/xdm/lib/integration/esbuild.js:86:32)
...
node_modules/esbuild/lib/main.js:736:22: note: This error came from the "onLoad" callback registered here
    736 │         let promise = setup({

I wasn't sure this was an issue with the plugin or not, so I confirmed the same error occurs with a basic plugin:

export default function testPlugin() {
  return async () => {
    const highlighter = await shiki.getHighlighter({
      theme: 'github',
    });
  };
}

[wooorm]

Can you post the smallest content that produces this error?

[wooorm]

The sample plugin also isn't doing anything?

[Ehesp]

Ok sorry was being a bit of an idiot.

- import shiki from 'shiki';
+ import { getHighlighter } from 'shiki';

This fixed it, so nothing to do with your library sorry. The only thing I did to find the error was log it here, which returned TypeError: Cannot read property 'getHighlighter' of undefined.

It seems that error has no location property, hence the original error.

[wooorm]

Might still be something to change here, to throw the actual error instead of hiding it and throwing something else? 🤔 if it's something here, though?

[sreetamdas]

@Ehesp hey! were you successful in getting the shiki working with xdm? I'm trying out the same but unable to 😅

[wooorm]

If errors are still swallowed, I would appreciate a reproduction so it can be fixed

[sreetamdas]

Hey! Here's a reproduction:

Everything works alright until I try to use this https://github.com/stefanprobst/remark-shiki in order to build the HTML during build time (I'd prefer not to to have this be done on the client side at runtime)

I tried to use the given instruction as best I could, sorry if I missed anything!

Links

Repo: https://github.com/sreetamdas/example-next-mdx-bundler-shiki CodeSandbox: https://codesandbox.io/s/github/sreetamdas/example-next-mdx-bundler-shiki?file=/package.json Live: https://qnr6j.sse.codesandbox.io/color

Error

 > _mdx_bundler_entry_point-6d299e15-739d-4fea-9414-5e47c4d4f456.mdx:0:0: error: [plugin: esbuild-xdm]
    0 │ ---
      ╵ ^

Error: Build failed with 1 error:
_mdx_bundler_entry_point-6d299e15-739d-4fea-9414-5e47c4d4f456.mdx:0:0: error: [plugin: esbuild-xdm]
    at failureErrorWithLog (/Users/sreetamdas/dev/projects/example-next-mdx-bundler-shiki/node_modules/esbuild/lib/main.js:1475:15)
    at /Users/sreetamdas/dev/projects/example-next-mdx-bundler-shiki/node_modules/esbuild/lib/main.js:1133:28
    at runOnEndCallbacks (/Users/sreetamdas/dev/projects/example-next-mdx-bundler-shiki/node_modules/esbuild/lib/main.js:923:63)
    at buildResponseToResult (/Users/sreetamdas/dev/projects/example-next-mdx-bundler-shiki/node_modules/esbuild/lib/main.js:1131:7)
    at /Users/sreetamdas/dev/projects/example-next-mdx-bundler-shiki/node_modules/esbuild/lib/main.js:1240:14
    at /Users/sreetamdas/dev/projects/example-next-mdx-bundler-shiki/node_modules/esbuild/lib/main.js:611:9
    at handleIncomingPacket (/Users/sreetamdas/dev/projects/example-next-mdx-bundler-shiki/node_modules/esbuild/lib/main.js:708:9)
    at Socket.readFromStdout (/Users/sreetamdas/dev/projects/example-next-mdx-bundler-shiki/node_modules/esbuild/lib/main.js:578:7)
    at Socket.emit (node:events:394:28)
    at addChunk (node:internal/streams/readable:312:12) {
  errors: [
    {
      detail: [Error],
      location: [Object],
      notes: [],
      pluginName: 'esbuild-xdm',
      text: ''
    }
  ],
  warnings: []
}

[wooorm]

Thanks for the repro. This is, sort of, with @stefanprobst/remark-shiki. The swallowed error is:

Error: Cannot handle unknown node `raw`
    at Object.unknown (file:///Users/tilde/Projects/oss/example-next-mdx-bundler-shiki/node_modules/hast-util-to-estree/index.js:155:9)
    // ... 

@stefanprobst/remark-shiki is injecting HTML into the AST. xdm (and the upcoming MDX v2) don’t handle HTML. You could get around it, by using rehype-raw with these options, in rehypePlugins.

Having to use rehype-raw is documented in the readme of @stefanprobst/remark-shiki. Note that there are several rehype shiki plugins! rehype-shiki, seems to build an AST, not strings of HTML. Maybe the other ones work better.

Meanwhile I’ll try and make sure errors aren’t swallowed

/cc @stefanprobst, author of @stefanprobst/remark-shiki

[stefanprobst]

hi, yep the example in the docs shows using rehype-raw.

as @wooorm mentioned, there are a couple of rehype shiki plugins - i've got my own one as well, which i'm successfully using with xdm.

[sreetamdas]

Thanks for the help @wooorm @stefanprobst! I ended up mixing remark-shiki and remark-mdx-code-meta since I wasn't able to make them work on their own together (PR) — I should have read the docs better haha

Thanks again!