How to use rehype-highlight in ReactMarkdown?

[dominicarrojado]

Hopefully it's okay to post it here. I was trying to use rehype-highlight in ReactMarkdown. Btw my ReactMarkdown works just fine without plugin. Based on the doc, I should be able to use it like this:

import ReactMarkdown from 'react-markdown'
import rehypeHighlight from 'rehype-highlight';

ReactDom.render(
  <ReactMarkdown rehypePlugins={[rehypeHighlight]}>
    This ~is not~ strikethrough, but ~~this is~~!
  </ReactMarkdown>,
  document.body
)

but I'm getting an error in my Next.js app:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/languages/arduino' is not defined by "exports" in /xxx/node_modules/highlight.js/package.json imported from /xxx/node_modules/lowlight/lib/common.js

I tried reproducing in a new Create React App project but get a different error:

./node_modules/hast-util-to-text/index.js 363:65
Module parse failed: Identifier directly after number (363:65)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     //     break is the zero-width space character (U+200B), then the break is
|     //     removed, leaving behind the zero-width space.
>     if (lines[index].charCodeAt(lines[index].length - 1) === 0x20_0b
|     /* ZWSP */
|     || index < lines.length - 1 && lines[index + 1].charCodeAt(0) === 0x20_0b

[ChristianMurphy]

@dominicarrojado what versions of each library are you using?
Trying out an example in codesandbox https://codesandbox.io/s/react-markdown-rehype-highlight-32obr?file=/src/App.js
With

• [email protected]
• [email protected]
• [email protected]
• [email protected]

appears to work as expected https://codesandbox.io/s/react-markdown-rehype-highlight-32obr?file=/src/App.js.

---

For Next.js have you enabled ESM support? https://nextjs.org/blog/next-11-1#es-modules-support
And what versions of libraries are you using?

---

For CRA what version of libraries are you using? Have you customized the browserslist by any chance?

[dominicarrojado]

@ChristianMurphy I get the CRA error I got from my local if I try CodeSandbox for Next.js: https://codesandbox.io/s/interesting-fire-thu88?file=/pages/index.js

[ChristianMurphy]

It appears Next doesn't support numeric separators (https://v8.dev/features/numeric-separators) which is a standard feature in JavaScript.

A few things which may help:

• make sure you are running node 12 or higher (CodeSandbox's next template defaults to a server with node 10 IIRC)
• try customizing next's babel config https://nextjs.org/docs/advanced-features/customizing-babel-config to include https://babeljs.io/docs/en/babel-plugin-syntax-numeric-separator
• if the issue persists it may be a deeper issue in next's webpack configuration, raise a discussion/issue with Next to support numeric separators (https://github.com/vercel/next.js/discussions or https://github.com/vercel/next.js/issues)

related: syntax-tree/hast-util-to-text#4

[dominicarrojado]

@ChristianMurphy hmm ok, thanks for checking. My node is on v12.19.0 even previously, I did try customizing the babel config but I still get this error:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/languages/arduino' is not defined by "exports" in /xxx/node_modules/highlight.js/package.json imported from /xxx/node_modules/lowlight/lib/common.js

I'm still puzzled why on my local CRA TypeScript, I get this error which is similar to the CodeSandbox Next.js, cause you mentioned it could be next's webpack config but this is CRA just that it was installed in my local.

./node_modules/hast-util-to-text/index.js 363:65
Module parse failed: Identifier directly after number (363:65)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     //     break is the zero-width space character (U+200B), then the break is
|     //     removed, leaving behind the zero-width space.
>     if (lines[index].charCodeAt(lines[index].length - 1) === 0x20_0b
|     /* ZWSP */
|     || index < lines.length - 1 && lines[index + 1].charCodeAt(0) === 0x20_0b

[ChristianMurphy]

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/languages/arduino' is not defined by "exports" in /xxx/node_modules/highlight.js/package.json imported from /xxx/node_modules/lowlight/lib/common.js

Looks like a bug in webpack handling highlight webpack/webpack#13865

discovered here: highlightjs/highlight.js#3223 (comment) and highlightjs/highlight.js#3223 (comment)

[dominicarrojado]

@ChristianMurphy yeah, I installed an older version [email protected] and it is working in Next.js.