MDXProvider Not using Custom Components in Vite React Project

[SneakyBuzZ]

I'm using React, Vite, TypeScript, and Tailwind CSS and have configured MDXProvider to use custom React components for rendering MDX content. However, the MDX is being rendered using default HTML tags instead of my custom components. Additionally, console.log statements within my custom components are not being executed, indicating they are not being rendered at all.

What I am using

• React
• Vite
• TypeScript
• Tailwind CSS
• @mdx-js/react
• @mdx-js/rollup

Code that shows how I added custom components

MDXProviderWrapper.tsx:

import { MDXProvider } from "@mdx-js/react";
import { MDXComponents } from "mdx/types";
import CodeblockMDX from "@/components/mdx/codeblock.mdx";
import {
  CustomH1,
  CustomH2,
  CustomLink,
  CustomParagraph,
  CustomSpan,
} from "@/components/mdx/html.mdx";

const components: MDXComponents = {
  h1: CustomH1,
  h2: CustomH2,
  p: CustomParagraph,
  a: CustomLink,
  span: CustomSpan,
  pre: CodeblockMDX,
};

//I HAVE ALSO TRIED THIS WAY

// const components: MDXComponents = {
//   h1: (props) => <CustomH1 {...props} />,
//   h2: (props) => <CustomH2 {...props} />,
//   p: (props) => <CustomParagraph {...props} />,
//   a: (props) => <CustomLink {...props} />,
//   span: (props) => <CustomSpan {...props} />,
//   pre: CodeblockMDX,
// };

interface MDXProviderWrapperProps {
  children: React.ReactNode;
}

const MDXProviderWrapper = ({ children }: MDXProviderWrapperProps) => {
  return <MDXProvider components={components}>{children}</MDXProvider>;
};

export default MDXProviderWrapper;

this "@/components/mdx/html.mdx" import says that it is importing from folder called "html.mdx.tsx"

codeblock.mdx.tsx

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";

interface CodeblockMDXProps {
  className?: string;
  children?: React.ReactNode;
}

const CodeblockMDX = ({ className, children }: CodeblockMDXProps) => {
  const language = className?.replace("language-", "") || "";

  return (
    <div className="my-6 rounded-xl overflow-hidden shadow-lg border border-app-border-light dark:border-app-border-dark">
      <div className="flex items-center justify-start bg-app-primary-light dark:bg-app-primary-dark text-white text-sm px-4 py-2 rounded-t-xl">
        <div className="flex space-x-2 mr-4">
          <span className="w-3 h-3 bg-red-500 rounded-full"></span>
          <span className="w-3 h-3 bg-yellow-500 rounded-full"></span>
          <span className="w-3 h-3 bg-green-500 rounded-full"></span>
        </div>
        <span className="text-app-secondary-light dark:text-app-secondary-dark">
          {language.toUpperCase() || "CODE"}
        </span>
      </div>

      <SyntaxHighlighter
        language={language}
        showLineNumbers
        customStyle={{
          padding: "1rem",
          backgroundColor: "#282a36",
          borderRadius: "0 0 0.75rem 0.75rem",
          margin: 0,
        }}
      >
        {String(children).trim()}
      </SyntaxHighlighter>
    </div>
  );
};

export default CodeblockMDX;

html.mdx.tsx

import { ComponentPropsWithoutRef } from "react";

export const CustomH1 = (props: ComponentPropsWithoutRef<"h1">) => {
  console.log("CustomH1 Rendered: ", props);
  return (
    <h1
      className="text-4xl lg:text-5xl font-bold tracking-tight text-app-primary-dark dark:text-app-primary-light"
      {...props}
    />
  );
};

export const CustomH2 = (props: ComponentPropsWithoutRef<"h2">) => {
  console.log("YES H2 Rendered: ", props);
  return (
    <h2
      className="text-4xl lg:text-4xl font-semibold tracking-tight text-app-secondary-dark dark:text-app-secondary-light"
      {...props}
    />
  );
};

export const CustomParagraph = (props: ComponentPropsWithoutRef<"p">) => (
  <p
    className="text-base lg:text-lg text-app-secondary-dark dark:text-app-secondary-light tracking-tight"
    {...props}
  />
);

export const CustomLink = (props: ComponentPropsWithoutRef<"a">) => {
  console.log("YES LINK Rendered: ", props);
  return (
    <a
      className="text-app-btn-primary hover:text-app-btn-secondary transition-colors underline"
      {...props}
    />
  );
};

export const CustomSpan = (props: ComponentPropsWithoutRef<"span">) => (
  <span
    className="text-app-secondary-dark dark:text-app-secondary-light"
    {...props}
  />
);

vite.config.ts

import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import mdx from "@mdx-js/rollup";

export default defineConfig({
  plugins: [
    {
      enforce: "pre",
      ...mdx({}),
    },
    react({ include: /\.(jsx|js|mdx|md|tsx|ts)$/ }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Problem

The MDX content is being rendered, but it is using the default HTML tags instead of my custom React components (CustomH1). Additionally, the console.log statements within my custom components are not being executed, indicating that these components are not being rendered at all.

I expect the MDXProvider to substitute the default HTML tags with my custom components, and for the console.log statements within those components to be printed to the console.

Current code's output

[ChristianMurphy]

Duplicate of https://github.com/orgs/mdx-js/discussions/2561

You are trying to override native HTML elements.

This is how JSX works: some things are components, some things are not components. I’d really recommend using that here too.
For in-depth info on this, see the documentation: https://mdxjs.com/docs/using-mdx/.

[SneakyBuzZ]

Thank you. That cleared things up.

[remcohaszing]

You need to set the options providerImportSource to @mdx-js/react in the rollup MDX plugin.

See https://mdxjs.com/docs/using-mdx/#mdx-provider

[SneakyBuzZ]

Thank you so much! It works.