Using mdx in @next

I think many CRA users like myself are using mdx-js/mdx. The mdx docs for CRA setup use create-react-app-rewired, but I’ve managed just fine in CRA v1.x without ejecting or rewiring by inlining webpack loader and eslint overrides:

/* eslint-disable import/no-webpack-loader-syntax */
import Content from '!babel-loader!@mdx-js/loader!./Content.mdx';

I tried the same course of action in @2.0.0 but its not working for reasons I haven’t looked into yet. (I’ll leave details in a comment below. Raising at mdx-js may be appropriate.)

THE REASON I’m submitting this issue is to identify MDX usage as a likely reason for ejecting/rewiring in response to @Timer’s comment https://github.com/timarney/react-app-rewired/issues/162#issuecomment-418708200. The future support outlook for rewired and missing workaround for CRA@next is unfortunate for MDX users.

[jamesknelson]

One issue with supporting MDX in the same way that SCSS is supported is that it’s rare that you’ll want to use vanilla MDX. At minimum, you’re probably going to want to add plugins to improve typography, add emoji support, and handle front matter – but you can go further and do things like add id props to titles for deep linking, generate a table of contents, etc.

I’ve tried putting together an MDX macro with all this, but can’t find a way to get recompile-on-save working, which is a bummer.

I do have MDX working with CRA@2 though, using import('!babel-loader!mdx-loader!./tutorial/make-a-blog.md') and the following .babelrc:

{
  "presets": ["react-app"]
}

Even if this isn’t supported, I feel like it’s probably the most pragmatic approach atm.

[Timer]

We should ask for a @mdx-js/macro or mdx.macro package!