MDX Provider: how to?

[angelod1as]

Is there a way to setup an MDX Provider that replaces tags globally?

The example below is using mdx-js. I don't know exactly how Remix deals with MDX.

import { MDXProvider } from '@mdx-js/tag'

import One from './one.mdx'
import Two from './two.mdx'
import Three from './three.mdx'

import { Title, Subtitle } from './body'

const components = {
  h1: Title,
  h2: Subtitle,
}

// Here is what I'm having to do right now with all my MDX imports
const AppWithoutProvider = () => (
  <div>
    <One components={components} />
    <Two components={components} />
    <Three components={components} />
  </div>
)

// Here's what would be perfect for me
const AppWithProvider = () => (
  <MDXProvider components={components}>
    <One />
    <Two />
    <Three />
  </MDXProvider>
)

[davecranwell-vocovo]

I've found a way around this as follows:

Firstly, I've had to patch node_modules/@remix-run/dev/compiler/plugins/mdx.js as follows (I recommend the patch-package NPM package)

diff --git a/node_modules/@remix-run/dev/compiler/plugins/mdx.js b/node_modules/@remix-run/dev/compiler/plugins/mdx.js
index 8f675f8..01a2b8f 100644
--- a/node_modules/@remix-run/dev/compiler/plugins/mdx.js
+++ b/node_modules/@remix-run/dev/compiler/plugins/mdx.js
@@ -101,7 +101,8 @@ export const links = undefined;
             pragma: "React.createElement",
             pragmaFrag: "React.Fragment",
             rehypePlugins,
-            remarkPlugins
+            remarkPlugins,
+            providerImportSource: '@mdx-js/react'
           });
           let contents = `
 ${compiled.value}

Once that's done I created a "pathless route" called __mdx.jsx as so, with all my mdx files in the sibling __mdx directory:

import { Outlet } from "@remix-run/react";

import { MDXProvider } from "@mdx-js/react";

const components = {
  Foo: ({children }) => {
    return (
      <div>
        <marquee>{children}</marquee>
      </div>
    );
  }
}

export default function Index() {
    return(
      <div className="prose max-w-none prose-a:text-pink-600 prose-li:marker:text-pink-600">
        <MDXProvider components={components}>
          <Outlet />
        </MDXProvider>
      </div>
    )
}

With this done, I can now put <Foo>bar</Foo> directly in my mdx files, without cluttering them with imports, and I get my old-school marquee as expected.

I'm honestly unclear if this has worked by design or by accident, but I can't complain. I've also not tested this widely, but it seems to work without problems.

I'm not sure why providerImportSource support isn't in the mdx plugin by default, perhaps it was oversight, but perhaps it was a more significant factor I've not yet discovered, so Caveat Emptor

[JoaoCnh]

Will try this out for my project this afternoon but Remix would benefit from being able to configure this out of the box 🤔

[machour]

You can always submit a proposal for this feature to be baked in, and see if it gets traction.

See our development process here: https://remix.run/docs/en/v1/pages/contributing#development-process

[ryanbalsdon]

A quick update because this is where Google is directing me with this issue:

You can set providerImportSource in the vite.config.js file instead of patching the package.

Here is an example of how to do that:

import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { ViteDevServer, defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import morgan from "morgan";
import mdx from "@mdx-js/rollup";

installGlobals();

export default defineConfig({
  plugins: [
    morganPlugin(),
    mdx({providerImportSource: '@mdx-js/react'}),
    remix(),
    tsconfigPaths()
  ],
  build: {
    target: 'ES2022'
  }
});

function morganPlugin() {
  return {
    name: "morgan-plugin",
    configureServer(server: ViteDevServer) {
      return () => {
        server.middlewares.use(morgan("tiny"));
      };
    },
  };
}