这是一个od（d）Ysee因为整个MDX2 + CRA5 + remark/reype生态系统在我的经验中很容易断裂，而MDX文档将CRACO7与CRA5一起使用，MDX项目在被友好地询问时将矛头指向了CRACO，并且在帮助我克服ES模块和CSJ障碍以便最终使这些部分工作方面没有帮助。（目前）我不知道这个设置实际上有多稳健。

• 升级到CRA 5
• 安装CRACO 5
• 确保在package.json脚本中调用craco命令而不是react。
• 确保清除你的（过时的）依赖项。
• 添加这些依赖项和dev依赖项：

"@mdx-js/loader": "^2.2.1",
    "@mdx-js/mdx": "^2.2.1",
    "@mdx-js/react": "^2.2.1",
    "@types/mdx": "^2.0.3",

"@craco/craco": "^7.0.0",
    "@craco/types": "^7.0.0",

• 如果过去您在src/index.d.ts中有declare module '*.mdx {...}'，那么现在完全删除它，因为它会与MDXv2加载程序附带的内容冲突。
• 从所有*.mdx导入中删除!babel-loader!mdx-loader!。2不要*****使用!@mdx-js/loader!等，因为下面的webpack配置将负责预处理。
• 创建一个craco.config.js，如下所示;这是一个更详细的配置，显示了如何实际引入ES模块，CRACO 5在其配置中仍然不支持ESM，但需要通过延迟配置设置障碍进行动态导入：

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

module.exports = async (env) => {
    const remarkGfm = (await import('remark-gfm')).default
    const remarkImages = (await import('remark-images')).default
    const remarkTextr = (await import('remark-textr')).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 textrTypoEnDashes = (await import('typographic-en-dashes')).default

    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: {
                        remarkPlugins: [
                            remarkGfm,
                            remarkImages,
                            [remarkTextr, {
                                plugins: [
                                    textrTypoApos,
                                    textrTypoQuotes,
                                    textrTypoPossPluralsApos,
                                    textrTypoEllipses,
                                    // textrTypoEmDashes,
                                    textrTypoEnDashes,
                                ],
                                options: {
                                    locale: 'en-us'
                                }
                            }],
                        ],
                        rehypePlugins: [
                            rehypeSlug,
                        ],
                    }
                })
                return webpackConfig
            }
        }
    }
}