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? 🤔
I am working on NextJS 13 with App route and next-mdx-remote.
I import Shiki as remark plugin as
Then, when I call the mdx compiler I have
All good, but if I load an MDX file then I get a list of issues:
This is followed by
and by this
File
onig.wasmtechnically exists in 4 placesand the same is for the theme.
Am I possibly missing a configuration item? 🤔