vercel / vercel/next.js

MDX Plugin String Format resolution doesn't work with ESM plugins with multiple exports

Open
#73,757 12 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Markdown (MDX)
Dominant language
JavaScript
Stars
142k
Forks
32.5k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/wesbos/next-mdx-plugin-string-issue

To Reproduce

When using strings to import a MDX Rehype plugin, the Next.js importer fails.

I believe this is only when the package has multiple ESM exports - like this package: https://github.com/stefanprobst/rehype-extract-toc/blob/main/package.json

Thansk to @karlhorky for linking me to the possible commit / code. CC @timneutkens

https://github.com/vercel/next.js/pull/72802/files#diff-d5904dff78d88856dc003d263e6f70f0a607166230fba8e4b947a3bae5e4e87cR10

import createMDX from "@next/mdx";

const withMDX = createMDX({
  options: {
    rehypePlugins: [
      ["@stefanprobst/rehype-extract-toc"],
      ["@stefanprobst/rehype-extract-toc/mdx"],
    ],
  },
});

We get the Error:

Error: No "exports" main defined in /Users/wesbos/Sites/delete-me/mdx-plugin-issue/node_modules/@stefanprobst/rehype-extract-toc/package.json
    at Array.map (<anonymous>) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
 ⨯ unhandledRejection: Error: No "exports" main defined in /Users/wesbos/Sites/delete-me/mdx-plugin-issue/node_modules/@stefanprobst/rehype-extract-toc/package.json
    at Array.map (<anonymous>) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
 ⨯ unhandledRejection:  Error: No "exports" main defined in /Users/wesbos/Sites/delete-me/mdx-plugin-issue/node_modules/@stefanprobst/rehype-extract-toc/package.json
    at Array.map (<anonymous>) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Or

Error: Package subpath './mdx' is not defined by "exports" in /Users/wesbos/Sites/delete-me/mdx-plugin-issue/node_modules/@stefanprobst/rehype-extract-toc/package.json
    at Array.map (<anonymous>) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

This error does not happen if the plugin is imported inside next.config.mjs and passed as a javascript function, but since Turborepo must pass as a string, I cannot do this.

The error exists both with and without --turbo.

Current vs. Expected behavior

_

Provide environment information
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:03:15 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 23.1.0
  npm: 10.9.0
  Yarn: 1.22.22
  pnpm: 9.10.0
Relevant Packages:
  next: 15.0.4-canary.51 // Latest available version is detected (15.0.4-canary.51).
  eslint-config-next: N/A
  react: 19.0.0-beta-04b058868c-20240508
  react-dom: 19.0.0-beta-04b058868c-20240508
  typescript: 5.1.3
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

Markdown (MDX)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproduction repository and the @next/mdx createMDX configuration in the issue. Read the referenced changes in PR 72802 and inspect how string-valued rehypePlugins are resolved from next.config.mjs. Done means both the package root and the /mdx subpath work for the listed ESM plugin configuration without the reported export errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, node.js
Domain
build-system, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.