如何解决React项目中@mdx-js/react导入MDX文件的路径错误？

问题根源 #

你当前用内联loader（!babel-loader!mdx-loader!./Content.mdx）的方式导入MDX文件，在create-react-app环境下，webpack会把MDX文件识别为静态媒体资源，而非可编译的React组件，所以生成了/static/media/Content.xxx.mdx这类错误路径。

解决方案 #

步骤1：修改MDX导入方式 #

先移除内联loader，改用标准模块导入：

// SupportView.js
import React, { lazy, Suspense } from 'react';
import Page from 'src/components/Page';

// 去掉内联loader，直接导入MDX文件
const Content = lazy(() => import('./Content.mdx'));

const SupportView = () => {
  return (
    <Page title="Postman">
      <Suspense fallback={<div>加载中...</div>}>
        <Content />
      </Suspense>
    </Page>
  );
};

export default SupportView;

步骤2：配置Webpack处理MDX文件 #

因为create-react-app默认不支持MDX编译，我们用@craco/craco和@craco/craco-mdx来修改Webpack配置，无需执行eject：

1. 安装依赖：

npm install @craco/craco @craco/craco-mdx --save-dev

2. 修改package.json中的scripts，替换react-scripts为craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

3. 在项目根目录创建craco.config.js，添加MDX配置：

const cracoMdx = require('@craco/craco-mdx');

module.exports = {
  plugins: [
    {
      plugin: cracoMdx,
      options: {
        // MDX v3需要配置jsxImportSource
        mdxOptions: {
          jsxImportSource: '@mdx-js/react',
        },
      },
    },
  ],
};

可选：已eject项目的配置方式 #

如果你已经执行过npm run eject，直接修改webpack.config.js，在module.rules中添加MDX的处理规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...已有规则
      {
        test: /\.mdx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['react-app'],
            },
          },
          {
            loader: '@mdx-js/loader',
            options: {
              jsxImportSource: '@mdx-js/react',
            },
          },
        ],
      },
    ],
  },
};

版本兼容性检查 #

确保@mdx-js/react和@mdx-js/loader版本一致（你当前都是v3.0.1，没问题），避免版本不兼容导致的编译错误。

内容的提问来源于stack exchange，提问作者ucemrecan