Simplemente siguiendo las instrucciones de: https://mdxjs.com/docs/getting-started/#create-react-app-cra
Hice lo siguiente:
$ npx create-react-app react-app $ cd react-app $ npm install @mdx-js/loader Luego, según la guía de inicio, creó el archivo src/content.mdx así:
# Hello, world! This is **markdown** with <span style={{color: "red"}}>JSX</span>: MDX! Luego modificó src/App.js así:
/* eslint-disable import/no-webpack-loader-syntax */ import Content from '!@mdx-js/loader!./content.mdx' export default function App() { return <Content /> }Cuando ejecuto la aplicación, veo los siguientes errores en la consola:
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)¿Qué me estoy perdiendo?
Parece que el cargador de paquetes web o babel no funciona correctamente... no estoy seguro.
Pude obtener una configuración funcional degradando @mdx-js/loader a 1.6.22 y react-scripts a 4.0.3.
Elimine node_modules y package-lock.json en su proyecto, actualice sus versiones de dependencia en package.json a:
"@mdx-js/loader": "^1.6.22", "react-scripts": "4.0.3",Luego ejecute npm install para reinstalar sus dependencias.
Al importar archivos .mdx mediante mdx-js/loader, es posible que obtenga un error al analizar los datos JSX resultantes. Pude resolver esto usando babel-loader también
/* eslint-disable import/no-webpack-loader-syntax */ import Content from "!babel-loader!!@mdx-js/loader!./documents/sample.mdx";Es posible que deba crear un archivo .babelrc en su directorio raíz con los siguientes ajustes preestablecidos:
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }Hola,
Tuve el mismo problema que tú. Debe instalar CRACO para que funcione con CRA 5+. Aquí un extracto del enlace que enviaste:
Note: rewiring with CRACO (see below) is currently required for CRA 5, due to a bug in react-scripts (facebook/create-react-app#12166), which is also tracked at mdx-js/mdx#1870.Después de instalar CRACO todo funciona como se esperaba.