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: https://github.com/mdx-js/mdx/discussions/1870

Possible remedy here: https://github.com/mdx-js/mdx/discussions/1870#discussioncomment-2304871

(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: 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 }

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:

<img width="1080" alt="Screen Shot 2022-03-14 at 11 37 26 AM" src="https://user-images.githubusercontent.com/2752623/158209225-e5b2d85b-50cb-4ff0-95f6-aa42aad27e0e.png">

### 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 https://github.com/facebook/create-react-app/pull/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