CODEWITHSUNDEEP
javascriptreactjswebpackbabeljsmdxjs
js251150
js251150

Reputation: 71

How to correctly use @mdx-js/loader with create-react-app?

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.

Upvotes: 7

Views: 1485

Answers (1)

whoatenine
whoatenine

Reputation: 92

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"] }

Upvotes: 1

Related Questions