javascript - create-react-app で @mdx-js/loader を正しく使用するには?

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 loader または babel が適切に起動していないようです...よくわかりません。