Hi! I've tried using MDX with Create React App in this example, but the content won't render.
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)How can I do to fix this? I will be very appreciated if someone fixes this issue.
Hi! I've tried using MDX with Create React App in this example, but the content won't render.
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:
src/App.js:
If I try to do it an error is thrown in the console, something like this:
How can I do to fix this? I will be very appreciated if someone fixes this issue.