Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug with CodeBlocks

See original GitHub issue

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