Gatsby: [gatbsy-source-contentful] Build breaks when combined with vanilla gatsby-plugin-mdx

[citypaul]

Description

I've been working on a site that pulls content from local .mdx files. As part of my work on this site I wanted to start bringing in some content from Contentful. The moment I tried to install the gatsby-source-contentful plugin I started getting errors that look like this:

"gatsby-plugin-mdx" threw an error while running the onCreateNode lifecycle:

unknown: Expected corresponding JSX closing tag for <Entry> (16:3)

  14 |    print(error)
  15 |  }
> 16 | }`}</p>
     |    ^
  17 |     </MDXLayout>
  18 |   )
  19 | };undefined: unknown: Expected corresponding JSX closing tag for <Entry> (16:3)

  14 |    print(error)
  15 |  }
> 16 | }`}</p>

Another example:

``` ERROR #11321 PLUGIN

"gatsby-plugin-mdx" threw an error while running the onCreateNode lifecycle:

unknown: Expected corresponding JSX closing tag for (15:27)

13 | .subscribe(
14 | new DisposableSubscriber}<CDAArray>{() {

15 | CDAArray result;}</p> | ^ 16 | <p>{ @Override public void onComplete() {
17 | new AlertDialog.Builder(context)
18 | .setTitle("Contentful")undefined: unknown: Expected corresponding JSX closing tag for (15:27)

13 | .subscribe(
14 | new DisposableSubscriber}<CDAArray>{() {

15 | CDAArray result;}</p> | ^ 16 | <p>{ @Override public void onComplete() {
17 | new AlertDialog.Builder(context)
18 | .setTitle("Contentful")
```

Steps to reproduce

I have created a vanilla project based on gatsby new.

I started by adding the contenful source config, and that worked. I was able to query GraphiQL and all was good.

I added the gatsby-transformer-remark plugin, and again, all good.

However, the act of installing gatsby-plugin-mdx instantly caused the build to break. I have created a sample application for you here:

https://github.com/citypaul/gatsby-contentful-error-example

I've just stuck a place for the Contentful keys at the top of the gatsby-config file for now. If you create a vanilla project in Contentful (I signed up as a new user and used the app they create as a sample), you should see this error occurring.

Expected result

I'd expect there to be no build errors and I should be able to query Contentful and pick up the .mdx files on the filesystem through GraphiQL.

Actual result

The build fails with lots of errors like those I have posted above.

Environment

System:
OS: macOS 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.11.3 - ~/.nvm/versions/node/v10.15.3/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 77.0.3865.90
Firefox: 69.0
Safari: 13.0
npmPackages:
gatsby: ^2.15.23 => 2.15.23
gatsby-image: ^2.2.21 => 2.2.21
gatsby-plugin-manifest: ^2.2.18 => 2.2.18
gatsby-plugin-mdx: ^1.0.44 => 1.0.44
gatsby-plugin-offline: ^3.0.9 => 3.0.9
gatsby-plugin-react-helmet: ^3.1.8 => 3.1.8
gatsby-plugin-sharp: ^2.2.25 => 2.2.25
gatsby-source-contentful: ^2.1.42 => 2.1.42
gatsby-source-filesystem: ^2.1.26 => 2.1.26
gatsby-transformer-remark: ^2.6.24 => 2.6.24
gatsby-transformer-sharp: ^2.2.17 => 2.2.17
npmGlobalPackages:
gatsby-cli: 2.7.49

[citypaul]

So I've experimented a bit more with this, and it looks like this applies to their Lessons sample application, but if I try another of their samples (the product app), the second one appears to work.

I have tried re-creating both from scratch, but only the first Lesson example appears to break.

[citypaul]

So this turns out to be rather interesting.

You can see here that the types they are using in their sample Lessons app actually contains snippets of real code:

Here's one of those code snippets:

So it appears that this code is being parsed in such a way that the MDX plugin thinks they are components and is bombing out.

While this might appear to be an edge-case, it should be noted that this is happening on the first sample app that is created by default when a new user creates an account with Contentful.

I'd also be very interested in any ideas or solutions people have that might solve this issue, because I do wonder what I'd do in the case where I'd actually need to allow people to post sample code like this.

Shout out to @tom-drake for some nice debugging support :-)

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[citypaul]

Can somebody please add the "not stale" label to this issue, as I don't believe this is stale?

[devpato]

I'm interesting. I'm having the same issue

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[citypaul]

This issue shouldn't have been closed. It's still an issue.

[vaibsgharge]

I am getting this error when my MDX post contains react code. Please help with this. Unable to use react code snippets inside MDX files.

[jonauz]

I have managed to get this when using JSX component within a another JSX component which is inside MDX file.
It seems to be something with indentation.

Created a new bug report https://github.com/gatsbyjs/gatsby/issues/24838