MDXProvider integration problem when using CRA 5 (React 18) with CRACO

[thediveo]

In migrating the web UI of my open source tool lxkns to MDX v2 on React 18 with CRA 5 and CRACO I'm hitting the road block that the supplied component transformations seemingly do not get applied at all. MDX integration works, but the MDXProvider integration fails. What am I doing wrong?

For reference, the current state of affairs is in the Github branch feature/cra5-migration of the lxkns project.

Based on userzimmermann's post I've set up my craco.config.js as follows:

const { addAfterLoader, loaderByName } = require('@craco/craco')

module.exports = {
    webpack: {
        configure: (webpackConfig) => {
            addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
                test: /\.(md|mdx)$/,
                use: [
                    {
                        loader: require.resolve('@mdx-js/loader'),
                        /** @type {import('@mdx-js/loader').Options} */
                        options: {
                            providerImportSource: require.resolve('@mdx-js/react'),
                            rehypePlugins: [
                                require.resolve('rehype-slug'),
                            ],
                        }
                    }
                ]
            })

            return webpackConfig
        }
    }
}

Note: this uses the v4.0.1 version of the rehype-slug plugin, as CRACO doesn't seem to support ESM imports yet.

I've added providerImportSource (and tried both as a string as well as the outcome of require.resolve()) with the exact same result: no component transformations get applied. Also, the rehype plugin doesn't seem to be executed either.

I'm rendering the MDX inside my MuiMarkdown component as follows; the purpose of this component is to wrap the MDX-originating JSX HTML component in Material UI components:

const MarkdownArea = styled('div')(({ theme }) => ({
    // ...
}

const muiComponents = {
    // Get us rid of that pesky "validateDOMNesting(...): <p> cannot appear as a
    // descendant of <p>" by using a <div> instead of Typography's default <p>.
    p: (() => {
        const P = (props: any) => <Typography {...props} component="div" />
        return memo(P)
    })(),
    // ...
}

export interface MuiMarkdownProps {
    /** compiled MDX, which can also be lazy loaded. */
    mdx: (props: any) => JSX.Element
    /** shortcodes, that is, available components. */
    shortcodes?: { [key: string]: React.ComponentType<any> }
    /** CSS class name(s). */
    className?: string
    /** fallback components to render when lazily loading the mdx. */
    fallback?: JSX.Element
}

export const MuiMarkdown = ({ mdx: Mdx, className, shortcodes, fallback }: MuiMarkdownProps) => (
    <React.Suspense fallback={fallback || <ChapterSkeleton />}>
        <MDXProvider components={{ ...muiComponents, ...shortcodes }}>
            <MarkdownArea className={className}>
                <Mdx />
            </MarkdownArea>
        </MDXProvider>
    </React.Suspense>
)

What am I doing wrong? Is the option specification misplaced compared to what CRACO expects? Is this a misunderstanding by me of the MDXProvider integration? ...?

[wooorm]

a) You don’t need the provider: pass your components to the MDX content component
b) As you notice, CRA/CRACO have a bunch of problems with ESM, perhaps they just don‘t work.
c) you’re using a bunch of anys, which defeats the purpose of TypeScript, I recommend using the types that MDX ships: https://mdxjs.com/docs/getting-started/#types
d) if many things don’t work, that could also signal that CRA(CO) doesn’t support webpack 5, which I think our loader needs.

[thediveo]

@wooorm

• a) Bingo, thank you very much!
• b) that's the reason why I'm trying to get away with the latest plugin releases before the "Great Unified ESM Switch".
• d) I'm using CRACO 7.0.0 which explicitly mentions that it now supports CRA 5 and thus webpack 5.