fix: mdx components in markdown snippets

wevm · Jan 13, 2024 · 771cfc0 · 771cfc0
1 parent 9c29e62
commit 771cfc0
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/src/app/root.tsx b/src/app/root.tsx
@@ -1,9 +1,11 @@
+import { MDXProvider } from '@mdx-js/react'
 import { type ReactNode, useEffect, useRef } from 'react'
 import { Helmet } from 'react-helmet'
 import { ScrollRestoration, useLocation } from 'react-router-dom'
 import { Layout } from 'virtual:consumer-components'
 import 'virtual:styles'
 
+import { components } from './components/mdx/index.js'
 import { useConfig } from './hooks/useConfig.js'
 import { useOgImageUrl } from './hooks/useOgImageUrl.js'
 import { PageDataContext } from './hooks/usePageData.js'
@@ -28,13 +30,15 @@ export function Root(props: {
     <>
       <Head frontmatter={frontmatter} />
       {typeof window !== 'undefined' && <ScrollRestoration />}
-      <Layout frontmatter={frontmatter} path={path}>
-        <PageDataContext.Provider
-          value={{ filePath, frontmatter, previousPath: previousPathRef.current }}
-        >
-          {children}
-        </PageDataContext.Provider>
-      </Layout>
+      <MDXProvider components={components}>
+        <Layout frontmatter={frontmatter} path={path}>
+          <PageDataContext.Provider
+            value={{ filePath, frontmatter, previousPath: previousPathRef.current }}
+          >
+            {children}
+          </PageDataContext.Provider>
+        </Layout>
+      </MDXProvider>
     </>
   )
 }

diff --git a/src/app/routes.tsx b/src/app/routes.tsx
@@ -19,7 +19,7 @@ const notFoundRoute = (() => {
           element: (
             <Root frontmatter={frontmatter} path={virtualRoute.path}>
               <DocsLayout>
-                <route.default components={components} />
+                <route.default />
               </DocsLayout>
             </Root>
           ),

diff --git a/src/app/types.ts b/src/app/types.ts
@@ -31,7 +31,7 @@ export type Layout = {
 }
 
 export type Module = {
-  default: React.ComponentType<{ components: MDXComponents }>
+  default: React.ComponentType
   frontmatter?: Frontmatter
 }
 

diff --git a/src/vite/plugins/mdx.ts b/src/vite/plugins/mdx.ts
@@ -118,6 +118,7 @@ export async function mdx(): Promise<PluginOption[]> {
   const rehypePlugins = getRehypePlugins({ markdown, twoslash })
   return [
     mdxPlugin({
+      providerImportSource: '@mdx-js/react',
       remarkPlugins,
       rehypePlugins,
     }),