Module not found: Can't resolve 'child_process'

[vannyle]

With the version "next-mdx-remote": "3.0.8", I'm facing with the error below:

./node_modules/esbuild/lib/main.js:1567:0
Module not found: Can't resolve 'child_process'
null

I use the mdx-remote in the same file, where the getStaticPaths and getStaticProps were used:

import {CTA} from 'LandingPage/CTA'
import {CTAWithImage} from '../CTAWithImage/index'
import fs from 'fs'
import {getPageBySlug} from 'LandingPage/common/helpers'
import {GlobalBasicMeta} from 'common/GlobalBasicMeta'
import Head from 'next/head'
import {Hero} from 'LandingPage/Hero'
import {LandingLayout} from 'common/LandingLayout'
import {memo} from 'react'
import {Newsletter} from 'LandingPage/Newsletter'
import path from 'path'
import {Post as PostType} from '../common/types/posts'
import {serialize} from 'next-mdx-remote/serialize'
import {MDXRemote} from 'next-mdx-remote'

export const Details = memo(function Details(props: {
  post: PostType
}) {
  const components = {CTA, CTAWithImage, Hero, Newsletter}
  return <LandingLayout>
    <GlobalBasicMeta />

    <MDXRemote {...props.post.content} components={components} />

  </LandingLayout>
})

export const getStaticProps = async ({params}) => {
  const post = getPageBySlug(params.slug)
 
  return {
    props: {post: {
      ...post,
      content: await serialize(post.content),
    }},
  }
}

export const getStaticPaths = async () => {
  const files = fs.readdirSync(path.join('landing-pages'))

  const paths = files.map(filename => ({
    params: {
      slug: filename.replace(/\.md$/, ''),
    },
  }))

  return {
    fallback: false,
    paths,
  }
}

Does anyone have a solution for this issue?

[jescalan]

What is your deployment environment?

[vannyle]

@jescalan Hi, it is the local dev environment. And the node version is v14.18.0.

[jescalan]

Okok - could you create a minimal reproduction repo and post it here? I can pull it down and take a look : )

[sebahhpeya]

Same issue here!

i'm changed to version 2 again because i couldn't solve it.

Just create a next application in 10 version and use mdx with your exmple code here

[tusharpandey13]

This seems to work for me in dev (I'm kinda new to this so I don't know if this fixes the problem or just hides it):

/// next.config.js
module.exports = {
  webpack5: true,
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
      config.resolve.fallback.child_process = false;
      config.resolve.fallback.worker_threads = false;
    }
    return config;
  },

  reactStrictMode: true,
};

I was getting similar module not found errors for fs and child_process as well.
I referenced this issue thread.

[fboechats]

That's because you have client side and server side content in the same file. If you extract that Details component it should work fine

[BRKalow]

Closing this, please feel free to open another issue or drop a comment if you're still having troubles here. Thanks!