Peer dependency issue: The requested module 'astring' is expected to be of type CommonJS ...

[MaximeHeckel]

• mdx-bundler version: 3.1.2
• node version: 14.12.0
• npm version: 7.5.4
• NextJS version: 10.06

Hi 👋 I just gave this a try on my NextJS based site and ended up with the following error when trying to run the build or a specific MDX based page in development mode. Pretty sure it's not directly related to mdx-bundler itself so if that's the case feel free to close the issue. I assume this might be related to my version of node, so maybe it will be a blocker for other people and would require to add a set of compatible Node versions in the README of this project

❯ yarn dev
yarn run v1.17.3
$ next dev
Loaded env from /Users/maxime/Developer/blog.maximeheckel.com/.env
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Cached 33 blog elements
Cached 12 snippet elements
info  - Using external babel configuration from /Users/maxime/Developer/blog.maximeheckel.com/.babelrc
event - compiled successfully
event - build page: /posts/[slug]
wait  - compiling...
event - build page: /404
event - compiled successfully
file:///Users/maxime/Developer/blog.maximeheckel.com/node_modules/xdm/lib/plugin/recma-stringify.js:2
import {baseGenerator, generate} from 'astring'
                       ^^^^^^^^
SyntaxError: The requested module 'astring' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'astring';
const {baseGenerator, generate} = pkg;
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:98:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:137:5)
    at async Loader.import (internal/modules/esm/loader.js:165:24)
    at async bundleMDX (/Users/maxime/Developer/blog.maximeheckel.com/node_modules/mdx-bundler/dist/index.js:40:27)
    at async getFileBySlug (webpack-internal:///./lib/mdx.ts:44:21)
    at async getStaticProps (webpack-internal:///./pages/posts/[slug].tsx:89:18)
    at async renderToHTML (/Users/maxime/Developer/blog.maximeheckel.com/node_modules/next/dist/next-server/server/render.js:28:109)
    at async /Users/maxime/Developer/blog.maximeheckel.com/node_modules/next/dist/next-server/server/next-server.js:107:97
    at async __wrapper (/Users/maxime/Developer/blog.maximeheckel.com/node_modules/next/dist/lib/coalesced-function.js:1:330)
    at async DevServer.renderToHTMLWithComponents (/Users/maxime/Developer/blog.maximeheckel.com/node_modules/next/dist/next-server/server/next-server.js:132:387)
    at async DevServer.renderToHTML (/Users/maxime/Developer/blog.maximeheckel.com/node_modules/next/dist/next-server/server/next-server.js:133:923)
    at async DevServer.renderToHTML (/Users/maxime/Developer/blog.maximeheckel.com/node_modules/next/dist/server/next-dev-server.js:34:578)
    at async DevServer.render (/Users/maxime/Developer/blog.maximeheckel.com/node_modules/next/dist/next-server/server/next-server.js:72:236)
    at async Object.fn (/Users/maxime/Developer/blog.maximeheckel.com/node_modules/next/dist/next-server/server/next-server.js:56:580)
    at async Router.execute (/Users/maxime/Developer/blog.maximeheckel.com/node_modules/next/dist/next-server/server/router.js:23:67)
    at async DevServer.run (/Users/maxime/Developer/blog.maximeheckel.com/node_modules/next/dist/next-server/server/next-server.js:66:1042)

Relevant code or config. Here's an excerpt of my mdx bundling related code:

  const source = fs.readFileSync(
    path.join(root, typeToPath[type], `${slug}.mdx`),
    'utf8'
  );

  const resultMDX = await bundleMDX(source, {
    files: {},
    xdmOptions(_, options) {
      options.remarkPlugins = [
        ...(options.remarkPlugins ?? []),
        require('remark-slug'),
        require('remark-autolink-headings'),
        remarkSectionize,
        remarkFigure,
      ];

      options.rehypePlugins = [];

      return options;
    },
    esbuildOptions(options) {
      options.minify = false;
      options.target = [
        'es2020',
        'chrome58',
        'firefox57',
        'safari11',
        'edge16',
        'node12',
      ];

      return options;
    },
  });

What you did:

Tried to bundle some MDX file on my current NextJS setup and ended up with the error above. This also happens when trying out the example

What happened:

The error above prevents me from rendering the page

Reproduction repository: https://github.com/MaximeHeckel/blog.maximeheckel.com/tree/next-mdx-bundler

Pushed a branch of my project with the current setup:

1. Pull the repo
2. Run yarn
3. Run yarn dev
4. Navigate to http://localhost:3000/posts/learning-in-public/ for example see the error in the CLI

[MaximeHeckel]

Confirming that it must be linked to Node v14.x

Just switched to Node v12.x and the issue does not occur

[renatorib]

It's happening to me too, even with node 12

➜  renato-remote git:(master) ✗ yarn dev
yarn run v1.22.4
$ next
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Loaded env from /home/renatorib/p/renato-remote/.env.development
ready - started server on http://localhost:3000
event - compiled successfully
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully
event - build page: /post/[slug]
wait  - compiling...
event - compiled successfully
(node:30695) ExperimentalWarning: The ESM module loader is experimental.
file:///home/renatorib/p/renato-remote/node_modules/xdm/lib/plugin/recma-stringify.js:2
import {baseGenerator, generate} from 'astring'
                       ^^^^^^^^
SyntaxError: The requested module 'astring' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'astring';
const {baseGenerator, generate} = pkg;
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:143:20)
    at async Loader.import (internal/modules/esm/loader.js:182:24)
    at async bundleMDX (/home/renatorib/p/renato-remote/node_modules/mdx-bundler/dist/index.js:40:27)
    at async getStaticProps (webpack-internal:///./src/pages/post/[slug]/index.tsx:29:18)
    at async renderToHTML (/home/renatorib/p/renato-remote/node_modules/next/dist/next-server/server/render.js:28:109)
    at async /home/renatorib/p/renato-remote/node_modules/next/dist/next-server/server/next-server.js:98:97
    at async __wrapper (/home/renatorib/p/renato-remote/node_modules/next/dist/lib/coalesced-function.js:1:330)

[guilean]

I had the same issue on Node 14.4 when upgrading to 14.15 it worked.

[kentcdodds]

I'm afraid there's nothing we can do about this, so I'm going to close it.

[kentcdodds]

The fix is in xdm and I've opened some PRs for it. Re-opening

[kentcdodds]

Try npm update: https://github.com/wooorm/xdm/pull/35#issuecomment-815897821