Skip to content

Docs: providerImportSource in MDX is misleading #54212

@joshuaavalon

Description

@joshuaavalon

What is the improvement or update you wish to see?

Currently, @next/mdx uses @mdx-js/react by default but the example tell you to set providerImportSource to "@mdx-js/react".

config.resolve.alias['next-mdx-import-source-file'] = [
'private-next-root-dir/src/mdx-components',
'private-next-root-dir/mdx-components',
'@mdx-js/react',
]

If you set providerImportSource to "@mdx-js/react", mdx-components.tsx from "Getting Started" will no longer work.

Is there any context that might help us understand?

Next.js example

import remarkGfm from 'remark-gfm'
import createMDX from '@next/mdx'
 
/** @type {import('next').NextConfig} */
const nextConfig = {}
 
const withMDX = createMDX({
  options: {
    extension: /\.mdx?$/,
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
    // If you use `MDXProvider`, uncomment the following line.
    // providerImportSource: "@mdx-js/react",
  },
})
export default withMDX(nextConfig)

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/building-your-application/configuring/mdx

Metadata

Metadata

Assignees

No one assigned

    Labels

    DocumentationRelated to Next.js' official documentation.locked

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions