"Cannot read length of undefined" due to parsing error

[baohouse]

https://github.com/FormidableLabs/prism-react-renderer/blob/078596ea53e0852dfe120a37aea30b33ae480603/src/utils/normalizeTokens.js#L74-L81

I'm looking into what part of my code is bad (presumably I have a preparser that converts unescaped HTML tags into React components), but there it ends up causing this error when content is undefined.

The highlighted code is this:

<pre><code class="language-javascript">
  import { ApiService } from 'core';
  const apolloClients = ApiService.generateApolloClients({
    apiKey: '<YOUR_API_KEY_HAS_NOT_BEEN_PROVISIONED>',
    deploymentConfigurationId: 'ABC123',
  });
</code></pre>

I think YOUR_API_KEY_HAS_NOT_BEEN_PROVISIONED is treated like an empty HTML tag. It'd probably be a good idea to somehow guard against parsing errors.

[kate-hall]

Having the same issue.

[rileymiller]

FYI, ran into this issue when porting over from gatsby-remark-prismjs to prism-react-renderer and the resolution wound up being that I needed to remove gatsby-remark-prismjs as an option under gatsby-plugin-mdx in my gatsby-config.js.

    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        defaultLayouts: {
          default: require.resolve("./src/templates/blog-post.tsx"),
          posts: require.resolve("./src/templates/blog-post.tsx"),
        },
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          // `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },