Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
MaximeHeckel opened this issue Mar 26, 2021 · 6 comments

Comments

@MaximeHeckel
Copy link

MaximeHeckel commented Mar 26, 2021

  • 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
Copy link
Author

Confirming that it must be linked to Node v14.x

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

@renatorib
Copy link

renatorib commented Mar 28, 2021

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
Copy link

guilean commented Mar 31, 2021

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

@kentcdodds
Copy link
Owner

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

kentcdodds added a commit to kentcdodds/xdm that referenced this issue Apr 8, 2021
kentcdodds added a commit to kentcdodds/xdm that referenced this issue Apr 8, 2021
@kentcdodds
Copy link
Owner

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

@kentcdodds kentcdodds reopened this Apr 8, 2021
@kentcdodds
Copy link
Owner

Try npm update: wooorm/xdm#35 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants