How to use MDXProvider in RSC (React Server Components) for SSG (static site generation)? #2641
-
|
I am using When I add ...
export default defineConfig({
plugins: [
mdx({
providerImportSource: '@mdx-js/react'
}),
...Vite reports the following error: I assume this is because How to use MDXProvider in RSC (React Server Components) / SSG (static site generation)? Or how to define "implicit" components in SSG? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
You are correct. You can’t use context providers in RSC. Next.js allows users to define the file |
Beta Was this translation helpful? Give feedback.
-
|
@remcohaszing Thanks for you answer! For others: a file 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 ( ...
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.) |
Beta Was this translation helpful? Give feedback.
-
|
Note that |
Beta Was this translation helpful? Give feedback.
-
|
OK, thanks, I removed args. |
Beta Was this translation helpful? Give feedback.
You are correct. You can’t use context providers in RSC.
Next.js allows users to define the file
mdx-components.tsx. Users can exportuseMdxComponents()from that file. Next.js uses a Webpack alias matching theproviderImportSourceoption to resolve it. You can implement the same pattern for any other bundler.