Trying to build a Blog with NextJS & MDX. However I keep coming across this error. Does anyone knows what this error means

Question

This is the error message that keeps on appearing when I click a link.

Answer 1

The Error come from a change in bundleMDX parameters in their last version.

The correct way of using it should be

   const source = fs.readFileSync(
    path.join(process.cwd(), 'posts', `${slug}.mdx`),
    'utf8'
  );

  const { code, frontmatter } = await bundleMDX({ source: source , ...});

Answer 2

This error indicates that you are trying to import a module on client-side but that module is for nodejs environment. you may try mdx-bundler/client as suggested here https://www.alaycock.co.uk/2021/03/mdx-bundler

The other way if moving all the parts to an api and call that api with one of these getServerSideProps, getStaticProps or inside of a useEffect

The link that I provided will solve your problems

Answer 3

Building off of SuperAmdine's answer, you can edit getSourceOfFile to be:

export const getSourceOfFile = (fileName) => {
  return fs.readFileSync(path.join(POSTS_PATH, fileName), 'utf8');
};

Notice the addition of 'utf8'.

and then

const {code, frontmatter} = await bundleMDX( {
  source: source,
  cwd: POSTS_PATH,
});

(I'm following the same blog tutorial and this got it working for me)