search

mdx-js / mdx

Markdown for the component era
https://mdxjs.com
MIT License
17.41k stars 1.14k forks source link

Bug with CodeBlocks #1076

Closed aress31 closed 3 years ago

aress31 commented 4 years ago

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

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. 😵

wooorm commented 4 years ago

The error seems to indicate the problem is in the highlighting. What value are you highlighting?

aress31 commented 4 years ago

I have just made some test to see whether the highlighting is working as it should or not, this is the content of my Landing.mdx file:

### A few tests

```javascript
<div
  style={{
    backgroundColor: "rebeccapurple",
    padding: "20px",
    marginTop: "20px",
  }}
/>
(supposed to be 3 backticks here but because of GitHub MD reader cant put them)
wooorm commented 4 years ago

You can use more backticks (say, 5) on the outer code, if you want to include backticks (day, 4) inside the code!

aress31 commented 4 years ago

@wooorm thanks for the comment but that's not the core issue here, the main problem is the above post and error. ☺

wooorm commented 4 years ago

True! I’m on mobile now and was under the impression there were more positive or negative examples you provided, that were hidden because of that for some reason. If not: could you clarify what works and what doesn’t?

aress31 commented 4 years ago

Everything works beside the CodeBlock - I followed the tutorial on the MDX website. The use of code block in my mdx files ( ```) trigger the error detailed in the opening post.

wooorm commented 4 years ago

/cc @johno you wrote the guide originally (and /cc @ChristopherBiscardi, as I believe you’ve written similar articles). Any idea what’s going on here?

ChristopherBiscardi commented 4 years ago

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.

ChristopherBiscardi commented 4 years ago

Also this CodeBlock looks like it was written to replace the code element not pre

aress31 commented 4 years ago

@ChristopherBiscardi if it can help, please see the full stack trace:

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)
index.js:1 The above error occurred in the <Highlight> component:
    in Highlight (at CodeBlock.jsx:8)
    in Unknown (created by MDXCreateElement)
    in MDXCreateElement (at landing.md:76)
    in pre (created by MDXCreateElement)
    in MDXCreateElement (at landing.md:76)
    in wrapper (created by MDXCreateElement)
    in MDXCreateElement (at landing.md:21)
    in MDXContent (at App.jsx:85)
    in MDXProvider (at App.jsx:84)
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (at App.jsx:83)
    in Suspense (at App.jsx:82)
    in main (created by ProxyComponent)
    in ProxyComponent (created by StyledComponent)
    in StyledComponent (created by Content)
    in Content (at App.jsx:81)
    in Layout (created by Root)
    in LayoutProvider (created by Root)
    in Root (at App.jsx:78)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.jsx:77)
    in ThemeProvider (at App.jsx:75)
    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.
The above error occurred in the <Highlight> component:
    in Highlight (at CodeBlock.jsx:8)
    in Unknown (created by MDXCreateElement)
    in MDXCreateElement (at landing.md:68)
    in pre (created by MDXCreateElement)
    in MDXCreateElement (at landing.md:68)
    in wrapper (created by MDXCreateElement)
    in MDXCreateElement (at landing.md:21)
    in MDXContent (at App.jsx:85)
    in MDXProvider (at App.jsx:84)
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (at App.jsx:83)
    in Suspense (at App.jsx:82)
    in main (created by ProxyComponent)
    in ProxyComponent (created by StyledComponent)
    in StyledComponent (created by Content)
    in Content (at App.jsx:81)
    in Layout (created by Root)
    in LayoutProvider (created by Root)
    in Root (at App.jsx:78)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.jsx:77)
    in ThemeProvider (at App.jsx:75)
    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)
aress31 commented 4 years ago

Any update on this issue?

wooorm commented 4 years ago

It is unclear. You never provided the code in full, for example, or responded to Chris' suggestions

aress31 commented 4 years ago

@wooorm what do you mean I replied to @ChristopherBiscardi by providing the full stack trace and all the relevant parts of the code are provided in the previous posts. Please let me know what more you need to investigate the issue and I'll make sure to provide it. 😇

Really want to under what's going on and why it is not working although I diligently followed the tutorial.

ChristopherBiscardi commented 4 years ago

@aress31 if you could provide a codesandbox example that reproduces the issue that would be superb and I'd be happy to dig in and debug it for you

ChristopherBiscardi commented 4 years ago

a git repo would also work if you don't want to use codesandbox

rothbart commented 4 years ago

I'm also having an issue with this. @aress31 here's where the problem might be:

export default ({ children, className }) => {

If you debug you'll see children isn't passed to the Code element. Still digging to figure out why that might be.

rothbart commented 4 years ago

I'll also add that (somewhat unexpectedly) simply importing a css file from https://prismjs.com/ was enough to get syntax highlighting working in the context of MDX. Not sure why it wasn't necessary to run the corresponding JS as you'd need to do otherwise (e.g. https://betterstack.dev/blog/code-highlighting-in-react-using-prismjs/).

wooorm commented 3 years ago

Thanks for your patience, y’all!

@rothbart I think that’s exactly what prism-react-renderer does: it means you don‘t have to add the Prism JS. But, you still need to style it.

If this is the exact same issue as the original one, I’d appreciate it if any of you can figure out why children isn’t passed in your case. Because, uhm, I think we’re doing that everywhere 🤷‍♂️ And: did y’all update to use pre instead of code, as @ChristopherBiscardi pointed out?

wooorm commented 3 years ago

I believe the original issue is addressed by the suggestions in this thread. If someone is still stumbling on this exact issue, please comment here. But I’m assuming it’ll be something else, so if that’s the case please open a new issue!