Mdx: Docs: How to use MDX with create-react-app?

[bcherny]

Is it possible to do without ejecting?

[timneutkens]

Check https://github.com/mdx-js/mdx/tree/master/examples/create-react-app

[bcherny]

Thanks for the quick response @timneutkens!

For anyone that finds this issue in the future:

1. Init a project with create-react-app
2. Install react-app-rewired (docs)
3. Install mdx: yarn add --dev @mdx-js/loader @mdx-js/mdx
4. Copy+paste this config-overrides.js into your project's root

And if you're using TypeScript, also:

1. Install react-app-rewire-typescript
2. Add it to your existing config-overrides.js (docs)

3. Create an ambient file mdx.d.ts and include it in your tsconfig.json:

   // mdx.d.ts
   declare module '*.mdx' {
   let MDXComponent: () => JSX.Element
   export default MDXComponent
   }
   

[timneutkens]

👍 👌 looks great

[tornordqvist]

@bcherny do you have any updated url to the config-file?
https://github.com/mdx-js/mdx/blob/master/examples/create-react-app/config-overrides.js

[Joshua-Sherer-Bose]

@tornordqvist - The config-file is in the repo's history: https://github.com/mdx-js/mdx/blob/8469707ef5f0dcf3c0d56cf2793710916ef92c0c/examples/create-react-app/config-overrides.js