Just following the instructions from: https://mdxjs.com/docs/getting-started/#create-react-app-cra
I did the following:
$ npx create-react-app react-app
$ cd react-app
$ npm install @mdx-js/loader
Then as per the getting started guide, created the src/content.mdx file like so:
# Hello, world!
This is **markdown** with <span style={{color: "red"}}>JSX</span>: MDX!
Then modified src/App.js like so:
/* eslint-disable import/no-webpack-loader-syntax */
import Content from '!@mdx-js/loader!./content.mdx'
export default function App() {
return <Content />
}
When I run the app, then I see the following errors on the console:
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)
What am I missing?
Looks like the webpack loader or babel isn't kicking in properly... not sure.
I was able to get a working configuration by downgrading @mdx-js/loader to 1.6.22 and react-scripts to 4.0.3.
Delete node_modules and package-lock.json in your project, update your dependency versions in package.json to:
"@mdx-js/loader": "^1.6.22",
"react-scripts": "4.0.3",
Then run npm install to re-install your dependencies.
When importing .mdx files using mdx-js/loader, you may get an error parsing the resulting JSX data. I was able to resolve this by using babel-loader as well
/* eslint-disable import/no-webpack-loader-syntax */
import Content from "!babel-loader!!@mdx-js/loader!./documents/sample.mdx";
You may need to create a .babelrc file in your root directory with the following presets:
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
Hi,
I had the same issue as you. You need to install CRACO to make it work with CRA 5+. Here an excerpt from the link you sent:
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.After installing CRACO everything works as expected.