apollographql / gatsby-theme-apollo

💜 Themes that we use to build Gatsby sites at Apollo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

MultiCodeBlock breaks MDX page

wojwoj opened this issue · comments

Hi,

I have a problem with getting to work MultiCodeBlock inside MDX page.

This the content of mdx page: [ignore txt extension, I just could not upload mdx file :(]
dummy.txt

And then i get following error when opening localhost:8000

Error: MultiCodeBlock(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

I use gatsby-theme-apollo-docs@4.4.3.

Could you please give me some advice how to solve it?

//BR
Wojtek

Maybe you had the same problem - seems very fragile, it broke for me if I didn't have line breaks before and after the content inside of it

I'm not 100% sure if it's related, but none of the code blocks render for me. Wrapping things in ticks "`" or "```" renders empty and I think that's why it's not working with MultiCodeBlock component.

I'm trying to investigate, but maybe the maintainers would know what's up off the top of their heads. I'm new to Gatsby:)

I've confirmed that code highlighting does not work in mdx files only, md files seem to be working fine.

@dominictobias you're right, in order to render Markdown within a JSX component, you need to surround the markdown with extra spaces above and below. Something like this should work as expected:

<MultiCodeBlock>

```js
const foo = 'bar';
```

```python
foo = "bar"
```

</MultiCodeBlock>