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