0

In order to use MDX v2 with remark and rehype plugins in react applications created with Create React App v5 I have to use CRACO (v7) and especially its ability to handle a configuration that is returned as a promise/async function. The reason is that CRACO uses CJS module-based configuration, while the remark and rehype plugins are ES modules. Now I want to use MDXv2 with remark/rehype plugins in React Styleguidist too.

This is my craco.config.js:

const { addAfterLoader, loaderByName } = require('@craco/craco')
const mdxplagues = require('./mdxplugins.js')

// https://github.com/facebook/create-react-app/pull/11886#issuecomment-1055054685
const ForkTsCheckerWebpackPlugin =
    process.env.TSC_COMPILE_ON_ERROR === 'true'
        ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
        : require('react-dev-utils/ForkTsCheckerWebpackPlugin');

module.exports = async (env) => {
    const mdxplagueConfig = await mdxplagues()

    return {
        webpack: {
            configure: (webpackConfig) => {
                addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
                    test: /\.(md|mdx)$/,
                    loader: require.resolve('@mdx-js/loader'),
                    /** @type {import('@mdx-js/loader').Options} */
                    options: mdxplagueConfig,
                })
                // https://github.com/facebook/create-react-app/pull/11886#issuecomment-1055054685
                webpackConfig.plugins.forEach((plugin) => {
                    if (plugin instanceof ForkTsCheckerWebpackPlugin) {
                        plugin.options.issue.exclude.push({ file: '**/src/**/?(*.){spec,test,cy}.*' });
                    }
                })
                return webpackConfig
            }
        }
    }
}

And this is my mdxplugins.js that returns an async function returing the needed plugin configurations:

const textrTypoEnDashes = (input) => {
    return input
        .replace(/ -- /gim, '–')
}

module.exports = async () => {
    const remarkGfm = (await import('remark-gfm')).default
    const remarkImages = (await import('remark-images')).default
    const remarkTextr = (await import('remark-textr')).default
    const remarkAccessibleEmoji = (await import('@fec/remark-a11y-emoji')).default
    const rehypeSlug = (await import('rehype-slug')).default
    const textrTypoApos = (await import('typographic-apostrophes')).default
    const textrTypoQuotes = (await import('typographic-quotes')).default
    const textrTypoPossPluralsApos = (await import('typographic-apostrophes-for-possessive-plurals')).default
    const textrTypoEllipses = (await import('typographic-ellipses')).default
    //const textrTypoEmDashes = (await import('typographic-em-dashes')).default
    const textrTypoNumberEnDashes = (await import('typographic-en-dashes')).default

    return {
        remarkPlugins: [
            remarkGfm,
            remarkImages,
            remarkAccessibleEmoji,
            [remarkTextr, {
                plugins: [
                    textrTypoApos,
                    textrTypoQuotes,
                    textrTypoPossPluralsApos,
                    textrTypoEllipses,
                    // textrTypoEmDashes,
                    textrTypoNumberEnDashes,
                    textrTypoEnDashes,
                ],
                options: {
                    locale: 'en-us'
                }
            }],
        ],
        rehypePlugins: [
            rehypeSlug,
        ],
    }
}

My problem is now that I need to apply this webpack/MDXv2 plugin configuration to styleguide.config.js (v13.0.0). I tried...

module.exports = async () => {
    return {
        ...
    }
}

...but this doesn't seem to be supported. A look into React Styleguidist's sources, namely scripts/config.ts seems to confirm this.

How can I synchronously resolve my MDX plugin configuration that I return via an async function from my mdxplugin.js CJS module within Styleguidist's CJS configuration module?

TheDiveO
  • 2,183
  • 2
  • 19
  • 38

0 Answers0