Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue
  • 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/
ready - started server on, url: http://localhost:3000
Cached 33 blog elements
Cached 12 snippet elements
info  - Using external babel configuration from /Users/maxime/Developer/
event - compiled successfully
event - build page: /posts/[slug]
wait  - compiling...
event - build page: /404
event - compiled successfully
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 (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/
    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/
    at async /Users/maxime/Developer/
    at async __wrapper (/Users/maxime/Developer/
    at async DevServer.renderToHTMLWithComponents (/Users/maxime/Developer/
    at async DevServer.renderToHTML (/Users/maxime/Developer/
    at async DevServer.renderToHTML (/Users/maxime/Developer/
    at async DevServer.render (/Users/maxime/Developer/
    at async Object.fn (/Users/maxime/Developer/
    at async Router.execute (/Users/maxime/Developer/
    at async (/Users/maxime/Developer/

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`),

  const resultMDX = await bundleMDX(source, {
    files: {},
    xdmOptions(_, options) {
      options.remarkPlugins = [
        ...(options.remarkPlugins ?? []),

      options.rehypePlugins = [];

      return options;
    esbuildOptions(options) {
      options.minify = false; = [

      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:

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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

kentcdoddscommented, Apr 8, 2021
kentcdoddscommented, Apr 8, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

node: getting error importing CommonJS module however I ...
when I try to do that in my TS file, I get the node error: SyntaxError: Named export 'UWeb' not found. The requested...
Read more >
Description. This document is all you need to know about what's required in your package.json file. It must be actual JSON, not just...
Read more >
This allows you to build on top of existing tools and modules without adding extra dependencies or bloating the size of your project....
Read more >
Firebase JavaScript SDK Release Notes - Google
Removed @firebase/app-compat as a peerDependency of @firebase/database-compat ... Updated node-fetch dependency due to a security issue (CVE-2022-0235).
Read more >
Migrating from v2 to v3
This is because the plugin needs to update its peerDependencies to include the new version of Gatsby (see ... The new required version...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found