Module not found: Can't resolve 'child_process' with Next.js

[shuent]

When I use this remark-prismfor processing markdown, it causes error.

At First, This seems that markdown file does not include the code surrounded with ``` but it was not.

$ npm run dev

error - ./node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:4:19
Module not found: Can't resolve 'child_process'
null

// MdTransformer.tsx

import remark from 'remark'
import remark2react from 'remark-react'
import prism from 'remark-prism'

export const MdToNode = ({ mdText }) => {
  // console.log(prism)
  const processor = remark()
    .use(prism) // Error: Can't resolve 'child_process'
    .use(remark2react)

  return <div>{processor.processSync(mdText).result}</div>
}

This error occurs when this MdTransformer.tsx is read Because below also causes Error.

export const MdToNode = ({ mdText }) => {
  console.log(prism)
  const processor = remark()
    // .use(prism) // Error: Can't resolve 'child_process'
    .use(remark2react)
...
}

Other remark-plugin works fine but only prism plugin does not.

versions

    "gray-matter": "^4.0.2",
    "next": "latest",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "remark": "^13.0.0",
    "remark-prism": "^1.3.6",
    "remark-react": "^8.0.0",
    "remark-slug": "^6.0.0",

[rayhanadev]

I was using remark-prism yesterday (4-16-2021) to do syntax highlighting for some code on my portfolio and I ran across the exact same issue :/. Hopefully jsdom get's a fix or the project shifts to a different package.

[matildepark]

If you’re using next.js, you need to run remark-prism on the server side of the tender (getStaticProps etc), not on the client side.