如何正确使用 @mdx-js/loader 和 create-react-app？

Question

只需按照以下说明进行操作：https ://mdxjs.com/docs/getting-started/#create-react-app-cra

我做了以下事情：

$ npx create-react-app react-app
$ cd react-app
$ npm install @mdx-js/loader

然后按照入门指南创建文件，src/content.mdx如下所示：

# Hello, world!

This is **markdown** with <span style={{color: "red"}}>JSX</span>: MDX!

然后修改src/App.js如下：

/* eslint-disable import/no-webpack-loader-syntax */
import Content from '!@mdx-js/loader!./content.mdx'

export default function App() {
  return <Content />
}

当我运行该应用程序时，我在控制台上看到以下错误：

react-dom.development.js:20085 
        
       The above error occurred in the </static/media/content.152fde8da01171ae4224.mdx> component:

    at /static/media/content.152fde8da01171ae4224.mdx
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
bootstrap:27 
        
       Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/content.152fde8da01171ae4224.mdx') is not a valid name.
    at createElement (http://localhost:3000/static/js/bundle.js:16384:38)
    at createInstance (http://localhost:3000/static/js/bundle.js:17571:24)
    at completeWork (http://localhost:3000/static/js/bundle.js:26697:32)
    at completeUnitOfWork (http://localhost:3000/static/js/bundle.js:30002:20)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29974:9)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:29900:9)
    at renderRootSync (http://localhost:3000/static/js/bundle.js:29866:11)
    at performSyncWorkOnRoot (http://localhost:3000/static/js/bundle.js:29483:22)
    at scheduleUpdateOnFiber (http://localhost:3000/static/js/bundle.js:29071:11)
    at updateContainer (http://localhost:3000/static/js/bundle.js:32608:7)

我缺少什么？

看起来 webpack 加载器或 babel 没有正确启动......不确定。

Answer 1

我能够通过将 @mdx-js/loader 降级到 1.6.22 并将 React-scripts 降级到 4.0.3 来获得工作配置。

删除项目中的node_modules和package-lock.json，将package.json中的依赖版本更新为：

"@mdx-js/loader": "^1.6.22",
"react-scripts": "4.0.3",

然后运行 ​​npm install 重新安装依赖项。

使用 mdx-js/loader 导入 .mdx 文件时，解析生成的 JSX 数据时可能会出错。我也可以使用 babel-loader 解决这个问题

/* eslint-disable import/no-webpack-loader-syntax */
import Content from "!babel-loader!!@mdx-js/loader!./documents/sample.mdx";

您可能需要使用以下预设在根目录中创建 .babelrc 文件：

{ "presets": ["@babel/preset-env", "@babel/preset-react"] }