MDX does not work with CRA 5.0.0

[zingbretsen]

Describe the bug

The current CRA version cannot load MDX content. It seems to be an issue with the Webpack config in react-scripts. Discussion on the MDX GitHub Q&A here:
mdx-js/mdx#1870

Possible remedy here:
mdx-js/mdx#1870 (comment)

(It works for me, changing the exclude line mentioned to include mdx, but I don't know if there are other considerations.)

Did you try recovering your dependencies?

N/A

Which terms did you search for in User Guide?

mdx, webpack

Environment

Environment Info:

current version of create-react-app: 5.0.0
running from ${HOME}/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System:
OS: macOS 12.2.1
CPU: (8) arm64 Apple M1 Pro
Binaries:
Node: 17.6.0 - ~/.nvm/versions/node/v17.6.0/bin/node
Yarn: Not Found
npm: 8.5.1 - ~/.nvm/versions/node/v17.6.0/bin/npm
Browsers:
Chrome: 99.0.4844.51
Edge: Not Found
Firefox: Not Found
Safari: 15.3
npmPackages:
react: Not Found
react-dom: Not Found
react-scripts: Not Found
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

https://mdxjs.com/docs/getting-started/#create-react-app-cra

1. npx create-react-app mdx-example
2. cd mdx-example
3. npm install @mdx-js/loader
4. Per the CRA "getting started" instructions from MDX, create a file src/content.mdx:

# Hello, world!

This is **markdown** with <span style={{color: "red"}}>JSX</span>: MDX!

5. Change src/App.js to contain:

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

export default function App() {
  return <Content />
}

6. npm run start

Expected behavior

Webpage should open with an h1 and p element, as written in the .mdx file.

Actual behavior

Webpage is blank, and there is an error in the console regarding loading the mdx component:

Reproducible demo

https://github.com/zingbretsen/cra-mdx-bug

You should be able to run

npm install
npm run start

[brian-petersen]

As I dug around through this, it's clear this became an issue with the recent Webpack 5 upgrade (as a part of the CRA 5.0 upgrade).

As a part of that upgrade (in PR #11201), the old file-loader loader was replaced with a asset module of type resource -- that's why a path is returned when the .mdx file is imported instead of properly processed.

It seems that the asset module still processes the file even when a double bang is used:

import Content from '!!@mdx-js/loader!./content.mdx'

I'm not sure if this is a webpack bug -- but if the double bang is used, I don't think the asset module loader should be processing this file in any kind of way.

[thediveo]

This is a real blocker for me to upgrade several React applications to CRA5.

[GeorgeWL]

also a huge blocker for me, text-heavy pages work so much better with mdx