How to use MDXProvider in RSC (React Server Components) for SSG (static site generation)?

[n9]

I am using @mdx-js/rollup in a SSG app (based on RSC/SSG example).

When I add providerImportSource: '@mdx-js/react' to the @mdx-js/rollup plugin options:

...
export default defineConfig({
  plugins: [
    mdx({
      providerImportSource: '@mdx-js/react'
    }),
...

Vite reports the following error:

[vite] Internal server error: React.createContext is not a function
      at eval (.../node_modules/@mdx-js/react/lib/index.js:29:26)
      at async ESModulesEvaluator.runInlinedModule (file:///.../node_modules/vite/dist/node/module-runner.js:910:3)
      at async ModuleRunner.directRequest (file:///.../node_modules/vite/dist/node/module-runner.js:1119:59)
      at async ModuleRunner.cachedRequest (file:///.../node_modules/vite/dist/node/module-runner.js:1037:73)
      at async eval (.../node_modules/@mdx-js/react/index.js:1:1)
      at async ESModulesEvaluator.runInlinedModule (file:///.../node_modules/vite/dist/node/module-runner.js:910:3)
      at async ModuleRunner.directRequest (file:///.../node_modules/vite/dist/node/module-runner.js:1119:59)
      at async ModuleRunner.cachedRequest (file:///.../node_modules/vite/dist/node/module-runner.js:1037:73)
      at async eval (.../posts/counter.mdx:5:31)
      at async ESModulesEvaluator.runInlinedModule (file:///.../node_modules/vite/dist/node/module-runner.js:910:3)

I assume this is because React.createContext is not supported in a server component.

How to use MDXProvider in RSC (React Server Components) / SSG (static site generation)? Or how to define "implicit" components in SSG?

[remcohaszing]

You are correct. You can’t use context providers in RSC.

Next.js allows users to define the file mdx-components.tsx. Users can export useMdxComponents() from that file. Next.js uses a Webpack alias matching the providerImportSource option to resolve it. You can implement the same pattern for any other bundler.

[n9]

@remcohaszing Thanks for you answer!

For others: a file mdx-components.tsx (a template stolen from here vercel/next.js#50897 (comment)):

import type { MDXComponents } from 'mdx/types'
 
// This file allows you to provide custom React components
// to be used in MDX files. You can import and use any
// React component you want, including components from
// other libraries.
 
// This file is required to use MDX in `app` directory.
export function useMDXComponents(): MDXComponents {
  return {
    // Allows customizing built-in components, e.g. to add styling.
    // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
  }
}

then register an alias (app-mdx-components) and pass it to the providerImportSource option:

...
export default defineConfig({
  resolve: {
    alias: {
      "app-mdx-components": path.resolve(__dirname, "./src/mdx-components"),
    },
  },
  plugins: [
    mdx({
      providerImportSource: 'app-mdx-components'
    }),
...

Note: The alias is need as mdx files can be in different paths. (Dev mode works without alias.)

[remcohaszing]

Note that useMDXComponents does not receive any arguments.

[n9]

OK, thanks, I removed args.