TypeError: attacher.call is not a function

[mattcroat]

Hey! 👋

I have a simple Express server using "type": "module". The same setup works in SvelteKit but now I can't get it to work in Node.js.

// index.js

import { unified } from 'unified'
import shikiTwoslash from 'remark-shiki-twoslash'
import parseMarkdown from 'remark-parse'
import serializeMarkdown from 'remark-stringify'
import markdownToHtml from 'remark-rehype'
import markdownToHtmlAgain from 'rehype-raw'
import serializeHtml from 'rehype-stringify'

const result = await unified()
  .use(parseMarkdown)
  .use(serializeMarkdown)
  .use([
    [shikiTwoslash, { theme: 'dark-plus' }]
    // ...
  ])
  .use(markdownToHtml, { allowDangerousHtml: true })
  .use(markdownToHtmlAgain)
  .use(serializeHtml)
  .process('```js \n console.log("Hello, World!") \n ```')

When I use remark-shiki-twoslash I encounter TypeError: attacher.call is not a function.

> server@ start /server
> node ./src/index.js

file:///server/node_modules/unified/lib/index.js:136
      const transformer = attacher.call(processor, ...options)
                                   ^

TypeError: attacher.call is not a function
    at Function.freeze (file:///server/node_modules/unified/lib/index.js:136:36)
    at Function.process (file:///server/node_modules/unified/lib/index.js:375:15)
    at output (file:///server/src/index.js:25:4)
    at file:///server/src/index.js:35:20
    at ModuleJob.run (node:internal/modules/esm/module_job:197:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async loadESM (node:internal/process/esm_loader:88:5)
    at async handleMainPromise (node:internal/modules/run_main:61:12)

[ChristianMurphy]

Most likely you're running into some quirkiness around remark-shiki-twoslash trying to be hybrid ESM and CJS.
https://github.com/shikijs/twoslash/blob/1f3399c0d12ca633943c603ded6d69f0c210da4b/packages/remark-shiki-twoslash/package.json#L16-L17
and how TypeScript interacts with that.

A few things worth trying

- import shikiTwoslash from 'remark-shiki-twoslash'
+ import * as shikiTwoslash from 'remark-shiki-twoslash'

or

- import shikiTwoslash from 'remark-shiki-twoslash'
+ import shikiTwoslash from 'remark-shiki-twoslash/dist/remark-shiki-twoslash.esm.js'

it would also be worth checking if your TypeScript configuration matches the recommendations at https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c#how-can-i-make-my-typescript-project-output-esm

[mattcroat]

I made a reproduction on StackBlitz if it helps.

It seems only import shikiTwoslash from 'remark-shiki-twoslash/dist/remark-shiki-twoslash.esm.js' did something but now it's complaining about SyntaxError: Cannot use import statement outside a module.

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/node_modules/remark-shiki-twoslash/dist/remark-shiki-twoslash.esm.js:1
import { TwoslashError } from '@typescript/twoslash';
^^^^^^

SyntaxError: Cannot use import statement outside a module

[mattcroat]

it would also be worth checking if your TypeScript configuration matches the recommendations at https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c#how-can-i-make-my-typescript-project-output-esm

I'm not using TypeScript.

[ChristianMurphy]

Re: SyntaxError: Cannot use import statement outside a module again, it looks like a quirk of how remark-shiki-twoslash is packaged.
removing that one plugin makes the example you shared work: https://stackblitz.com/edit/node-shiki-twoslash-dnrnq1

This is something to raise to the maintainers of remark-shiki-twoslash
and may be related to shikijs/twoslash#129 and/or shikijs/twoslash#11

[mattcroat]

Thank you for your help! I'm going to raise the issue there.

[mattcroat]

Opened issue at shikijs/twoslash#147 if anyone encounters the same problem.