shikijs / twoslash

You take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples
https://shikijs.github.io/twoslash/
MIT License
1.06k stars 51 forks source link

NextJS 13 + Next-MDX-Remote + remarkTwoslash: the request of a dependency is an expression #186

Open LunaticMuch opened 1 year ago

LunaticMuch commented 1 year ago

I am working on NextJS 13 with App route and next-mdx-remote.

I import Shiki as remark plugin as

import remarkShikiTwoslash from 'remark-shiki-twoslash

Then, when I call the mdx compiler I have

 mdxOptions: {
        remarkPlugins: [
          remarkGfm,
          [
            remarkGithub,
            { repository: 'https://github.com/remarkjs/remark.git' },
          ],
          [remarkShikiTwoslash, { theme: 'dark-plus' }],
        ],
        rehypePlugins: [],
      },

All good, but if I load an MDX file then I get a list of issues:

./node_modules/@typescript/twoslash/node_modules/@typescript/vfs/dist/vfs.cjs.development.js
Critical dependency: the request of a dependency is an expression

This is followed by

- error unhandledRejection: Error: ENOENT: no such file or directory, open 'onig.wasm'
    at Object.openSync (node:fs:589:3)
    at Object.readFileSync (node:fs:457:35)
    at getOniguruma (webpack-internal:///(sc_server)/./node_modules/remark-shiki-twoslash/node_modules/shiki/dist/index.js:1968:32)
    at Object.getHighlighter (webpack-internal:///(sc_server)/./node_modules/remark-shiki-twoslash/node_modules/shiki/dist/index.js:2436:36)
    at _callee$ (webpack-internal:///(sc_server)/./node_modules/remark-shiki-twoslash/dist/remark-shiki-twoslash.cjs.development.js:855:42)
    at tryCatch (webpack-internal:///(sc_server)/./node_modules/remark-shiki-twoslash/dist/remark-shiki-twoslash.cjs.development.js:115:29)
    at Generator.invoke [as _invoke] (webpack-internal:///(sc_server)/./node_modules/remark-shiki-twoslash/dist/remark-shiki-twoslash.cjs.development.js:293:34)
    at Generator.eval [as next] (webpack-internal:///(sc_server)/./node_modules/remark-shiki-twoslash/dist/remark-shiki-twoslash.cjs.development.js:160:33)
    at asyncGeneratorStep (webpack-internal:///(sc_server)/./node_modules/remark-shiki-twoslash/dist/remark-shiki-twoslash.cjs.development.js:15:28)
    at _next (webpack-internal:///(sc_server)/./node_modules/remark-shiki-twoslash/dist/remark-shiki-twoslash.cjs.development.js:33:17)
    at eval (webpack-internal:///(sc_server)/./node_modules/remark-shiki-twoslash/dist/remark-shiki-twoslash.cjs.development.js:38:13)
    at new Promise (<anonymous>)
    at eval (webpack-internal:///(sc_server)/./node_modules/remark-shiki-twoslash/dist/remark-shiki-twoslash.cjs.development.js:30:16)
    at eval (webpack-internal:///(sc_server)/./node_modules/remark-shiki-twoslash/dist/remark-shiki-twoslash.cjs.development.js:872:26)
    at Array.map (<anonymous>)

and by this

- error {
  name: 'Error',
  source: 'server',
  message: '[next-mdx-remote] error compiling MDX:\n' +
    "ENOENT: no such file or directory, open '/Users/stefano/next/.next/server/app/docs/themes/dark-plus.json'\n" +
    '\n' +
    'More information: https://mdxjs.com/docs/troubleshooting-mdx',
  stack: ''
}

File onig.wasm technically exists in 4 places

./node_modules/shiki-twoslash/node_modules/shiki/dist/onig.wasm
./node_modules/shiki/dist/onig.wasm
./node_modules/vscode-oniguruma/release/onig.wasm
./node_modules/remark-shiki-twoslash/node_modules/shiki/dist/onig.wasm

and the same is for the theme. Am I possibly missing a configuration item? 🤔