How should mdx-js/loader v2 works with CRA?

[askides]

Hello,

I'm having a problem using MDX with create-react-app, i tried i every possible way for hours but without success..

The problem is this: following the documentation i installed the @mdx-js/loader, and as the docs say: 'There is no need to configure it'.

But when i create the example file, (i tried with the same example from the docs, but also other examples), React throws an exception telling me something like this:

failed to execute 'createElement' on 'document':

With the debugger i can see that React is trying to call createElement with the mdx file path as a parameter.

createElement('./static/29fh30fh20dh40e.mdx');

I noticed also, that the result does not change if i omit the inline babel import of mdx-js/loader. The error is the same:

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

There are the version i'm using for these experiments:

"@mdx-js/loader": "^2.0.0-rc.2"
"@mdx-js/mdx": "^2.0.0-rc.2"
"react": "^17.0.2"
"react-dom": "^17.0.2"

PS: After some trials, i decided to try it also on Next.js, and following the docs, it works perfectly, so the problem should be only in CRA.

Thank you guys.

[wooorm]

Could definitely be that CRA is not supported currently. Did you try their latest, v5?

[askides]

Yes, i tried with the last one CRA.

Also installed a brand new one with npx.

[seyoon20087]

I'm also experiencing the same issue (copy of #1871 (comment)).

package.json:

{
  "private": true,
  "dependencies": {
    "@mdx-js/loader": "^2.0.0-rc.2",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

src/content.mdx:

# Hello, world!

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

src/App.js:

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

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

If I try to do it an error is thrown in the console, something like this:

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/content.152fde8da01171ae4224.mdx') is not a valid name.
    at createElement (http://localhost:3000/static/js/bundle.js:16306:38)
    at createInstance (http://localhost:3000/static/js/bundle.js:17493:24)
    at completeWork (http://localhost:3000/static/js/bundle.js:26619:32)
    at completeUnitOfWork (http://localhost:3000/static/js/bundle.js:29924:20)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29896:9)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:29822:9)
    at renderRootSync (http://localhost:3000/static/js/bundle.js:29788:11)
    at performSyncWorkOnRoot (http://localhost:3000/static/js/bundle.js:29405:22)
    at scheduleUpdateOnFiber (http://localhost:3000/static/js/bundle.js:28993:11)
    at updateContainer (http://localhost:3000/static/js/bundle.js:32530:7)

[pannchat]

I'm experiencing the same issue. 🥲

[pannchat]

I think you can lower the @mdx-js/loader version in the CRA environment.
and the react-scripts also version is 4.0.3.

[7i7o]

Hi! I'm experiencing the same exact issue on a fresh CRA. I wanted to know if this has been fixed or someone found a workaround, since i'm following the getting started guides literally without success.

[jamescho7]

I was able to get a working configuration by downgrading @mdx-js/loader to 1.6.22 and react-scripts to 4.0.3.

Delete node_modules and package-lock.json in your project, update your dependency versions in package.json to:

"@mdx-js/loader": "^1.6.22",
"react-scripts": "4.0.3",

Then run npm install to re-install your dependencies.

When importing .mdx files using mdx-js/loader, you may get an error parsing the resulting JSX data. I was able to resolve this by using babel-loader as well

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

You may need to create a .babelrc file in your root directory with the following presets:

{ "presets": ["@babel/preset-env", "@babel/preset-react"] }

[Solo-steven]

Hi! Thanks for your solution, It works in my local environment, but in code sandbox, it still fails, is it convenient if you take a look at my code sandbox there? link(https://codesandbox.io/s/mdx-test-su6bzy?file=/.babelrc.json). thanks for any help!

[julienlaurent-migso]

Hi,

I am facing the same issue, but i don't want to downgrade my libraries to prevent dependencies vulnerabilties.

There is a solution to use mdx/loader with create-react-app like describe in the mdx documentation ?

how i can compile my .mdx file to execute 'createElement' like ?

Than you for your help,

[BastienFerrier]

Hi,

I'm experiencing the same problem, does someone found out any fix or workaround for it?

Thanks'

[brian-petersen]

I haven't yet found a fix for this, but I want to document some of my findings:

1. This is a problem with the create-react-app update to 5.0.0
2. The specific problem is in their upgrade to Webpack 5 as a part of the create-react-app update
3. The problem is that the asset module (previously file-loader) loader is being applied
4. Because of that, a path to the file (and not the generated react component) is imported

Relevant links:

1. https://github.com/facebook/create-react-app/pull/11201/files?diff=split&w=0#diff-8e25c4f6f592c1fcfc38f0d43d62cbd68399f44f494c1b60f0cf9ccd7344d697R573

I confirmed this by changing this line locally and running npm run start: https://github.com/facebook/create-react-app/blob/fd8c5f7b1b1d19d10d24cc2f9fdfc110585dc030/packages/react-scripts/config/webpack.config.js#L595 from

exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],

to

exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx|mdx)$/, /\.html$/, /\.json$/],

Once I did that, the file contents were picked up as I expected.

I'm not sure if this is a bug in MDX, CRA, or Webpack.

As I understand it, using the syntax import Content from "!!@mdx-js/loader!./views/terms/PrivacyPolicy/Content.mdx" should bypass all other loaders (as documented in https://webpack.js.org/concepts/loaders/) -- but that's not working.

[wooorm]

Given that you can change CRA to make MDX work, that seems to indicate that CRA can be patched to make MDX work, so perhaps you can ask CRA folks to apply that patch?

[wzard]

This solution worked for me. Using CRA5 with the latest @mds-js/loader.
Folks using react-app-rewired can use the following to exclude mdx files

   config.module.rules[1].oneOf = config.module.rules[1].oneOf.map((one) => {

      
      if (one.exclude) {
        one.exclude = [/^$/, /\.(js|mjs|jsx|ts|tsx|mdx)$/, /\.html$/, /\.json$/]
      }
      return one;
    })
    return config;

[haendzel]

@wzard Where? What file to edit?

[wzard]

@haendzel If you install react-app-rewired, then you can override webpack configuration by writing a config-override.js file. In that, you can put the above code.

[risu-p]

config.module.rules[1].oneOf = config.module.rules[1].oneOf.map((one) => {
  if (one.exclude && one.exclude instanceof Array) {
    one.exclude.push(/\.mdx?$/);
  }
  return one;
});

[mtajammulzia]

Any updates on this one? I have been trying to configure React with MDX for two days now but nothing seems to work.

I have tried using react-app-rewired and config-overrides.js but it fails and gives getBabelLoader() is deprecated error.

Following thread.

[zingbretsen]

I opened an issue in CRA here:
facebook/create-react-app#12166

The fix from @brian-petersen above (#1870 (comment)) works for me locally.

[zingbretsen]

and PR opened here: facebook/create-react-app#12167

[aakanshaverma11]

Hey @zingbretsen did you receive any update on merging the file ? This was really help, it works fine my local but not through pipeline.

[zingbretsen]

No updates yet. I switched to NextJS for the project I was working on 🤷

[userzimmermann]

Thanks @brian-petersen – After hours of frustration your #1870 (comment) saved my day … OMG: late evening already :D

This discussion is unfortunately hard to find when searching for Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ...

Anyway: Not only mdx should be added to the list, but also plain md – Please add the latter to your facebook/create-react-app#12167 PR as well, @zingbretsen

[mtajammulzia]

Can anyone help me out? I have the similar problem but @brian-petersen method doesn't fix it for me.

I have added

{
        test: /\.mdx?$/,
        use: [
          {
            loader: '@mdx-js/loader',
            /** @type {import('@mdx-js/loader').Options} */
            options: {}
          }
        ]
      }

in the rules of webpack.config.js and also changed the line mentioned in his comment and added "|mdx"

I have installed @mdx-js/loader, @types/mdx and @mdx-js/react (not relevant)

Any ideas what might be wrong?

[userzimmermann]

Should be loader: require.resolve('@mdx-js/loader'), @mtajammulzia

Have you tried it w/o your test: ..., use: [{ loader: ... definition; by just using explicit import ... from '!@mdx-js/loader!...'? I'm going that latter way; but your addition looks quite convenient … I'll also give it a try :)

And please post your error output. It's hard to help w/o ;)

[userzimmermann]

It works :) —by defining the loader simply like this (above the // "file" loader ... entry):

            {
              test: /\.(md|mdx)$/,
              loader: require.resolve('@mdx-js/loader')
            }

Thanks for the idea, @mtajammulzia! & @zingbretsen: You should also add this to your facebook/create-react-app#12167 PR

[userzimmermann]

Finally: I've found an elegant workaround :) —using https://github.com/gsoft-inc/craco & the following craco.config.js

const { addAfterLoader, loaderByName } = require('@craco/craco')

module.exports = {
    webpack: {
        configure: (webpackConfig) => {
            addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
                test: /\.(md|mdx)$/,
                loader: require.resolve('@mdx-js/loader')
            })

            return webpackConfig
        }
    }
}

[padunk]

Hi @userzimmermann ,
Thanks for uploading the workaround, but I found this error when starting my apps.
Do you have any idea why is this happening?
Thanks again.

[wooorm]

Your webpack is old. Update it

[padunk]

I'm using webpack 5.73.0

[wooorm]

Webpack 5 has it: https://webpack.js.org/api/loaders/#thisgetoptionsschema.
Maybe you use an old CRA which uses an old webpack, different from your own.
It is impossible to help you with so little information.

[Jerrylum]

Can confirm this works with CRA 5.0.1 and @mdx-js/loader 2.3.0. Good job 👍

[ChristianMurphy]

Summarizing the current status.
Create React App is deprecated and is no longer actively being maintained. reactjs/react.dev#5487 (comment)

The best course of action is to migrate to a build tool which is maintained.
Vite and Vitest have similar low configuration setup and extensive features set as Create React App had.
Some resources showing how to migrate:

• https://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vite
• https://cathalmacdonnacha.com/migrating-from-jest-to-vitest
• https://dev.to/henriquejensen/migrating-from-create-react-app-to-vite-a-quick-and-easy-guide-5e72
• https://dev.to/dmnchzl/migrate-a-webapp-from-cra-to-vite-ebe
• https://medium.com/@guitartsword/how-to-migrate-from-create-react-app-to-vite-348dbdcfd894

You can find documentation on how MDX integrates with vite here: https://mdxjs.com/docs/getting-started/#vite

If you'd like to add server side rendering support while migrating, React has some recommendations https://react.dev/learn/start-a-new-react-project (all of which also have MDX integrations)

---

If you are unable to migrate to a actively maintained build tool, see https://github.com/orgs/mdx-js/discussions/1870#discussioncomment-2530611 for a workaround for Create React App using CRACO.