CODEWITHSUNDEEP
htmlreactjsmarkdownmdxmdxjs
Max Sun
Max Sun

Reputation: 1

MDX React throws error : The tag name provided ('/static/media/test-file.ea362b28dc9b8fdee704.mdx') is not a valid name

I'm trying to use @mdx-js/react to convert an mdx file to HTML.

This is my React code. The test-file.mdx is just a simple markdown file.

import React from 'react'
import TestFile from './test-file.mdx'
import { MDXProvider } from '@mdx-js/react'
import "./FilmJourneyPage.scss"
export const FilmJourneyPage = () => {
  return (
    <MDXProvider components={{}}>
      <div className="page-content film-journey">
        <TestFile />
      </div>
    </MDXProvider>
  )
}

Chrome throws this error: Unexpected Application Error! Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/test-file.ea362b28dc9b8fdee704.mdx') is not a valid name.

Could someone please help me take a look? Chatgpt tells me to modify the webpack.config.js but I'm not sure if that's the correct way.

I tried to add "@mdx-js/loader": "^3.0.1", "babel-loader": "^9.2.1" to my packages but I'm not sure if they are really needed.

Upvotes: 0

Views: 61

Answers (1)

Max Sun
Max Sun

Reputation: 1

OK I figured out! Chatgpt is correct lol

This answer gave me the inspiration. The reason that it doesn't work is that create-react-app doesn't know how to process .mdx file so we need to modify the webpack config rules. https://stackoverflow.com/a/66495392/8596401

In order to modify webpack.config.js, rather than running 'npm run eject' which is not advised, we need to use another npm package.

To install react-app-rewired:

npm install react-app-rewired --save-dev

Then create a config-overrides.js file at the root directory (not /src) and add this content.

module.exports = function override(config, env) {
  console.log('override!');
  let loaders = config.module.rules[1].oneOf;
  loaders.splice(loaders.length - 1, 0, {
      test: /\.mdx$/,
      use: ['babel-loader', '@mdx-js/loader']
  })
  return config;
}

The reason why this code is like this is from this tutorial: https://egghead.io/lessons/react-customize-create-react-app-cra-without-ejecting-using-react-app-rewired

Upvotes: 0

Related Questions