MDX React 抛出错误：提供的标签名称（'/static/media/test-file.ea362b28dc9b8fdee704.mdx'）不是有效名称

Question

我正在尝试使用 @mdx-js/react 将 mdx 文件转换为 HTML。

这是我的 React 代码。 test-file.mdx 只是一个简单的 markdown 文件。

import React from 'react'
import TestFile from './test-file.mdx'
import { MDXProvider } from '@mdx-js/react'
import "./FilmJourneyPage.scss"
export const FilmJourneyPage = () => {
  return (
    <MDXProvider components={{}}>
      <div className="page-content film-journey">
        <TestFile />
      </div>
    </MDXProvider>
  )
}

Chrome 抛出此错误： 意外的应用程序错误！ 无法在“文档”上执行“createElement”：提供的标记名称（“/static/media/test-file.ea362b28dc9b8fdee704.mdx”）不是有效名称。

有人可以帮我看一下吗？ Chatgpt 告诉我修改 webpack.config.js 但我不确定这是否是正确的方法。

我尝试将 "@mdx-js/loader": "^3.0.1", "babel-loader": "^9.2.1" 添加到我的包中，但我不确定它们是否真的需要。

Answer 1

好吧我明白了！ Chatgpt 是正确的哈哈

这个答案给了我启发。它不起作用的原因是 create-react-app 不知道如何处理 .mdx 文件，因此我们需要修改 webpack 配置规则。 https://stackoverflow.com/a/66495392/8596401

为了修改webpack.config.js，而不是运行

npm run eject

不建议这样做，我们需要使用另一个 npm 包。

npm install react-app-rewired --save-dev

然后创建一个 config-overrides.js 文件并添加此内容。

module.exports = function override(config, env) {
console.log('override!');
let loaders = config.module.rules[1].oneOf;
loaders.splice(loaders.length - 1, 0, {
    test: /\.mdx$/,
    use: ['babel-loader', '@mdx-js/loader']
})
return config;

}

这段代码之所以是这样的原因来自本教程：https://egghead.io/lessons/react-customize-create-react-app-cra-without-ejecting-using-react-app-rewired