mdx: Bug with CodeBlocks
Subject of the issue
I followed the tutorial to turn on syntax highlighting on my application but I am getting the following error:
The above error occurred in the <Highlight> component:
in Highlight (at CodeBlock.jsx:8)
in Unknown (at App.jsx:50)
in code (created by MDXCreateElement)
in MDXCreateElement (at landing.md:65)
in pre (created by MDXCreateElement)
in MDXCreateElement (at landing.md:65)
in wrapper (created by MDXCreateElement)
in MDXCreateElement (at landing.md:21)
in MDXContent (at App.jsx:88)
in MDXProvider (at App.jsx:87)
in div (created by ForwardRef(Container))
in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
in WithStyles(ForwardRef(Container)) (at App.jsx:86)
in Suspense (at App.jsx:85)
in main (created by ProxyComponent)
in ProxyComponent (created by StyledComponent)
in StyledComponent (created by Content)
in Content (at App.jsx:84)
in Layout (created by Root)
in LayoutProvider (created by Root)
in Root (at App.jsx:81)
in Router (created by BrowserRouter)
in BrowserRouter (at App.jsx:80)
in ThemeProvider (at App.jsx:78)
in Unknown (at src/index.js:8)
in StrictMode (at src/index.js:7)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
index.js:207 Uncaught TypeError: Cannot read property 'length' of undefined
at Object.matchGrammar (index.js:207)
at Object.tokenize (index.js:313)
at Highlight.render (index.js:306)
at finishClassComponent (react-dom.development.js:17160)
at updateClassComponent (react-dom.development.js:17110)
at beginWork (react-dom.development.js:18620)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at beginWork$1 (react-dom.development.js:23203)
at performUnitOfWork (react-dom.development.js:22154)
at workLoopSync (react-dom.development.js:22130)
at performSyncWorkOnRoot (react-dom.development.js:21756)
at react-dom.development.js:11089
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
at workLoop (scheduler.development.js:597)
at flushWork (scheduler.development.js:552)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:164)
This is my CodeBlock.jsx
component:
import Highlight, { defaultProps } from "prism-react-renderer";
import React from "react";
export default ({ children, className }) => {
const language = className.replace(/language-/, "");
return (
<Highlight {...defaultProps} code={children} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<pre className={className} style={{ ...style, padding: "20px" }}>
{tokens.map((line, i) => (
<div key={i} {...getLineProps({ line, key: i })}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
))}
</pre>
)}
</Highlight>
);
};
And this is my MDXProvider
configuration:
const components = {
h1: (props) => (
<Typography variant="h2" component="h1" {...props} gutterBottom />
),
p: (props) => <Typography variant="body1" {...props} paragraph />,
hr: (props) => <Divider light {...props} />,
code: CodeBlock,
};
I have bootstrapped my application using CRA.
Your environment
- OS: Windows 10 Pro 1909
- Packages:
"dependencies": {
"@material-ui/core": "^4.9.14",
"@material-ui/icons": "^4.9.1",
"@mdx-js/react": "^1.6.1",
"fg-loadcss": "^3.1.0",
"prism-react-renderer": "^1.1.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
--- SNIP ---
},
"devDependencies": {
"babel-loader": "^8.1.0",
"mdx-loader": "^3.0.2"
}
- Env:
- yarn: 1.22.4
- node: 13.12.0
Steps to reproduce
Tell us how to reproduce this issue. Please provide a working and simplified example.
🎉 BONUS POINTS for creating a minimal reproduction and uploading it to GitHub. This will get you the fastest support. 🎉
Expected behaviour
Should be working. 😵
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 19 (11 by maintainers)
Also this CodeBlock looks like it was written to replace the code element not pre
Isn’t classname undefined if there’s no language on the code block?
I’m any case, the error in the issue isn’t complete. The react error points to an error preceding the one pasted that isn’t included.