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

askides · 2021-12-23T19:59:04Z

askides
Dec 23, 2021

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.

Answered by ChristianMurphy

Oct 31, 2023

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:

View full answer

wooorm · 2021-12-24T10:09:25Z

wooorm
Dec 24, 2021
Maintainer

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

1 reply

askides Dec 24, 2021
Author

Yes, i tried with the last one CRA.

Also installed a brand new one with npx.

seyoon20087 · 2021-12-24T11:47:32Z

seyoon20087
Dec 24, 2021

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)

2 replies

pannchat Dec 31, 2021

I'm experiencing the same issue. 🥲

pannchat Dec 31, 2021

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 · 2022-01-21T17:37:38Z

7i7o
Jan 21, 2022

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.

0 replies

jamescho7 · 2022-02-19T09:12:43Z

jamescho7
Feb 19, 2022

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"] }

1 reply

Steven19Lee Feb 20, 2022

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 · 2022-02-23T08:39:43Z

julienlaurent-migso
Feb 23, 2022

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,

0 replies

BastienFerrier · 2022-03-02T08:38:29Z

BastienFerrier
Mar 2, 2022

Hi,

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

Thanks'

0 replies

brian-petersen · 2022-03-06T21:08:15Z

brian-petersen
Mar 6, 2022

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

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

Relevant links:

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.

5 replies

wooorm Mar 7, 2022
Maintainer

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 Apr 13, 2022

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 Jun 22, 2022

@wzard Where? What file to edit?

wzard Jun 22, 2022

@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 Jul 20, 2023

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 · 2022-03-13T08:55:19Z

mtajammulzia
Mar 13, 2022

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.

0 replies

zingbretsen · 2022-03-14T15:55:29Z

zingbretsen
Mar 14, 2022

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

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

1 reply

zingbretsen Mar 14, 2022

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

aakanshaverma11 · 2022-03-25T18:18:57Z

aakanshaverma11
Mar 25, 2022

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

1 reply

zingbretsen Apr 11, 2022

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

userzimmermann · 2022-04-05T18:43:33Z

userzimmermann
Apr 5, 2022

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

0 replies

mtajammulzia · 2022-04-06T07:06:43Z

mtajammulzia
Apr 6, 2022

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?

2 replies

userzimmermann Apr 6, 2022

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 Apr 6, 2022

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 · 2022-04-08T12:25:58Z

userzimmermann
Apr 8, 2022

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

20 replies

padunk Jun 17, 2022

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 Jun 18, 2022
Maintainer

Your webpack is old. Update it

padunk Jun 20, 2022

I'm using webpack 5.73.0

wooorm Jun 20, 2022
Maintainer

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 Jun 17, 2023

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

ChristianMurphy · 2023-10-31T18:30:33Z

ChristianMurphy
Oct 31, 2023
Maintainer

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:

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.

0 replies

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

Uh oh!

Replies: 14 comments · 33 replies

Uh oh!

wooorm Dec 24, 2021 Maintainer

Uh oh!

askides Dec 24, 2021 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wooorm Mar 7, 2022 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wooorm Jun 18, 2022 Maintainer

Uh oh!

Uh oh!

wooorm Jun 20, 2022 Maintainer

Uh oh!

Uh oh!

ChristianMurphy Oct 31, 2023 Maintainer

Replies: 14 comments 33 replies

wooorm
Dec 24, 2021
Maintainer

askides Dec 24, 2021
Author

wooorm Mar 7, 2022
Maintainer

wooorm Jun 18, 2022
Maintainer

wooorm Jun 20, 2022
Maintainer

ChristianMurphy
Oct 31, 2023
Maintainer