`'@next/mdx'` not support ESM import bug ❌

[xgqfrms]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

# $ next info
# $ npx --no-install next info

$ npx --no-install next info 2>&1 | pbcopy

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64
    Binaries:
      Node: 18.12.0
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: 7.15.0
    Relevant packages:
      next: 13.0.3
      eslint-config-next: 13.0.3
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.0.3", newest: "13.0.6-canary.2".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://codesandbox.io/s/next-js-issues-43665-qzp4dp

https://github.com/xgqfrms/ssr-next

To Reproduce

'@next/mdx' not support ESM import bug ❌

next.config.mjs

If you use remark-gfm, you'll need to use next.config.mjs as the package is ESM only

https://github.com/remarkjs/remark-gfm#install

https://nextjs.org/docs/messages/next-config-error

// not support ESM import ❓
import * as NextMdx from '@next/mdx'

import remarkGfm from "remark-gfm"
// import remarkPrism from "remark-prism"

// ESM ❌
const withMDX = NextMdx({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm], // ✅
    // remarkPlugins: [remarkPrism], // ESM ❌
  },
});

const CustomNextConfig = withMDX({
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  ...nextConfig,
});

export default CustomNextConfig;

remark-gfm not support CJS ❌

next.config.js

// 
const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [require("remark-prism")], // ✅
    // remarkPlugins: [require("remark-gfm")], // ❌ 
  },
});


module.exports = withMDX({
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  ...nextConfig,
})

Describe the Bug

'@next/mdx' not support ESM import bug ❌

error - Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
TypeError: NextMdx is not a function
    at file:///Users/xgqfrms-mbp/Documents/GitHub/ssr-next/src/next-ts-ssr-app/next.config.mjs:38:17
    at ModuleJob.run (node:internal/modules/esm/module_job:197:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async Object.loadConfig [as default] (/Users/xgqfrms-mbp/Documents/GitHub/ssr-next/src/next-ts-ssr-app/node_modules/next/dist/server/config.js:70:36)
    at async NextServer.prepare (/Users/xgqfrms-mbp/Documents/GitHub/ssr-next/src/next-ts-ssr-app/node_modules/next/dist/server/next.js:130:24)
    at async /Users/xgqfrms-mbp/Documents/GitHub/ssr-next/src/next-ts-ssr-app/node_modules/next/dist/cli/next-dev.js:307:13

Expected Behavior

'@next/mdx' should support ESM import

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[xgqfrms]

Next.js bug template

https://codesandbox.io/s/github/vercel/next.js/tree/canary/examples/reproduction-template?file=/pages/index.tsx

https://github.com/vercel/next.js/tree/canary/examples/reproduction-template

[PatrikTheDev]

From looking at the index.d.ts file for @next/mdx, couldn’t you just change your import line to import withMDX from "@next/mdx"?

[xgqfrms]

my solution

fix: NextMdx is not a function bug ✅ NextMdx.default

next.config.mjs

import * as NextMdx from '@next/mdx'

// ...

const withMDX = NextMdx.default({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm], // ESM ✅
  },
});

// ...

https://github.com/xgqfrms/ssr-next/commit/819d53c18cb1f876fd28fef4352ae96f31a0e4c6#r92243546

[PatrikTheDev]

I mean, that’s essentially the same code I sent you, just in a roundabout way. I recommend looking up the internals of ESM imports to learn how they work and what gets resolved

[xgqfrms]

I tried to read the source code of '@next/mdx'

https://github.com/vercel/next.js/blob/canary/packages/next-mdx/index.js

https://github.com/vercel/next.js/blob/canary/packages/next-mdx/index.d.ts

// HOF, Higher Order Function ✅

// CJS default export  & anonymous functions
module.exports = (pluginOptions = {}) => (nextConfig = {}) => { return Object.assign({}, nextConfig, {...config})};

update docs for ESM usages

// rename the export anonymous function with whatever
import NextMdx from '@next/mdx'; // ✅

NextMdx()

OR

// alias 
import * as NextMdx from '@next/mdx'; // ✅

NextMdx.default()

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.